email input field contains email address. The email address will be automatically validated when submitted. Email has @ and ending with .com or .net, website has at least one dot in the middle and most of them ending with .com. The email input type is no different than text input type and allows to enter e-mail address. It uses required attribute to ensure valid e-mail address which has been entered by user.
Syntax of email Input Type
<input type="email" name="some-name" required="required" >
It is supported by all the browsers such as Mozilla Firefox, Internet Explorer, Opera, Google Chrome, Safari etc. But the browsers which don’t support email will treat as plain text field.
HTML5 Email Input Type Example
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Email Input Type</title> </head> <body> <form> <input type="email" name ="email" placeholder="enter your mail" required="required"> <input type="Submit" value="submit"> </form> </body> </html>
As shown in above program, we are using input type email to check whether user has entered valid email address or not. The placeholderattribute specifies a short hint which describes value of the input field. The required attribute specifies an input field must be filled out before submitting the form.
Example Application Test
- Save the file as email_example.html in your system..
- Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
When the execution process is completed successfully we will get the following output :