Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 26 Aug, 2021

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 the 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.  

Approach: Here is the basic simple approach to complete the task. 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”.

Syntax

<input type="tel">  

Example 1: 

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:

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!