How to use email input type in HTML?
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
