Web Applications - Refactoring HTML: Improving the Design of Existing Web Applications - page 266

Add Web Forms 2.0 Types
Identify the type of expected data by adding a type="email | url | date | time | datetime |
localdatetime | month | week | number" attribute to input text fields in forms.
Code View:
<form action="http://www.example.com/formhandler" method="post">
<p><label>E-mail: <input name="email" /></label></p>
<p><label>Date: <input name="date" /></label></p>
<p><label>Time: <input name="time" /></label></p>
<p><label>Date and time:
<input name="datetime" type="text" /></label></p>
<p><label>Local date and time:
<input name="localdatetime" type="text" /></label></p>
<p><label>Month: <input name="month" /></label></p>
<p><label>Week: <input name="week" /></label></p>
<p><label>Number: <input name="number" /></label></p>
<p><label>URL: <input name="url" /></label></p>
<p><label><input type="submit" value="Send data" /></label>
</form>
<form action="http://www.example.com/formhandler" method="post">
<p><label>E-mail: <input type="email" name="email" /></label>
</p>
<p><label>Date: <input type="date" name="date" /></label></p>
<p><label>Time: <input type="time" name="time" /></label></p>
<p><label>Date and time:
<input type="datetime" name="datetime" /></label></p>
<p><label>Local date and time: <input type="datetime-local"
name="localdatetime" /></label></p>
<p><label>Month: <input type="month" name="month" /></label></p>
<p><label>Week: <input type="week" name="week" /></label></p>
<p><label>Number: <input type="number" name="number" /></label>
</p>
<p><label>URL: <input type="url" name="url" /></label></p>
<p><label><input type="submit" value="Send data" /></label>
</form>
Motivation
These new types enable browsers to provide more appropriate GUI widgets to input data. For example, a
browser can show a calendar control to allow the user to select a date, as shown in Figure 7.1 .
Figure 7.1. Opera 9's calendar control