HTML5 Input Types
HTML5 added several new input types:
Input types, not supported by old web browsers, will behave as input type text.
The number and range text input type
These input text types will allow only integer numbers.The number and range input types also accept parameters for min, max and step. The step value will increment the number and range field and if step is not added it defaults to 1.
The number input field is typically displayed as a ‘roller’ and a range input field is displayed as a ‘slider’.
We can use a pattern of “\d+” (one or more numbers) to restrict the input of a text field to numbers without having the up/down arrows associated with the input box.
<input type="number" name="quantity" min="1" max="20" step="2" />
<input type="range" name="age" min="18" max="70" step="3" />
The email text input type
This input text type will allow only valid email addresses
<input type="email" name="email" required />
The url text input type
<input type="url" name="website" required pattern="https?://.+" />
The input box with above regular expression will only accept text starting with http:// or https:// and at least one additional character.