Home >Web Front-end >HTML Tutorial >How to use email input type in HTML?
How to use email input type in HTML?
- WBOYforward
- 2023-09-05 13:52:30937browse
Email is a tool on the Internet where we can send formal emails to others using email addresses. There are many email service providers like Yahoo, Gmail, Hotmail, etc. We need to register with these service providers in order to receive an email address of our choice. An email address consists of two parts - a username and a domain name. Usernames can consist of uppercase or lowercase letters, numbers, special characters, and periods. The maximum length of a username is 64 characters and the maximum length of a domain name is 253 characters. The username and domain name are always separated by the "@" symbol. We enter email IDs at many places and you must have observed that the web page always accepts valid addresses.
In the HTML form, we create a single-line input control of type "email". Once typemail is used, it automatically checks the validity of the email address. Validation of the email address is indeed very important, otherwise the user may also enter the wrong email address. While it doesn't check the entire email address, it only checks the @ and TLD extensions, which are the top-level domains.
Let’s understand how to use email in HTML.
Example
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In this program, if the user does not enter the correct email address format, it will display an error message.
We can also make our email control accept multiple email addresses. For example, when we compose an email, we can type multiple addresses in the To, Cc, and Bcc fields. So, if you also want to make such a control that allows multiple email addresses to be entered, then you can use the MULTIPLE property.
Example
Let’s look at an example to clarify this concept.
<html>
<body>
<form name="form1">
<table>
<tr>
<td>
<label for="to">To </label>
</td>
<td>
<input type="email" multiple>
</td>
</tr>
<tr>
<td>
<label for="cc">Cc </label>
</td>
<td>
<input type="email" multiple>
</td>
</tr>
<tr>
<td>
<label for="bcc">Bcc </label>
</td>
<td>
<input type="email" multiple>
</td>
</tr>
<tr>
<td></td><td>
<textarea rows="10" cols="50">
</textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
In the "To" or "Cc" or "Bcc" field, we can enter the email addresses of multiple recipients using commas (,)
Suppose on your website, you want to set a limit on the number of characters in an email address, then you can use the MINLENGTH and MAXLENGTH attributes in the tag. MINLENGTH will specify the minimum number of characters an email address can accept, while MAXLENGTH will limit the maximum number of characters in an email address.
Example
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" minlength="15" maxlength="25">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The input content cannot exceed the limit. Once the limit is exceeded, the cursor will stop inputting.
To set the default value of the email control, this means that the default email ID will appear in the email text field (using the VALUE property) instead of a blank text field. You can also make it a required field using the REQUIRED attribute.
Example
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" value="abc@gmail.com" required>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If left blank, an error will be displayed.
Suppose, in a website, the format in which email addresses can be entered needs to be displayed so that users can easily enter them in the correct format. For this purpose, placeholders can be created.
Example
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" placeholder="abc@gmail.com">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Finally, let’s discuss the pattern attribute, using which we can restrict the input to only email addresses of a specific domain. It will not accept email addresses from other domains.
Example
<html>
<body>
<form name="form1">
<label for="sub">Enter your e-mail id : </label>
<input type="email" pattern=".+@gmail\.com"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
According to this program, only gmail addresses are allowed.
The above is the detailed content of How to use email input type in HTML?. For more information, please follow other related articles on the PHP Chinese website!