Foundation HTML5 with CSS3

Chapter 8

Every input element—those you intend to process, at least—requires a name attribute so it can be

associated with its value when a user submits the form. Technically, name is an optional attribute, and isn’t

required for a valid document so a validator may not indicate an error if it’s missing. But a markup validator

won’t know what you intend to do with the form data so it can’t automatically determine which inputs

require names.

The type attribute specifies the particular type of control the element represents, from simple text fields to

checkboxes to image buttons, tailored for particular types of data. A number of new input types (or states

of the input element, as the spec refers to them) have been introduced in HTML5, as well as many new

attributes that extend and enhance the functionality of the humble form field.

Browser support for some of the new input types is inconsistent at the time of this writing, but browsers are

updating rapidly and adding new features in every release. Even so, HTML5 has been designed from the

ground up to be backwards compatible with older user-agents, and any unrecognized input type simply

reverts to an ordinary text field that can still accept any value your users might enter. In this section we’ll

cover the full range of input types, both old and new.

Required Attributes

 name: Identifies the control so it can be matched with its value when the form is submitted. A

markup validator may not generate an error if this attribute is missing, but it’s required in order to

successfully handle the form. Notable exceptions are input type="submit" or input

type="reset", which don’t always require names because their values aren’t necessarily

submitted with the data set.

Optional Attributes

 accept: Includes a comma-separated list of accepted file MIME types (only for input

type="file").

 alt: Specifies an alternative text description for an image when the image isn’t available (only for

input type="image").

 autocomplete: This attribute is new in HTML5 and specifies whether browsers should be

allowed to automatically complete the input field, either by filling in locally stored values or by

suggesting previously entered text as the user types. This will only work if you also enable auto-

completion for the parent form element. The attribute accepts the values on or off, with on being

the default when the attribute is missing. Auto-completion is really handy for often-entered

information such as a shipping address, but you could disable it for a more sensitive field such as

a credit card number.

 autofocus: This Boolean attribute is new in HTML5 and indicates that the control should

automatically receive focus when the page loads.

 checked: A Boolean attribute that, when present, sets an initial checked state for checkboxes or

radio buttons (only for input type="checkbox" and input type="radio").