HTML5 Form

html5-form
Are you using HTML5 forms?
DemoDownload

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:

The CSS

Add some style to our form.

Thank you for reading and please leave a comment below.

Barrett

DemoDownload

Tagged with:

View all contributions by

Website: http://rrpowered.com

Related Articles

Advertisement

Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates

FEEDBACK0

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="">