How to use email input type in HTML?-HTML Tutorial-php.cn

How to use email input type in HTML?

WBOY

Release： 2023-09-05 13:52:30

forward

887 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!