Foundation HTML5 with CSS3

Chapter 8

Figure 8-19. A multi-line selection menu with two options selected

Required Attributes

 name: Identifies the control so that it can be associated 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 to

successfully handle the form.

Optional Attributes

 autofocus: This Boolean attribute is new in HTML5 and specifies that the button should

automatically receive focus when the page loads.

 disabled: A Boolean attribute that disables the control so it can’t receive focus or be changed.

Many browsers will display disabled controls in a “grayed-out” style.

 form: This is new in HTML5 and allows the control to be associated with one or more additional

forms. The form attribute accepts a value of one or more form IDs, separated by spaces. This

feature allows authors to work around the lack of support for nested form elements.

 multiple: A Boolean attribute that, when present, indicates that multiple options may be

selected, usually by holding down a Shift, Control, or Command key while selecting or

deselecting options.

 required: This Boolean attribute is new to HTML5 and indicates that the control must have a

value in order to submit the form; i.e. at least one option must be selected.

 size: Specifies the height of a multi-line selection control as a number of lines; the value must be

a positive whole numeral, such as size="15".

option

Each option in a select element is represented by an option element, though as of HTML5 the option

element may also appear within a datalist element, and there are some slightly different rules about its

use with datalists. We’ll go into more detail on that later in this chapter when we cover the datalist

element, but for now let’s focus on options within a selection control.

When it appears in a select element, option is a non-empty element that requires an end tag and can

only contain text, which acts as a label that will be displayed in the selection menu. Each option in the

selection control appears on a single, non-wrapping line within the menu. That text content is also the

value that will be sent with the form unless you specify a different value with an optional value attribute.

You can preselect an option by including a Boolean selected attribute, and you can preselect more than

one option, but only when the parent selection control has a multiple attribute.