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.
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
|
1 2 3 4 5 |
<form> <label>Enter Email</label> <input type="email" name="email" id="email"/> <input type="submit" name="submit" id="submit"/> </form> |
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.
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.
|
1 2 3 4 |
<form> <input type="email" name="email" id="email" placeholder="Enter Email"/> <input type="submit" name="submit" id="submit"/> </form> |
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.
|
1 2 3 4 |
<form method="post"> <input type="email" name="email" id="email" placeholder="Enter your email here" required/> <button type="submit" class="btn btn-primary">Submit</button> </form> |
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 |
|
| minlength |
|
| readonly |
|
| size |
|
| value |
|
| pattern |
|
References