How to add a telephone number into a form using HTML5 ?
Last Updated :
30 Jan, 2024
In this article, we will learn how to insert the telephone number of the user into an HTML Form. We know that phone numbers have so many advantages A Telephone number field is an important component of the form. in case of contact directly with the user. A user can also get various messages or notifications regarding the services of the form. Â
Syntax:
<input type=" tel ">
Approach:
Here is the basic simple approach to complete the task. The steps are given below
- Create an HTML document that contains an <input> tag.
- Use the type attribute with the <input> tag which is set to value “tel”.
Example 1:Â In this example, we will see how to add a telephone number into a form using HTML5.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
How to add a Telephone number
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" >GeeksForGeeks</ h1 >
< h2 >
How to add a Telephone number
into a Form using HTML5
</ h2 >
< form >
Name:
< input type = "text"
placeholder = "Enter your name here--" />
< br />
Address:
< input type = "text"
placeholder = "Enter your permanent Address" />
< br />
Phone No.:
< input type = "tel"
placeholder = "Enter phone number" />
< br />
< br />
< button >Submit</ button >
</ form >
</ body >
</ html >
|
Output:
Example 2:Â In this example, we will see how to add a telephone number into a form using HTML5 with another example.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
How to add a Telephone number
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" >
GeeksForGeeks
</ h1 >
< h2 >
How to add a Telephone number
into a Form using HTML5
</ h2 >
< form >
Phone No.:
< input type = "tel"
placeholder = "Enter phone number" />
< br />
< br />
< button >Get OTP</ button >
</ form >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...