Forms

Forms were also amongst the first additions to the HTML standard, and provide the ability to submit data to a web server. A web form is composed of <input>, <textarea>, <select> and similar elements nested within a <form> element.

The Form Element

The form element primarily is used to organize input elements and specify how they should be submitted. In its simplest form, it is simply a tag that other elements are nested within:

<form></form>

However, it can be modified with a number of attributes:

• action The action attribute specifies the url that this form data should be sent to. By default, it is the page the form exists on (i.e. if the form appears on http://foo.com/bar , then it will submit to http://foo.com/bar) . The url can be relative to the current page, absolute, or even on a different webserver. See the discussion of URLs in the HTTP section.

• enctype The enctype attribute specifies the format that form data will be submitted in. The most common values are application/x-www-form-urlencoded (the default), which serializes the key/value pairs using the urlencoding strategy, and multipart/form-data, which uses the multipart encoding scheme, and can interweave binary (file) data into the submission. These encoding strategies are discussed more thoroughly in the chapter on submitting form data.

• method The method attribute specifies the HTTP method used to submit the form. The values are usually GET or POST. If the method is not specified, it will be a GET request.

• target The target attribute specifies how the server response to the form submission will be displayed. By default, it loads in the current frame (the _self) value. A value of _blank will load the response in a new tab. If <iframe> elements are being used, there are additional values that work within <iframe> sets.

The Input Element

Most inputs in a form are variations of the <input> element, specified with the type attribute. Many additional specific types were introduced in the HTML5 specification, and may not be available in older browsers (in which case, they will be rendered as a text type input). Currently available types are (an asterisk indicate a HTML5-defined type):

• button: A push button with no default behavior.
• checkbox: A check box allowing single values to be selected/deselected. It has an extra attributed checked, which is a boolean specifying if it is checked.
• color*: A control for specifying a color.
• date*: A control for entering a date (year, month, and day, with no time).
• datetime-local*: A control for entering a date and time, with no time zone.
• email: HTML5 A field for editing an e-mail address.
• file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
• hidden: A control that is not displayed but whose value is submitted to the server.
• image: A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.
• month*: A control for entering a month and year, with no time zone.
• number*: A control for entering a number.
• password: A single-line text field whose value is obscured.
• radio: A radio button, allowing a single value to be selected out of multiple choices.
• range*: A control for entering a number whose exact value is not important.
• reset: A button that resets the contents of the form to default values.
• search*: A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.
• submit: A button that submits the form.
• tel*: A control for entering a telephone number.
• text: A single-line text field. Line-breaks are automatically removed from the input value.
• time*: A control for entering a time value with no time zone.
• url*: A field for entering a URL.
• week*: A control for entering a date consisting of a week-year number and a week number with no time zone.

In addition to the type attribute, some other commonly used input attributes are:

• name The name of the attribute, which is used to identify the submitted value (the name and value attributes define a key/value pair)
• value The input’s current value
• placeholder A string to display in the input until a value is entered (typically used as a prompt). The placeholder is never submitted as a value.
• readonly A boolean attribute that when true, indicates the input value cannot be changed
• required A boolean value indicating that the input is required to have a value before it can be submitted.
• tabindex Indicates the order in which inputs can be reached by hitting the tab key. For dense input forms, this can be important.
• disabled A boolean value that when true, means the input is disabled (does not submit a value, cannot be interacted with, and is grayed out)

Other “Input” Elements

In addition to the <input> element, some other elements exist that provide input-type functionality within a form, and implement the same attributes as an <input>. These are:

Textarea

The <textarea> element provides a method for entering larger chunks of text than a <input type="text"> does. Most importantly, it preserves line-breaks (the <input type="text"> removes them). Instead of using the value attribute, the current value appears inside the opening and closing tags, i.e.:

<textarea name="exampleText">
  This text is displayed within the textarea
</textarea>

In addition, the rows and cols attribute can be used to specify the size of the textarea in characters.

Select

The <select> element allows you to define a drop-down list. It can contain as children, <option> and <optgroup> elements. The <select> element should have its name attribute specified, and each <option> element should have a unique value attribute. The selected <option>’s value is then submitted with the <select>’s name as a key/value pair.

Each <select> element should also have a closing tag, and its child text is what is displayed to the user.

The <optgroup> provides a way of nesting <option> elements under a category identifier (a label attribute specified on the <optgroup>).

An example <select> using these features is:

<select name="headgear">
  <option value="none">None</option>
  <optgroup label="Hats">
    <option value="ball cap">Ball Cap</option>
    <option value="derby">Derby</option>
    <option value="fedora">Fedora</option>
  </optgroup>
  <optgroup value="Ceremonial">
    <option value="crown">Crown</option>
    <option value="mitre">Mitre</option>
    <option value="war bonnet">War Bonnet</option>
  </optgroup>
</select>

Finally, multiple selections can be allowed by specifying a multiple attribute as true.

Labels

In addition to inputs, a <form> often uses <label> elements to help identify the inputs and their function. A label will typically have its for attribute set to match the name attribute of the <input> it corresponds to. When connected in this fashion, clicking the label will give focus to the input. Also, when the <input type="checkbox">, clicking the label will also toggle the checked attribute of the checkbox.

Fieldsets

Finally, the <fieldset> element can be used to organize controls and labels into a single subcontainer within the form. Much like <div> elements, this can be used to apply specific styles to the contained elements.