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.
Buttons are useful in forms to submit it, reset it or to execute custom functions. They can be inserted using the HTML input tag (submit, reset and image) or the HTML button tag (content buttons).
This type of buttons automatically submits the form when pressed. Are inserted using the HTML input tag with the "submit" value for the "type" attribute.
This type of buttons resets the controls of a form to their initial value when pressed. Are inserted using the HTML input tag with the "reset" value for the "type" attribute.
Image buttons work exactly as submit buttons with the only difference that image buttons are visually rendered with the image pointed in the "src" attribute. These buttons also send the coordinates where the click occurred (e.g., for an image button named "button1" the coordinates will be sent with the form as "button1.x" and "button1.y"). Are inserted using the HTML input tag with the "image" value for the "type" attribute.
Content buttons may be used as a submit or reset buttons or may have no preestablished action (depending on the value of the "type" attribute), but they allow authors to insert content inside of them. This means that a piece of HTML code can be displayed inside of the button (links, paragraphs, bold text, images, etc.).
| Code | View |
|---|---|
| <form method="post" action="handler.php"> <p><button type="button"> The <b>HTML button tag</b><br /> allows content.<br /> </button></p> </form> |
File inputs can be used to upload files to the server. The control shows a text box where the user must specify the location of the file (that will be processed locally by the browser) that will be sent to the server. This way authors can request visitors to send files through the page. The control usually shows a button to pick up the file visually.
Note that for forms with file uploads you must specify the value "multipart/form-data" in the "enctype" attribute of the HTML form tag.
| Code | View |
|---|---|
| <form method="post" action="handler.php" enctype="multipart/form-data"> <p><input name="image" type="file" /></p> </form> |
Element's labels can make your page look better and add a small functionality for visual user agents (when a visitor clicks the label the action is passed to its associated control), but they will certainly make a lot of sense for people with disabilities or non-visual browsers. A label establishes a relationship between a control and a piece of text (that's supposed to set a "title" for the control).
Labels can be inserted using the HTML label tag and are associated to controls through the "for" attribute. To do so, the value of the "for" attribute from the HTML label tag must match the value of the "id" attribute from the control.
| Code | View |
|---|---|
| <form method="post" action="handler.php"><div> <label for="idfname">First name:</label> <input type="text" id="idfname" name="fname" /><br /> <label for="idlname">Last name:</label> <input type="text" id="idlname" name="lname" /><br /><br /> Gender:<br /><input type="radio" id="idmale" name="gender" /><label for="idmale">Male</label><br /> <input type="radio" id="idfemale" name="gender" /><label for="idfemale">Female</label> </div></form> |
All elements in a form can also be grouped thematically with the HTML fieldset tag. This tag contains a group of controls that are related to each other for some reason (e.g. personal information, work information, financial information, interests, etc.).
The caption for each fieldset can be set with the HTML legend tag that must be defined right after the fieldset start tag, and give a descriptive title for the group of controls.
| Code | View |
|---|---|
| <form method="post" action="handler.php"> <fieldset> <legend>Personal information</legend> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> Address: <input type="text" name="paddres" /><br /> Phone: <input type="text" name="pphone" /> </fieldset> <fieldset> <legend>Work information</legend> Address: <input type="text" name="waddress" /><br /> Phone: <input type="text" name="wphone" /> </fieldset> </form> |
The use of this grouping is wide and depends on each specific form, but can be very helpful for visitors when filling large forms (specially for non-visual user agents).