Forms in HTML

Forms are a characteristic of the HTML standard that let authors collect information provided by the visitors. These forms can be useful to collect personal information, contact information, preferences, opinions, or any kind of user input the author may need. In this tutorial we'll explore all the tools availble to build forms in HTML.

A form can be inserted in HTML documents using the HTML form element which acts as a container for all the input elements. All the information collected by a form can be submitted to a processing agent (a file containing a script made to process this information) that's usually specified in the "action" attribute. What the processing agent does with the information and how it handles it won't be treated in this site given that it doesn't belong to the HTML standard. To handle forms' data you must use a server side script.

You can also specify how the data will be sent in the value of the "method" attribute: "post" (the form's data is attached to the body of the form) or "get" (the form's data is attached to the URL). The processing agent is supposed to know the submit method of the form.

This way, a simple form can have the next declaration:

Input elements

Most of the input controls are visual and can interact with the user. Their use depends on the type of control and also the kind of information they can collect. The input elements of a form can be defined using these elements: the HTML input element, the HTML button element, the HTML select element and the HTML textarea element. In this tutorial we'll divide the controls by their functionality.

As a general rule for all controls, the "name" attribute will be the identifier of the data for the processing agent, and the value will depend on the control's nature (sometimes, like in check boxes or radio buttons, will be the content of the "value" attribute).

Note: as the descriptions and attributes of each control are briefly treated in this tutorial, refer to the element references for more information.

Text inputs

There are three types of text inputs that can collect textual information like names, comments, etc.

Line text input

This control collect textual information in one line only, which means that the user won't be able to use the "enter" key to go to the next line (in most browsers, the "enter" key submits the containing form when this control is focused).

This control is inserted in HTML documents using the HTML input tag with the "text" value for the "type" attribute, and an initial value can be defined using the "value" attribute.

The value passed to the processing agent will be the text inputted by the user, i.e. the content in the text box.

Password text input

This control acts exactly like the line text input with the exception that it "hides" the characters showing them as dots or asterisks to avoid users to see the inputted text.

It's defined with the "pass" value for the "type" attribute, and an initial value can be defined using the "value" attribute. It's commonly used to input passwords.

The value passed to the processing agent will be the text inputted by the user, i.e. the content in the text box.

Multi-line text input

This control allows users to input text in one or more lines. Is inserted using the HTML textarea tag and may be used to collect reports, comments, letters, etc. In this tag, the content will be the initial text value.

Note that the attributes "rows" and "cols" set the dimension of the text box and are required by some DTDs. The value passed to the processing agent will be the text inputted by the user, i.e. the content in the text box.