1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Discuss in my forum

How to Validate Email Addresses with HTML5

By

Man using laptop in living room
Astronaut Images/Caiaimage/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:

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.

HTML5 Email Address Validation Example

To engage users' browsers to validate email addresses with HTML5, use the following code, for instance:

<!DOCTYPE html>
<html lang="en">

<head>
<title>&lt;input type=&quot;email&quot;&gt;</title>
</head>

<body>

<form>
  <input type="email" placeholder="me@example.com">
  <input type="submit">
</form>

</body>

</html>

©2014 About.com. All rights reserved.