Before the advent of HTML5, handling emails addresses required more work to validate the email addresses using Javascript. Well all that is now not necessary with the new HTML5 input type email.
The email input element has been specifically designed to handle and validate email addresses. Depending on the browser, it will alert the user that the entered information is not correct and the form will not submit until the user makes corrections.
Sample Code:
<label for="email_input">Enter your email address:</label>
<input type="email" name="email" id="email_input" placeholder="Your Email">
General Usage
Save the following code in a text document and open it with a web browser.
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding-top: 200px;
padding-left: 300px
}
</style>
</head>
<body>
<p>Please Provide Your Current E-Mail Address
<form>
<input type="email">
</form>
</body>
This is how the page should look like:
If you want to collect several addresses at once, you can add the multiple attribute:
<input type="email" multiple>
The user can now enter one or more addresses separated by a comma.
Validation
Browsers that support the input type email provide validation support in different ways. However, all browsers use a common validation algorithm following this pattern:
the minimum requirements are the @ and . symbols and a lack of spaces between the characters. Please note that it’s not possible to verify if the address provided is in existence. This is an issue to be handled by your server side script. A good way to test for valid email addresses is to send a link to the email address that when clicked, confirms that email is valid.
Mozilla Firefox
As soon as the user completes typing and moves to another element, Firefox will check the data entered. If its not a valid email address, the input will appear with a red border as shown below:
If the user proceeds to click the submit button without changing the email provided, the form will not submit and a tooltip will appear showing the error message on the input.
Google Chrome
Google chrome does not provide any visual support when the user enters invalid data.
However , on submission, an error message appears with a tooltip providing a clue to what the user should provide.
If you want to provide a custom error message to the user, yon can use the title attribute:
<input type="email" title="Please Provide A Valid Email Address !">
Browser Support
The email input type is widely supported in all modern browsers. Check the table below for the minimum version supported. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
For browser support details, see: Can I Use email input type
Generally, if the browser version in use does not support this input type, an input type text will be shown instead. When you’re handling data submitted on the server side, be sure to validate the data yourself before accepting it.
On Android and IOS platforms, the keyboard will automatically include the @ and . keys whenever the input type is email.
Why Use This New Input Type
- The input type email makes web development easier since the validation work is done by the browser. If the required attribute has been specified, the browser will not accept the form to be submitted.
- You can choose to style all input type email in you website in a specific style so that they appear in a standard style across the board.
- Mobile devices can customize the soft keyboard to match the email input (with the @ and . easily accessible
Applied CSS
In order to apply certain style only to email input fields, use the attribute selector like this:
input[type="email"]
{
background-color:#ccc;
}