How to Insert Email Address into Form using HTML5 ?
In this article, we will learn how to add and get an email address of a user as data of the form by adding an email input field. As we know that an email_id is a vital component of user data. Email address is used for the verification of the user. It is also used to make contact with the submitters directly.
Approach: To complete this task, we have to follow the below steps-
- Create an HTML document that contains an <input> tag.
- Use the type attribute with the <input> element which is set to value “email”.
Syntax
<input type="email">
Example 1: In this example, we are creating a form containing email id (username) and password.
HTML
<!DOCTYPE html> < html > < head > < title > How to add an Email Address into a Form using HTML5? </ title > < style > #Geek_p { font-size: 30px; color: green; } h1, h2 { font-family: impact; } </ style > </ head > < body style = "text-align: center" > < h1 style = "color: green" >w3wiki</ h1 > < h2 > How to add an Email Address into a Form using HTML5 </ h2 > < form > User_id: < input type = "email" >> < br /> Address: < input type = "password" > < br /> < button >Log IN</ button > </ form > </ body > </ html > |
Output:
Example 2: In this example, we are creating an input field of type email.
HTML
<!DOCTYPE html> < html > < head > < title > How to add an Email Address into a Form using HTML5? </ title > < style > #Geek_p { font-size: 30px; color: green; } h1, h2 { font-family: impact; } </ style > </ head > < body style = "text-align: center" > < h1 style = "color: green" >w3wiki</ h1 > < h2 > How to add an Email Address into a Form using HTML5 </ h2 > < form > Email Address: < input type = "email" >> < br /> < br /> < button >submit</ button > </ form > </ body > </ html > |
Output: