Chrome, Safari, and Opera each implement a slider widget, which looks like
this:Notice that we’ve also set the min and max range for the slider. That will con-
strain the value for the form field.Handling Numbers with Spinboxes
We ask users to enter numbers a lot, and although typing numbers is fairly
simple, spinboxes can simplify making minor adjustments. A spinbox is a
control with arrows that increment or decrement the value in the box. Let’s
use the spinbox for the project’s Estimated Hours field. In addition to the
easier data entry it provides, using this field clearly describes the type of data
the field holds.html5_forms/index.html
<labelfor="estimated_hours">EstimatedHours</label>
<inputtype="number"name="estimated_hours"
min="0"max="1000"
id="estimated_hours">Chrome, Safari, and Opera support the spinbox control, which looks like this:
The spinbox also lets people type in the value instead of using the arrows.
And like with range sliders, we can set minimum and maximum values.
However, those minimum and maximum ranges won’t be applied to any value
the user types into the field, so you’ll need to restrict that with scripting or
with HTML5’s validation support, which we’ll explore in Tip 8, Validating User
Input without JavaScript, on page 54.We can control the size of the increment step by giving a value to the step
parameter. It defaults to 1 but can be any numerical value.Dates
We need to record the start date of the project, and we want to make that as
easy as possible. The date input type is a perfect fit here.html5_forms/index.html
<labelfor="start_date">Startdate</label>
<inputtype="date"name="start_date"id="start_date"
value="2013-12-01">report erratum • discussDescribing Data with New Input Fields • 41
Download from Wow! eBook <www.wowebook.com>