How to Use Html5 Input Type Email

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:

General Usage

Save the following code in a text document and open it with a web browser.

This is how the page should look like:Html5 Input Type Email

If you want to collect several addresses at once, you can add the multiple attribute:

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:

name@subdomain.dom

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:Html5 Input Type Email

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.Html5 Input Type Email

Google Chrome

Google chrome does not provide any visual support when the user enters invalid data.Html5 Input Type Email

However , on submission, an error message appears with a tooltip providing a clue to what the user should provide.Html5 Input Type Email

If you want to provide a custom error message to the user, yon can use the title attribute:

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:

Demo

22934

0 comments… add one

Leave a Comment