HTML5 Email Input Type

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" >

Browser Support

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.

Output

When the execution process is completed successfully we will get the following output :

HTML5 Email Input Type

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*