HTML5 Form

Are you using HTML5 forms?

Today I want to cover the fundamentals of HTML5 Forms. In a later tutorial, we will cover a more advanced form with custom error handling. HTML5 makes it easy to add error handling right into your form without the use of a lot of code. We will cover many of the new features HTML5 offers.

HTML5 has new attributes added to the input element which include the following:

  • autocomplete
  • autofocus
  • disabled
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height
  • list
  • max
  • maxlength
  • min
  • multiple
  • pattern
  • placeholder
  • required
  • step

The Markup

Let us go over the required and autofocus attributes. The required attribute is used to specify that the input must be filled in before submitting the form. The required attribute is supported in Chrome, Firefox, Internet Explorer 10, and Opera. Unfortunately it is not supported in Safari.

When we use the autofocus attribute, the input element is automatically selected upon page load. The best part is that there is no need for javascript. The autofocus attribute is supported in Chrome, Firefox, Opera, Safari, and Internet Explorer 10.

Okay, now for the pattern attribute. The pattern attribute specifies a regular expression that the input element’s value is compared to. The great thing about the pattern attribute is there is no need for javascript or php to compare a regular expression string to the inputed value. Supported in Chrome, Firefox, Opera, Safari, and Internet Explorer 10.

Note: The pattern attribute works with the following input types: text, search, url, tel, email, and password.

The oninvalid global event attribute runs a script when an element is invalid and applies to almost all HTML5 elements.

Here is a HTML5 sample form:


Add some style to our form.

Thank you for reading and please leave a comment below.



Tagged with:

View all contributions by


Related Articles


Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">