HTML DOM Input Tel Object

The Input Tel Object in HTML DOM is used to represent an HTML input element with type= “tel”. The input element with type= “tel” can be accessed by using getElementById() method.

Syntax:

It is used to access input tel object.

document.getElementById("id");

It is used to create an input element

document.createElement("input");

Example 1: Below HTML code illustrates how to access the Input Tel Object.

HTML

<!DOCTYPE html>

<html>

<body style="text-align:center;">

    <h1 style="color:green;">

        GeeksForGeeks

    </h1>

    <h2>DOM Input Tel Object</h2>

    <input type="tel" id="mytel" value="6753682635">

<p>Click the button to get the

        phone number of the Input Tel field.</p>
 
    <button onclick="myFunction()">

        Click Here!

    </button>

    <p id="demo"></p>
 
    <script>

        function myFunction() {
 
            // Accessing input value

            var x =

                document.getElementById("mytel").value;

            document.getElementById(

                "demo").innerHTML = x;

        }

    </script>

</body>

</html>

Output:

Example 2: Below HTML code used to create the Input Tel Object.

HTML

<!DOCTYPE html>

<html>

<body style="text-align:center;">

    <h1 style="color:green;">

        GeeksForGeeks

    </h1>

    <h2>DOM Input Tel Object</h2>

<p>Click the button to create a input tel field.</p>
 
    <button onclick="myFunction()">Click Here!</button> <br>

    <br>

    <script>

        function myFunction() {
 
            // Creating input element.

            var x = document.createElement("INPUT");

            x.setAttribute("type", "tel");

            x.setAttribute("value", "8976353828");

            document.body.appendChild(x);

        }

    </script>

</body>

</html>

Output:

Supported Browsers:

Google Chrome 3+
Mozilla Firefox
Edge 12+
Safari 4+
Opera 11+

Article Tags :

HTML

Web Technologies

HTML-DOM