HTML and CSS Reference
In-Depth Information
<li>
<label for="Week" id="lblWeek">Busiest Week</label>
<input name="Week" type="week"
value="2012-W16"
id="Week" />
</li>
<li>
<label for="DateTime" id="lblStart">Start Date/Time</label>
<input name="DateTime" type="datetime"
value="2012-04-17T09:15Z"
id="DateTime" />
</li>
<li>
<label for="Time" id="lblTime">Current Time</label>
<input name="Time" type="time"
value="15:05:00"
id="Time" />
</li>
<li>
<label for="Phone" id="lblPhone">Phone</label>
<input name="Phone" type="tel" value="8005551212" id="Phone" />
</li>
<li>
<label for="Range" id="lblRange">Overall satisfaction</label>
<input name="Range" type="range"
value="79"
id="Range"
style="height:30px;width:200px;" />
</li>
<li>
<label for="Color" id="lblColor">Preferred color</label>
<input name="Color" type="color"
value="#b4a8e8"
id="Color" />
</li>
Using the HTML5Test Web Site
I mentioned that I am using Opera for this exercise. Each browser may implement a different subset of HTML5
features. The
HTML5Test.com
web site that I mentioned in the previous chapter is a really useful tool for figuring
out which browser works best for a specific set of features.
If you go to the Compare tab you can select up to three different browsers to see a side-by-side comparison
for each feature. For example, I selected Google Chrome 18, IE 10, and Opera 11.60 to see how they stack up
for the form features. The results are displayed in Figure
2-21
. While Google Chrome has a higher overall score,
Opera is the clear winner when it comes to supporting forms.
