Home  >  Html5

Example of Form Validation with HTML5

March 30, 2014
HTML5 has made form validation easy. There are input fields like email, URL, number or telephone numbers which is explicitly validated. HTML5 allows some input types and just use it and our form field will be validated. Before HTML5, we achieve it using java script, now to validate fields, we need not do coding in JS or jQuery. I checked all below examples on Opera version 12.12

"email" Input Type in HTML5

In user form, to take the user email we need to validate to check if email format is correct like @ is there are not. To achieve it just use email input type and we are done.
<!DOCTYPE html>
<html>
<body>
<h4>email Demo in HTML5</h4>
<form action="">
  E-mail: <input type="email" name="uemail">
  <input type="submit">
</form>
</body>
</html>
 

Test now. Try to enter wrong format of email then you will not be able to submit the form.



"url" Input Type in HTML5

HTML5 provides url input type using which the field will be validated for the URL. If user inputs wrong URL format, then the form will not be submitted. To achieve this validation, we need to use input type url.
<!DOCTYPE html>
<html>
<body>
<h4>url Demo in HTML5</h4>
<form action="">
  URL: <input type="url" name="urlvalidation">
  <input type="submit">
</form>
</body>
</html>
 

Test now. Try to enter wrong format of URL then you will not be able to submit the form.

"number" Input Type in HTML5

To input number from a user within a range, use number input type. Suppose if form needs validation to enter value between 5 to 10, then HTML5 supports very easy way to do it. Define number input type and use min and max attribute and you are done.
<!DOCTYPE html>
<html>
<body>
<h4>number Demo in HTML5</h4>
<form action="">
  Enter Number Between 5 to 10: <input type="number" min="5" max="10" name="num">
  <input type="submit">
</form>
</body>
</html>
 

Test now. Try to enter value less than min or more than max, you will not be able to submit the form.

"tel" Input Type in HTML5

HTML5 provides tel input type to validate telephone number. Just use tel input type and you are done.
<!DOCTYPE html>
<html>
<body>
<h4>tel Demo in HTML5</h4>
<form action="">
  Telephone Number: <input type="tel" name="telephone">
  <input type="submit">
</form>
</body>
</html>
 

Test now
FIND MORE TUTORILAS






©2019 concretepage.com | Privacy Policy | Contact Us