LESSON 8: Forms

  1. What is a form?
  2. Element FORM.
  3. Element INPUT.
  4. Element SELECT.
  5. Element OPTION.
  6. Element TEXTAREA.
  7. Examples.

1. What is a form?

The form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices, and then submit the form by clicking a "Submit" button.

The form can be submitted to a program on server or to an E-mail address.
Go to Top


2. Element FORM.

\..........Description

The FORM element defines an interactive form.

\..........Syntax

<FORM
    ACTION="action"
    METHOD="GET"|"POST">
.....
</FORM>

\..........Attributes

Attribute Description
ACTION="action" Specifies the action the browser have to take on submit.

Action may be: URI of a program on server that handles the form or mailto:E_mail_address.
METHOD= "GET"
"POST"
Specifies how the form input is sent to the server.

Note: Click here for more information about URI's.

\..........Examples to see

Example 1 demonstrates FORM attributes.
Go to Top


3. Element INPUT.

\..........Description

The INPUT element defines a form control for the user to enter input.
INPUT must be contained within FORM.

\..........Syntax

<INPUT
    NAME="name"
    SIZE="number"
    TYPE="text|checkbox|radio|submit|reset"
    VALUE="value"
    CHECKED>

\..........Attributes

Attribute Description
NAME="name" Specifies the name of the control. Attribute is required, because data is sent as: name="value"
The value is: entered text for text control; value of VALUE attribute for radio and checkbox controls.
SIZE="number" Specifies the size of text control.
TYPE= "text"
"checkbox"
"radio"
"submit"
"reset"
Specifies the type of the control.

text - provides a single-line text input field; Used by default.

checkbox - provides switch (square button) that can be turned on and off ;

radio - provides switch (radio button) that can be turned on and off ;

submit - defines a button for submitting the form;

reset - defines a button for resetting the form to its initial values.
VALUE="value" The value depends on the form control.
The VALUE attribute:

specifies the initial value for the text field;

provides the text of the button for reset and submit controls;

gives the value of the control when it is checked for radio and checkbox controls.
CHECKED Specifies that the control is initially checked for radio and checkbox controls.

\..........Examples to see

Example 1 demonstrates INPUT attributes.
Go to Top


4. Element SELECT.

\..........Description

The SELECT element defines a form control for the selection of options.
SELECT must be contained within FORM.

\..........Syntax

<SELECT
    NAME="name"
    SIZE="number"
    MULTIPLE>
.....
</SELECT>

\..........Attributes

Attribute Description
NAME="name" Specifies the name of the control. Attribute is required, because data is sent as: name="value"
The value is determined by VALUE attribute of the selected OPTION.
SIZE="number" Specifies the number of visible options.
MULTIPLE Allows multiple selections.

\..........Examples to see

Example 2 demonstrates SELECT attributes.
Go to Top


5. Element OPTION.

\..........Description

The OPTION element defines a menu choice within a SELECT menu.

\..........Syntax

<OPTION
    SELECTED
    VALUE="value">
.....
</OPTION>

\..........Attributes

Attribute Description
SELECTED Defines the OPTION to be initially selected.
VALUE="value" Specifies the value of the option, sent with the submitted form. In the absence of a VALUE attribute, the value is the content of the OPTION element.

\..........Examples to see

Example 2 demonstrates OPTION attributes.
Go to Top


6. Element TEXTAREA.

\..........Description

The TEXTAREA element defines a form control for the user to enter multi-line text input.
TEXTAREA must be contained within FORM.

\..........Syntax

<TEXTAREA
    NAME="name"
    COLS="number"
    ROWS="number">
.....
</TEXTAREA>

\..........Attributes

Attribute Description
NAME="name" Specifies the name of the control. Attribute is required, because data is sent as: name="value"
The value is entered text.
COLS="number" Specifies the number of visible columns.
ROWS="number" Specifies the number of visible rows.

\..........Examples to see

Example 3 demonstrates TEXTAREA attributes.
Go to Top


7. Examples.

Choose an example and move below the text box to see the HTML code.

Example 1: Designing a form with INPUT controls.
Example 2: Designing a form with SELECT control.
Example 3: Designing a form with TEXTAREA control.
Preview
Go to Top