We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data. This guide is somewhat exhaustive, covering all of the available native form widgets in four parts. In this section, we cover form widgets that have been available in all browsers for over 20 years.
|Prerequisites:||Basic computer literacy, and a basic understanding of HTML.|
|Objective:||To understand many original native form widgets available in browsers for collecting data, and how to implement them using HTML.|
We've now been introdued to some of the original form controls including
<input>. Originally, were were limited to 10 input types, including button, checkbox, file, hidden, image, password, radio, reset, submit, text. We'll discuss those in this section. Additionally, were were provided with the
<select> element, along with its associated
<optgroup> elements. We cover all those here, along with some attributes that are common to all form controls.
Note: The features discussed in this article are supported in all browsers; which is not the case for all form controls. We cover additional form controls in the next 3 sections. If you want more exact details, you should consult our HTML forms element reference, and in particular our extensive <input> types reference.
Here we will focus on the form widgets built in to browsers. Because HTML form control appearance may be quite different from a designer's specifications, web developers sometimes build their own form widgets — see the advanced tutorial on How to build custom form widgets.
Many of the elements used to define form widgets have some of their own attributes. However, there is a set of attributes common to all form elements that give you some control over those widgets.
Below is a list of those common attributes:
|Attribute name||Default value||Description|
||(false)||This Boolean attribute lets you specify that the element should automatically have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.|
||(false)||This Boolean attribute indicates that the user cannot interact with the element. If this attribute is not specified, the element inherits its setting from the containing element, for example,
||The form element that the widget is associated with if not nested within that form. Omittable otherwise. The value of the attribute must be the
||The name of the element; this is submitted with the form data.|
||The element's initial value.|
Text input fields
<input> fields, are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. Text fields can also be specialized with HTML attributes to achieve particular needs. We've already seen a few simple examples.
All text fields share some common behaviors:
- They can be marked as
readonly(the user cannot modify the input value but it is sent with the rest of the form data) or even
disabled(the input value can't be modified and is never sent with the rest of the form data).
- They can have a
placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box.
- They can be constrained in
size(the physical size of the box) and
maxlength(the maximum number of characters that can be entered into the box).
- They can benefit from
spellcheck, spell checking, if the browser supports it.
<input> element is special because it can be almost anything. By simply setting its
type attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons and color pickers, and buttons.
Single line text fields
A single line text field is created using an
<input> element whose
type attribute value is set to
text, or ommitting the
type attribute, as
text is the default value. The value
text for this attribute is also the fallback value if the value you specify for the
type attribute is unknown by the browser (for example if you specify
type="color" and the browser doesn't support native color pickers).
Here is a basic single line text field example:
<input type="text" id="comment" name="comment" value="I'm a text field">
Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.
Note: HTML5 enhanced the basic original single line text field by adding special values for the
type attribute. These values enable the addition of extra features and constraints to a field. We'll cover those in the next section, HTML5 input types.
One of the original input types was the
password text field type; set using the value
password for the
<input type="password" id="pwd" name="pwd">
password value doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others. You can include a
maxlength for passwords, just like you can for text. The two main differences between text and password are the list attribute is supported with text but not password, and the data entered in a password field is visually obscured,
Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.
Browsers recognize the security implications of sending form data over an insecure connection, and have warnings to deter users from using insecure forms. For more information on what Firefox implements, see Insecure passwords.
Another original text control is the hidden input type, created by setting its
type attribute set to the value
hidden. creating a form control that is sent to the server along with the form that is invisible to the user. Because it is hidden, the user can not see nor intentionally edit the value, it will never receive focus, and the screen reader will not notice it either.
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
If you create such an element, it's required to set its
value attributes. The value can be dynamically set.
The hidden input type supports the global and autocomplete attributes, but no other attributes, and should not have an associated label.
Checkable items: checkboxes and radio buttons
Checkable items are widgets whose state you can change by clicking on them or their associated labels. There are two kinds of checkable item: the check box and the radio button. Both use the
checked attribute to indicate whether the widget is checked by default or not.
Checkbox A set of zero or more values from a predefined list A checkbox radio Radio Button An enumerated value
It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a
name attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name. If they are checked but have no value, the name is sent with the value of on.
For maximum usability/accessibility, you are advised to surround each list of related items in a
<fieldset>, with a
<legend> providing an overall description of the list. Each individual pair of
<input> elements should be contained in its own list item (or similar). This is shown in the examples. The associated
<label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
checked attribute makes the checkbox checked automatically when the page loads. Clicking the associated label toggles the checkbox on and off.
<input type="radio" id="soup" name="meal" checked>
Several radio buttons can be tied together. If they share the same value for their
name attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at a time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form. Once one of the radio buttons in a same-named group of buttons is checked, it is not possible for the user to uncheck all of the buttons without resetting the form.
<fieldset> <legend>What is your favorite meal?</legend> <ul> <li> <label for="soup">Soup</label> <input type="radio" id="soup" name="meal" value="soup" checked> </li> <li> <label for="curry">Curry</label> <input type="radio" id="curry" name="meal" value="curry"> </li> <li> <label for="pizza">Pizza</label> <input type="radio" id="pizza" name="meal" value="pizza"> </li> </ul> </fieldset>
The radio button isn't actually a button; that doesn't mean we don't have buttons! There are three input types that produce buttons, as well as a
<button> element with the type attribute that mimic these three input types, but unlike the input versions, are almost infinitely stylable. (The image input type is also a button. We'll cover that next.)
Three button types
- Sends the form data to the server. For
<button>elements, omitting the
typeattribute (or an invalid value of
type) results in a submit button.
- Resets all form widgets to their default values.
<button type="submit"> This is a <br><strong>submit button</strong> </button> <input type="submit" value="This is a submit button">
<button type="reset"> This is a <br><strong>reset button</strong> </button> <input type="reset" value="This is a reset button">
<button type="button"> This is an <br><strong>anonymous button</strong> </button> <input type="button" value="This is an anonymous button">
- As you can see from the examples,
<button>elements let you use HTML in their content, which are inserted between the opening and closing
<input>elements on the other hand are empty elements; their displayed content is inserted inside the
valueattribute, and therefore only accepts plain text as content.
Technically speaking, there is almost no difference between a button defined with the
<button> element or the
<input> element. The only noticeable difference is the content of the button itself and styleability. Within an
<input> element, the label can only be character data, whereas in a
<button> element, the inner content can be HTML, so it can be styled accordingly.
The image button control is one which is displayed exactly like an
<img> element, except that when the user clicks on it, it behaves like a submit button (see above).
An image button is created using an
<input> element with its
type attribute set to the value
image. This element supports exactly the same set of attributes as the
<img> element, plus all the attributes supported by other form buttons.
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30">
If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:
- The X value key is the value of the
nameattribute followed by the string ".x".
- The Y value key is the value of the
nameattribute followed by the string ".y".
So for example when you click on the image of this widget, you are sent to a URL like the following:
This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the Sending and retrieving form data article.
There is one last input type that came to us with HTML 3: the file input type. Forms are able to send files to a server; this specific action is detailed in the article Sending and retrieving form data. The file picker widget is how the user can choose one or more files to send.
To create a file picker widget, you use the
<input> element with its
type attribute set to
file. The types of files that are accepted can be constrained using the
accept attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the
In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.
<input type="file" name="file" id="file" accept="image/*" multiple>
On some mobile devices, the file picker can access photos, videos, and audio captured directly by the device's camera and microphone by adding capture to the accept attribute.
<input type="file" accept="image/*;capture=camera"> <input type="file" accept="video/*;capture=camcorder"> <input type="file" accept="audio/*;capture=microphone">
In this module
- Your first HTML form
- How to structure an HTML form
- The native form widgets
- HTML5 input types
- Additional form controls
- Form data validation
- Sending form data
- How to build custom form widgets
- HTML forms in legacy browsers
- Styling HTML forms
- Advanced styling for HTML forms
- Property compatibility table for form widgets