HTML5 Email Input Pattern Attribute

Question

I’m trying to make a html5 form that contains one email input, one check box input, and one submit input. I\'m trying to use the pattern attribute for the email input but I

Answer 1

You probably want something like this. Notice the attributes:

• required
• type=email
• autofocus
• pattern

<input type="email" value="" name="EMAIL" id="EMAIL" placeholder="your@email.com" autofocus required pattern="[^ @]*@[^ @]*" />

Answer 2

I have tested the following regex which gives the same result as Chrome Html email input validation.

[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*

You can test it out on this website: regex101

Answer 3

<input type="email" name="email" id="email" value="" placeholder="Email" required />

documentation http://www.w3.org/TR/html-markup/input.email.html

Answer 4

In HTML5 you can use the new 'email' type: http://www.w3.org/TR/html-markup/input.email.html

For example:

<input type="email" id="email" />

If the browser implements HTML5 it will make sure that the user has entered a valid email address in the field. Note that if the browser doesn't implement HTML5, it will be treated like a 'text' type, ie:

<input type="text" id="email" />

Answer 5

I had this exact problem with HTML5s email input, using Alwin Keslers answer above I added the regex to the HTML5 email input so the user must have .something at the end.

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />