Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use email input type in HTML?
Electronic-Mail is a facility available on Internet using which we can send formal emails to others by using their e-mail addresses. There are many email service providers like Yahoo, Gmail, Hotmail etc. We need to get registered with these service providers so that we can get an email address of our own choice. An e-mail address consists of two parts – user name and domain name. a user name can consist of upper or lower case letters, digits, special characters and dots. The maximum length of user name can be upto 64 characters and the domain name can have 253 characters. The user name and the domain name is always separated by “@” symbol. We enter our email id’s at so many places and you must have observed that the web page always accepts a valid address.
In HTML form, we create single line input control of type “email”. Once the type mail is used, it will automatically check the validity of an email address. Validation of email address is really very important otherwise users can also enter wrong email address. Although, it does not check the entire email address, it only checks for @ and TLD extension, that is top level domain.
Let us 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 doesn’t enter the proper format of email address, it will show the error message.
We can also make our email control to accept multiple email addresses. For example, when we compose an email, we can type multiple addresses in To, CC and BCc fields. So if you also want to make such a control which allows entry of multiple email addresses, then you can use MULTIPLE attribute.
Example
Let us see an example to clear the 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 To or Cc or Bcc fields, we can enter more than one recipient’s email address by using comma ( , )
Suppose in your websites, you want to put a limit on the number of characters that can be typed in email address, then use MINLENGTH and MAXLENGTH attributes in <input> tag. MINLENGTH will specify the minimum number of characters that anemail address can accept whereas MAXLENGTH will restrict the maximum no 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>
You cannot type beyond the limit, once the limit is crossed, it will stop the cursor from being typed.
To set the default value for email control, that means instead of blank textfield, the default email id will appear in the email textfield (using VALUE attribute). You can also make it a mandatory field by using 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 it is left blank, error will be displayed.
Suppose, in websites, there is a need of displaying the format in which an email address can be entered, so that the user can enter it in a correct format easily. To achieve this, placeholder 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>
At last, let us discuss pattern attribute using which we can impose a restriction on entering an email address of only a particular domain. It will not accept email address of 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>
So as per this program, only gmail addresses are allowed.
1K+ Views
