Open In App

How to add a telephone number into a form using HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 30 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads