Forms are a characteristic of the HTML standard that let authors collect information provided by the visitors. This forms can be useful to collect personal information, contact information, preferences or opinions, or any kind of user input the author may need. In this tutorial we'll explore all the characteristics available to build forms in HTML.
A form can be inserted into an HTML document through the HTML form tag which acts as a container for all the input elements. All the information gathered by a form can be submitted to a processing agent that's usually specified in the "action" attribute (which can be overridden using Javascript). What the processing agent does with the information and how it handles it will not 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 may also need to 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 and handle the submit method of the form.
This way, a simple form can have the next declaration:
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 tags: the HTML input tag, the HTML button tag, the HTML select tag and the HTML textarea tag. In this tutorial we'll divide the controls by their functionality. Note: as the descriptions and attributes for each control are briefly treated in this tutorial, please refer to these tags references for more information.
Obrserve that the "name" attribute of each control will be the name used to identify 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).
There are three types of text inputs that can collect textual information like names, comments, etc.
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. This control is inserted in HTML documents using the HTML input tag with the "text" value for the "type" attribute.
| Code | View |
|---|---|
|
<form method="post" action="handler.php"> <p>Input text: <input name="inputtext" type="text" /></p> </form> |
The value passed to the processing agent will be the text inputted by the user, i.e. the content in the text box.
This control acts exactly like the line text input with the exception that this control "hides" the characters showing them as dots or asterisks to avoid users to see the inputted text. It's commonly used to input passwords.
| Code | View |
|---|---|
|
<form method="post" action="handler.php"> <p>Input password: <input name="pass" type="password" /></p> </form> |
The value passed to the processing agent will be the text inputted by the user, i.e. the content in the text box.
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 paragraphs, comments, letters, etc. In this tag, the content will be the initial text value.
| Code | View |
|---|---|
|
<form method="post" action="handler.php"> <p>Input your comments:<br /><textarea name="comments" rows="2" cols="30">...Your comments here...</textarea></p> </form> |
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.
Authors can also let their visitors pick up preestablished options from a list. This can be achieved using one of the three following controls, that can build different types of option lists.
The check box is a simple option that can take one of two values: "checked" or "unchecked". Check boxes can be visually grouped as a list of options, but each one of them is treated individually. This control is inserted using the HTML input tag with the "checkbox" value for the "type" attribute.
| Code | View |
|---|---|
|
<form method="post" action="handler.php"> <p>Select your interests:<br /> <input name="cbimovies" type="checkbox" />Movies<br /> <input name="cbibooks" type="checkbox" />Books<br /> <input name="cbiinternet" type="checkbox" />Internet </p> </form> |
In this case, the value passed will be boolean and will represent the check status of the option. Depending on the processing agent could be "on/off", "checked/unchecked", "true/false", etc.
Radio buttons work in the same way that check boxes do with a small difference: radio buttons that share the same name conform a group of options where users can't check more than one option at the same time. This means that when the user checks an option, the rest is automatically unchecked.
| Code | View |
|---|---|
|
<form method="post" action="handler.php"> <p>Select your interests:<br /> <input name="interests" type="radio" value="rbimovies" />Movies<br /> <input name="interests" type="radio" value="rbibooks" />Books<br /> <input name="interests" type="radio" value="rbiinternet" />Internet </p> </form> |
For radio buttons the value passed to the processing agent is the content of the "value" attribute, which means that an options list with several options will only pass one value.
These lists can be inserted using three tags: the HTML select tag (main container), the HTML option tag (single option declaration) and the HTML optgroup tag (group of options). This type of list can be used as a radio buttons list or as a check boxes list, depending on the presence of the "multiple" attribute.
| Code | View |
|---|---|
|
<form method="post" action="handler.php"> <p>Pick only one option, like for radio buttons:<br /> <select name="selectinputs"> <optgroup label="Text inputs"> <option>Single line</option> <option>Password</option> <option>Multi-line</option> </optgroup> <optgroup label="Options"> <option>Check boxes</option> <option>Radio buttons</option> <option>Select lists</option> </optgroup> </select> </p> <p>Pick as many options as you wish, like for check boxes (holding down the "Ctrl" key):<br /> <select name="selectinputs[]" multiple="multiple"> <optgroup label="Text inputs"> <option>Single line</option> <option>Password</option> <option>Multi-line</option> </optgroup> <optgroup label="Options"> <option>Check boxes</option> <option>Radio buttons</option> <option>Select lists</option> </optgroup> </select> </p> </form> |
For the first list without the "multiple" attribute, the value passed to the processing agent will be the selected option, but for the second example the value passed will be an array containing the selected options. That's why, for lists with the "multiple" attribute present, you must append to the name of the "select" control the braces ("[]"). The individual value passed in both types is the content of the "value" attribute if it's present and the content of the tag if it's not.