Using Forms in Web Page

Forms are used in HTML for getting inputs from the user. It can be a registration form, feedback form, order form, contact form and so on.

To help the user in data entry, form has components; text fields, radio buttons, check boxes, list boxes and so on. When data entry is complete, the user submit the form by clicking the submit button on the page.

On submit, the data send to server for processing. The processing is done through Scripts like PHP, ASP. After the user fills the from and clicks the submit button, the data passes either through method POST (used to pass large amount of data) or GET (used to pass small amount of data, passed along with the URL) to the server side script that then handles data and perform appropriate action.

Attributes of <FORM>

ACTION: It specifies the location to which the content of the form are submitted. It is generally a URL of the script.

METHOD: It specifies the format in which the data send to the script. It can take two values:

  • GET: The data submitted is displayed in the browser address bar for transfer.
  • POST: Important data are submitted through post where data not display in browser address bar, during transfer.

Syntax:

<FORM METHOD="post" ACTION="URL">

</FORM>

The <INPUT> Tag

This is an empty tag, no end tag. It is used to add form components such as text fields, password fields, check boxes, radio buttons, reset buttons and submit buttons in the form.

Attributes of <INPUT>

NAME: It defines name for the form component. This field is required for all the types of input except submit and clear.

SIZE: It specifies the size of the input field in number of characters; used with text or password field.

MAXLENGTH: It specifies maximum number of characters that can be entered into a text or password field.

CHECKED: It sets a checkbox or radio button to 'on'.

TYPE: It sets the type of the input field. It can take following values:

  • TEXT - used for single line text field.
  • PASSWORD - ¬†Same as TEXT, but entered text appear as * characters
  • RADIO - It is used for attributes that accepts a single value from a set of alternatives. Each radio button field in the group should be given the same name. Only the selected radio button in the group generates a name-value pair in the submitted area. A radio button requires an explicit VALUE attribute.
  • SUBMIT - This creates a button that submits the form. You can use VALUE attribute to provide a label to the button. On submit, the data submitted to the scripts specified with the ACTION attribute of the <FORM> Tag.
  • RESET - This creates a button, when selected, resets the value of all the fields in the form to their initial values. You can set the label of RESET button by using VALUE attribute.
  • HIDDEN - This creates an invisible field, but the content of the field are sent with the submitted form.

The <SELECT> Tag

This is a container tag, allows user to select one of the sets of alternatives described by textual labels. Every alternatives is represented by <OPTION> tag.

Attributes of <OPTION>

SELECTED: This attribute indicates that option is initially selected.

VALUE: This attribute indicates the value of the option selected.