New Form Attributes and Functions - PART 2

The min and max Attributes

As seen before in our example for <input type="range">, the min and max attributes allow a numerical input to be constrained to minimum and maximum values. One, both, or neither of these attributes can be provided as necessary, and the input control should adjust accordingly to increase or decrease the range of acceptable values. For example, to create a range control representing a level of confidence in ability from zero% to 100%, the following code could be used as follows:

<input id="confidence" name="level" type="range" min="0" max="100" value="0">

This would create a range control with a minimum zero value and maximum of 100, which, coincidentally, are the default values for the same.

The step Attribute

Also, for input types which expect numerical values, the step attribute specifies the granularity of increments or decrements in value as the range is adjusted. For example, our confidence level range control listed above can be set up with a step attribute of five as follows:

<input id="confidence" name="level" type="range" min="0" max="100" step="5" value="0">

This would limit the acceptable values to be increments of five from the starting value. In other words, only 0, 5, 10, 15 … 100 would be allowed either through typed input or through a slider control, depending on the browser representation of the input.

The default step value is dependent on the type of control to which it is applied. For a range input, the default step is one. To accompany the step attribute, HTML5 introduces two functions on the input element that allow the value to be controlled: stepUp and stepDown. As you might expect, these functions increment or decrement the current value, respectively. As you might also expect, the amount by which the value is increased or decreased is the value of the step. As such, the value of a numeric input control can be tweaked without direct input from the user.

The value As Number Function

document.getElementById("confidence").valueAsNumber(65);

The required Attribute

If any input control has the required attribute set, then a value must be set on it before its form can be submitted.

<input type="text" id="firstname" name="first" required>