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: