PUBLISHED ON: JULY 23, 2021
How to create an input field which takes the only email as its value?
Email addresses are most frequently added in the textual forms on the web. Nowadays we see these email forms almost on every website you visit. The email has some predefined format. An email cannot be only simple text. So, it is necessary that the input field takes only the email value rather than anything else.
Email Type attribute
The type attribute is used within <input> tag to specify the input value type. The type="email" is used to enter only the email address in the input field. The input value will be validated whether the email entered is properly formatted or not. The syntax used for email must be in the form of username@domain.
Example: Adding some invalid values for email
Here we will take an example where we will randomly enter text which does not match the format of an email.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>Invalid email address</h2>
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
</body>
</html>
Output:
In the output, we can see that there is some popup box instructing to add valid format.
Example: Adding valid format of the email
Here we have taken an example where we will add some valid format of the email.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>valid email address</h2>
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
</body>
</html>
Output
Here in the output, we can see that the email entered is the correct format. So it accepts the input value.
Example: Multiple email addresses in the input field
We can also add multiple email addresses to the input field. Add multiple attributes to the <input> to allow multiple email addresses separated by commas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h2>Multiple email address</h2>
<form>
<label for="email">Enter your email:</label>
<input type="email " multiple id="email" name="email">
<input type="submit">
</form>
</body>
</html>
Output:
Here is the output of the above program where we have added multiple email addresses.
Conclusion
So the type="email" automatically validates whether the given email is a valid format or not. But it does not specify whether the email address really exists or not. The input field can also be added with multiple email addresses.
