ADDING FORMS - HTML5 - page 290

Table 14.2 Input Element Attributes

Input Attribute Features Input Attribute Features

accept alt

File type accepted Hint of fi le loading

autocomplete * autofocus *

Complete typing Sets focus to fi eld

checked disabled

Selected state Unusable

form *

Set form id

formaction *

Form override

formenctype *

Form override

formmethod *

Form override

formnovalidate * formtarget *

Form override Form override

height * list *

Height in pixels Datalist suggest

max * maxlength

Maximum value Maximum length

min * multiple

Minimum value Multiple values

name pattern *

DOM name Regular expression

placeholder * readonly

Disappears on entry Cannot input

required *

Must fi ll

size

Num char visible

src

Source

step *

Number of steps

type value

Input kind Assigned value

294

width *

Width in pixels

*New to HTML5

With all the dif erent combinations of attributes and their values, the next several sections
take a look at dif erent groupings of form-related elements, attributes, and values in combina-
tions. h e i rst section covers using the datalist element with the list and form
attributes. As with all the following sections, this one packs in as many features as possible
while still focusing on the key features under discussion.

THE LIST ATTRIBUTE, THE URL TYPE, AND DATALISTS
One of the new attributes that can be used with forms is list . At the beginning of this
chapter, I noted that Web pages should be smooth, interactive experiences for users. h e less
work that users have to put into an interactive form the better. h e list attribute provides a
list of suggested items in an input element, and users may select from the list or type in a
response. However, the list attribute is actually a reference to a <datalist> tag elsewhere
in the Web page. Further, if you place the <datalist> container within a <form> con-
tainer, the <input> elements at er the data list don't show up on the page. So, what you have
to do is to provide an id attribute in the <datalist> tag and assign it to the list attribute
in the <input> tag. h e data list is kept outside of the <form> container but is connected
through the data list's id .