How to Add a Telephone Number into a form using HTML?

Last Updated : 26 Jul, 2024

In this article, we will learn how to add a telephone number field to an HTML form. Telephone numbers have numerous advantages and are an important component of contact forms, allowing for direct communication with the user. Users can receive messages or notifications regarding the services provided through 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 HTML.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to add a Telephone number
        into a Form using HTML?
    </title>
</head>

<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <h2>
        How to add a Telephone number
        into a Form using HTML?
    </h2>

    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" 
            placeholder="Enter Name..." />
        <br><br>

        <label for="address">Address:</label>
        <input type="text" id="address" 
            placeholder="Enter Permanent Address..." />
        <br><br>

        <label for="phone">Phone No.:</label>
        <input type="tel" id="phone" 
            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>
</head>

<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <h2>
        How to add a Telephone number
        into a Form using HTML?
    </h2>

    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" 
            placeholder="Enter Name..." required/>
        <br><br>

        <label for="phone">Phone No.:</label>
        <input type="tel" id="phone" 
            placeholder="123-456-7890" 
            pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
            required />
        <br><br>

        <button>Submit</button>
    </form>
</body>

</html>

Output

How to define a form for user input using HTML5 ?

manaschhabra2

Improve

Article Tags :

How to Add a Telephone Number into a form using HTML?

Syntax

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?