Access and secure data - Programming in HTML5 with JavaScript and CSS3 - page 203

the value attribute, the range defaults to the minimum value. This HTML displays the output
shown in Figure 3-10.
FIGURE 3-10 A range input element added to the HTML form
In this output, the range control is displayed as a slider bar. The bar defaults to the value of
20 as specified in the markup. Users can grab the black endpoint of the slider and change the
value lower or higher by dragging it left or right. As a user changes the value, a tooltip shows
the current value where the slider resides. In this case, the user is now at the value 17 (see
Figure 3-11).
FIGURE 3-11 The tooltip displaying the current value of the range as the user changes it.
After users enter all the needed information, they need a way to submit or save the
information. The submit button has already been previewed.
Using the button input type
The input type that allows users to submit the form or clear it is button . The button input isn't
new to HTML5 but is an essential piece to the data-capture puzzle. Buttons are what tell the
website when a user finishes doing something and that they want to perform an action. The
<input> element supports three types of button controls: submit , reset , and button .