Making sense of HTML5 - Build Windows 8 Apps with HTML5 and JavaScript - page 35

Adjusting input fields
In HTML5, you still create an input form by using the same markup elements you used from earlier
versions of the language. In other words, the following markup will still give you the opportunity to
upload any typed content to the given server.

<form action="http://www.yourserver.com/upload">
<span> Your name </span>
<input type="text" value="" />
<input type="submit" value="Save" />
</form>

The <input> element is the element that inserts a graphical element (such as, an input box or a
drop-down list) to collect some input data. You also use the <input> element to add a push button to
start the submission process to the server. In HTML5, the <input> element comes with more options
for the type of input boxes. For example, you can have date pickers, sliders, and search boxes offered
by the browser. At the same time, the browser provides free form validation for most common
scenarios, such as when a field is required and can't be left empty by the user.

New input types
If you look at the HTML5 syntax of the <input> element, the major difference with past versions is the
list of values now allowed for the type attribute. Table 2-1 lists some of the new input types supported
in HTML5.

TABLE 2-1 HTML5 specific values for the type attribute

Value Description

Meant to let the browser display any UI that allows entry of a color.
Note: This input type is not supported on Internet Explorer 10.

Color

Meant to let the browser display any UI that allows entry of a date.

date

Meant to let the browser display any UI that allows entry of an email address. email

Meant to let the browser display any UI that allows entry of a numeric input. number

Meant to let the browser display any UI that allows entry of a numeric input. range

Meant to let the browser display any UI that allows entry of a text to be searched
for.

search

Meant to let the browser display any UI that allows entry of a telephone number. tel

Meant to let the browser display any UI that allows entry of a time. time

Meant to let the browser display any UI that allows entry of a URL.

url

Note that the list in Table 2-1 is incomplete and limited to input types that you can really find
supported today on some web browsers. Other input types (for example, week) are part of the
current HTML5 draft but are not implemented anywhere. You might want to refer to
http://www.w3schools.com/html5 for more details.