Email Inputs

Posted on Fri, May 10, 2013 in User Interface, Web Design, by Kevin Carpenter

When we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. This makes us that much closer to built-in form validation and we don’t have to write JavaScript validators. We can’t 100% rely on this just yet, for browser support reasons. In older browsers that do not comply with the “email” type, they’ll simply fall back to a regular textbox. Please note that all current browsers are a bit picky when it comes to which elements and attributes they do and do not support. For example, Opera supports email validation, so as long the name attribute is specified. However, it does not support the placeholder attribute. Because of this it is a good idea to not completely depend on this form of validation just yet, but you should still feel free to use it as an additive feature.


<form method="get">
label for="email">Email:</label>
input id="email" name="email" type="email" />
buttonSubmit Form </button>

Try the demo below. It should give you an “error” message if you try to enter something that does not follow that of a typical email address format.


Tell Us About Your Project

Invalid phone number