Html5 Form Validation

HTML5 brings New Elements, new Attributes and New Form Controls for better, faster and smarter forms.

Using HTML5, we can create a form with inbuilt validation (i.e. no javascript required). Earlier, we were using JAVASCRIPT to control form validation. These form controls are meant for both Desktop, tablets and smartphones.

New Attributes in HTML5 Form

HTML5 Form includes some more attributes. Exp autofocus, placeholder, required, autocomplete, pattern, list etc.

Here are all html5 form elements with examples and use.


Autofocus

autofocus attribute focus that single particular input on page load. Can be used once on a webpage.


    <input type="text" autofocus >        
            

Placeholder

placeholder shows hint of value. It disappear on focus or keypress event.


    <input type="text" placeholder="Enter Name" >        
            

Autocomplete

autocomplete can show or hide browser cache on keyup. Default value off shows cache data on keyup. But autocomplete off can disable browser cache.

Values of autocomplete

  • off ( Default)
  • on
Autocomplete on
Autocomplete off

    <input type="text" placeholder="Enter Name" name="name" autocomplete="on" >        
    <input type="text" placeholder="Enter Name" name="name" autocomplete="off" >        
            

Required

required attribute add validation on form controls like inputs, textarea, radio controls, checkbox and select dropdown. With required, a blank control cant't submit value.

Required for textbox


    <input type="text" placeholder="Enter Name" required >        
            

required for checkbox


    <input type="checkbox" required >        
            

required for radio groups


    <input type="radio" name="gender" required > Male        
    <input type="radio" name="gender" required > Female        
            

required for select


	<select required>
		<option value="">--Choose City--</option>
		<option>New Delhi</option>
		<option>Chennai</option>
		<option>Mumbai</option>
		<option>Kolkata</option>
	</select>
            

pattern

Create javascript regular expression for input controls. Can be used to validate pincode, debit/credit card no, cvv no, atm pin etc.


    <input type="text" placeholder="Enter Pincode" required pattern="^[0-9]{6}$" title="Enter Valid Pin Code" >        
            

Minlength

Will submit a form only when this field is filled with minimum n characters.


    <input type="text" placeholder="Enter Name" required minlength="3" >        
            

Readonly

A control with readonly attribute is not editable by user.


    <input type="text" value="India" readonly >        
            

list

list attribute is used to link a datalist tag with input control. The value of datalist is shown as hint on keyup.


    <input type="text" value="India" list="citylist" required > 
    <datalist id="citylist">
        <option>New Delhi</option>
        <option>Chennai</option>
        <option>Kolkata</option>
        <option>Mumbai</option>
    </datalist>        
            


HTML5 Form New Input Types.

HTML5 also includes some new input types with validations. These types works on both Desktops based browsers and Mobile based browsers.


input type number

input type number is used to insert only numbers from user. For example age, number etc. min and max attributes are also used with input type number. step can increase step value, default step value is 1.

input type number can change keyboard layout on smartphones like android and iphone.

Enter Age
Choose an even no.

    <input type="number" placeholder="Enter Age" required  >        
    <input type="number" placeholder="Enter Even No" min="2" max="100" required step="2">        
            

Keyboard Layout on Android and IOS

input type number android
input type number keypad on android
( Samsung Galaxy Note 3)
input type number iphone
input type number keypad on IOS
( Iphone 6s)

input type email

input type email is used get email id from user.


    <input type="email" placeholder="Enter Email" required>  
            

Keyboard Layout on Android and IOS

input type number android
input type email keypad on android
( Samsung Galaxy Note 3)
input type email iphone
input type email keypad on IOS
( Iphone 6s)

input type tel

input type tel is used get insert a phone no ( Landline, mobile or virtual) only.


    <input type="tel" placeholder="Enter Phone No" required>  
            

Keyboard Layout on Android and IOS

input type tel android
input type tel keypad on android
( Samsung Galaxy Note 3)
input type tel ios
input type tel keypad on IOS
( Iphone 6s)

input type search

input type search for search box only.


    <input type="search" placeholder="Search Here" required>  
            

Keyboard Layout on Android and IOS

input type search android
input type search keypad on android
( Samsung Galaxy Note 3)
input type search ios
input type search keypad on IOS
( Iphone 6s)

input type url

input type url is used get insert a website url. A URL includes protocol( HTTP or HTTPS).


    <input type="url" placeholder="Enter Website" required>  
            

Keyboard Layout on Android and IOS

input type url android
input type url keypad on android
( Samsung Galaxy Note 3)
input type url ios
input type url keypad on IOS
( Iphone 6s)

input type date

input type date is used choose a valid date from user. Chrome, Edge, opera, android and ios also shows datepicker.


    <input type="date" required>  
            

Keyboard Layout on Android and IOS

input type date android
input type date keypad on android
( Samsung Galaxy Note 3)
input type date ios
input type date keypad on IOS
( Iphone 6s)

input type month

input type month is used choose a valid month from user. Chrome, Edge, opera, android and ios also shows datepicker.


    <input type="month"  required>  
            

Keyboard Layout on Android and IOS

input type month android
input type month keypad on android
( Samsung Galaxy Note 3)
input type month ios
input type month keypad on IOS
( Iphone 6s)

input type week

input type week is used choose a valid week number from user. Chrome, Edge, opera, android and ios also shows datepicker with week no.


    <input type="week"  required>  
            

Keyboard Layout on Android and IOS

input type week android
input type week keypad on android
( Samsung Galaxy Note 3)
input type week ios
input type week keypad on IOS
( Iphone 6s)

input type time

input type time is used choose a valid time from user in 12 hours format.


    <input type="time" required>  
            

Keyboard Layout on Android and IOS

input type time android
input type time keypad on android
( Samsung Galaxy Note 3)
input type time ios
input type time keypad on IOS
( Iphone 6s)

input type color

input type color is used choose a color from user. Chrome, androis and opera shows a color picker, but other browsers doesn't.


    <input type="color" >  
            

Keyboard Layout on Android and IOS

input type time android
input type color keypad on android
( Samsung Galaxy Note 3)
input type time ios
input type color keypad on IOS
( Iphone 6s)

input type range

input type range is used choose a range of numbers. min and max are used to specify range value.


    <input type="range" min="0" max="100" >  
    <input type="range" min="0" max="100" step="10" >  
            


HTML5 Form Elements.

HTML5 also includes some new form Elements like meter, progress and datalist.

Meter Tag

HTML5 Meter is used to show gauge. This meter will be green if value is greater than high, yellow if value is in between high and low, and red if value is less than low.

<meter min="0" max="100" low="40" high="80" optimum="100" value="90"> </meter>
<meter min="0" max="100" low="40" high="80" optimum="100" value="60"> </meter>
<meter min="0" max="100" low="40" high="80" optimum="100" value="30"> </meter>

Progress

Show progress of task complitition.

<progress > </progress>

<progress value="75" max="100"> </progress>

<progress value="50" max="100"> </progress>

Datalist

HTML5 Datalist is used to add datalist with input type text.


    <input type="text" list="list1">
    <datalist id="list1">
        <option value="html"
        <option value="css"
        <option value="javascript">
    </datalist>
IE 9 and below doesn't support html5 form elements, attributes, and new elements. Use JAVASCRIPT for form validation in IE9 and below, but within conditional comments.