• button
• checkbox
• file
• hidden
• image
• password
• reset
• radio
• submit
• text
In addition, there are some other elements that are used in forms such as <select> and<textarea> . These form controls provide plenty of function for basic form fields such as
• name
• phone number
• address—like you might find on a contact form
But, the Web as a platform has grown far beyond the stage where HTML forms are used to submit contact forms—now they are used to submit application data for server-side processing.
As a result, Web application developers find themselves continually in need of some more sophisticated form controls, such as spinners, sliders, date/time pickers, color pickers, and so on.
In order to tap into these types of controls, developers needed to use an external JavaScript library that provided UI components, or else use an alternative development framework such as Adobe Flex, Microsoft Silverlight, or JavaFX.
HTML5 aims to fill some of the gaps left by its predecessor in this space by providing a whole range of new form input types:
• color
• date
•datetime
• month
• number
• range
• search
• tel
• time
• url
• week
At the moment, support for these new form fields is quite limited. The Mobile Safari browser on the iPhone makes use of some of these new types to change the type of keyboard presented to the user
(for example, with the e-mail type, the @ symbol and .com shortcuts will be shown).
Also, Opera provides some new widgets for many of these controls, including a spinner for the number type and a calendar date picker for the date-related types.
The most widely available type of these new offerings is the range type, which is rendered as a slider by Opera, Safari, and Google Chrome. In addition to these new input types, HTML5 also supports two major new features for form fields.
The first of these is autofocus, which tells a browser to automatically give focus to a particular form field when the page has rendered, without requiring
JavaScript code to do so.
The second enhancement is the placeholder attribute, which allows the developer to define the text that will appear in a textbox-based control when its contents are empty.
An example of this would be a search box where the developer would prefer not to use a label outside the box itself. The placeholder attribute allows the developer to specify text that will show when the value of the control is empty and the control does not have focus. An example of this is shown in the Figure.
The Figure shows, the placeholder text for e-mail address and phone number
