HTML5 introduced several new input types. On the important types is email input type.
<input
type=“email”>
HTML5 Email Input type creates a form element on the Web page that allows for native validation of email addresses. It checks for @ sign as well as proper dots placed in the email address provided by the user. However, email input type behaves differently depending on the browser you are using to render your form. Validation is different in Opera for instance. Opera browser only validates for the presence of the @ sign and does not check for dots in the email. On the other hand, Chrome, FireFox check for both @ sign and dot. In addition, Opera displays email input box slightly different by appending an email icon in front of it. This does not happen if you view same input tag in FireFox or Chrome.
HTML5 email input tag or form element has several attributes which you can use to modify behavior of the email input tag.
- name – name of the email input field
- disable – makes your email input field disabled
- type – identifies type of the email input field
- form – form container
- autocomplete – captures value stored by the user
- autofocus – sets focus to the email input field upon load
- maxlength – specifies maximum length user can enter into email input field
- list – identifies if element is disabled
- pattern – uses regular expression for value checking
- readonly – sets control to read only field
- required – sets email input field to me mandatory
- size – size of the email input field
- placeholder – text displayed in the email field by default
- multiple – allows you to provide multiple emails
- value – contains email(s)
There are several browsers and mobile devices that recognize this element and optimized to act properly after email input element is loaded as part of the form.