Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 2: Form validation CHAPTER 7 329

Validating numbers and ranges

Use the <input type=”number”> and <input type=”range”> elements to accept numeric

values. Both of these elements accept min, max, and step parameter attributes. The step

attribute defaults to one if omitted. Consider the following <form> element that contains the

number and range inputs.

<form id="myForm">

Current Age:

<input type="number" name="age"

min="18" max="99" value="30"

required="required" /><br />

Rating:

<input type="range" name="rating"

min="1" max="7" value="4" /><br />

<button type="submit" name="submit">Submit</button>

</form>

Figure 7-9 shows the rendered page. The user must enter a value in the number input, but

the range input renders as a slider. If you don’t include the required attribute on the number

input, you can leave the field empty, but if you provide a value, it must be within the min and

max value attributes.

FIGURE 7-9 he rendered number and range inputsT

The range input renders differently on different browsers. In addition, Internet Explorer

displays a pop-up message as the slider is operated; other browsers currently don’t.

Quick check

■■Which control is used to create a slider?

Quick check answer

■■Use the <input type=”range”> element with the proper min, max, and value

attributes.