HTML5 new form Input text fields


HTML5 Input Types

HTML5 added several new input types:

  • number
  • range
  • email
  • url
  • color
  • date
  • datetime
  • datetime-local
  • month
  • search
  • tel
  • time
  • week

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" />
html5 number and range

html5 number and range

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

This input text type will allow only properly-formatted URLs and it’s behaviour can be improved using the pattern attribute which accepts a JavaScript regular expression.

<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.

url validation in html 5

url validation in html 5

Leave a Reply

Your email address will not be published. Required fields are marked *