HTML Input Type Email

An email textbox in HTML is the single line input field of the form. It requires an email address as the value for the textbox to enter. The input box automatically validates the email address as the value for this field.

This does not require any script to validate the email address. It is a simple method to get only the email address as the user input data.

Email Textbox in HTML Using <input type=”email”>

The email textbox is useful when you want to get only the email address of the user. You can use the below-given syntax to create your email input textbox.

Syntax
<input type=”email”>

The above syntax shows the value of the type attribute is email. You can also add some other useful attributes to this input field which you will learn further in this post.

Now, let’s see an example that helps you to understand the way of creating the input field.

Example

Test it Live

Output




It looks like a simple textbox that required some value to enter. You can identify the input box using the attributes given above. The attribute also added to the above input box to give the name of this field.

Email Textbox in HTML to Create Input Type Email

How to Add Placeholder For <input type=”email”>

If you want to add a hint to the input box to get only the required user input data. You have to add a placeholder attribute to the <input type=”email”> which required a text as value. It displays a light color text as a hint for the users to input the same type of value.

See the example below to add a placeholder for the input box.

Test it Live

Output



The above example shows the input box with the hint to get only the email as the required value. You have to just click the above input box and the hint disappear immediately on click.

Make Email Textbox Required in HTML

When you use the email text field in the HTML form to get the user input data. You have to make the field required to confirm that you do not get the blank data on form submission.

To make the email field required, you have to use the attribute to the <input type=”email”>. It confirms and does not allow a user to submit the form without filling the required email field in HTML. For more demo, see the example and the live demo given below in the example.

Test it Live

Output



The above example shows the required input box to get an email as the required value. If the user left it blank, it asks the user to enter some value to the input box as you have added required attribute.

Also, if the user enters a value other than email, it asks the user to enter only the email as the value. So, the best option for the developer to create an email only input box in HTML without using any other coding.

Some Useful Attributes of Email Textbox

Below are the useful attributes you can use with the textbox. It details credit goes to the Mozilla doc library.

Attribute Name Description
maxlength
  • Specify the maximum length for the email input box.
  • You can enter a numeric value for the attribute.
minlength
  • The minimum number of text content for the input is given by using this attribute.
  • Put a numeric value for this attribute.
readonly
  • Make the input box read-only and disabled it for the users to enter any value.
  • Place readonly as the value for the attribute.
size
  • Define the size which decides the width for the input box.
  • Enter a numeric value to this attribute
value
  • A default value can be given by using this attribute which displays in the textbox.
  • Use text as well as numbers as the value.
pattern
  • You can define the valid pattern for the input box using this attribute.
  • A regular expression is a value for the attribute.

References