How to Validate Email Addresses With HTML5

Fountain pen ticking box on page, close-up

Chemistry/Getty Images

What could be easier than setting up an HTML form that captures email addresses, say for a newsletter or notifications? Mistyping an email address in that form, of course, and then have your browser remember that incorrect address for all the signup forms to come.

If you want to validate email addresses entered into your form but avoid complicated tinkering and scripts, HTML5 lets you rely on the browser — without effort, and without turning to JavaScript.

Validate Email Addresses With HTML5

To have users' browsers validate email addresses as they enter them in your HTML web form:

  • Make sure you use HTML5.
  • Specify the email address form input element as type "email". (See below for an example.)

Browsers that do not recognize type="email" should (and, as far as one can tell, all will) treat the input field like an ordinary type="text" field.

HTML5 Email Address Validation Caveats

Note that HTML email address validation will only work in browsers that support HTML5 and validate form element input. For other browsers and backup, you can still validate email addresses using PHP, for example.

Browsers that support HTML5 email address validation include Safari 5+, Google Chrome 6+, Mozilla Firefox 4+ and Opera 10+. Safari 5 and Google Chrome 6-8 will not accept invalid email address input but, unlike the other browsers, will not help the user correct the error.