HTML5 Data and Services Cookbook

Validating numbers by range

When it comes down to numbers in forms, the basic validation is to check if the number is in a given range. For achieving this, there are the min and max attributes that should be applied to input types number, range, and date/time related inputs.

How to do it...

We will create a form containing a few input elements that need to have a range restriction, as follows:

1. First of all, we will start by creating the form with a number input field for age, limiting it to minimum of 18, as given in the following code snippet:

   <form>
     <div>
       <label>
         Age <input id="age" type="number" name="name" min="18" max="140" />
       </label>
     </div>

2. We will add the range input for the Bet value the user would place as follows:

    <div> <label> Bet <input ...