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+

HTML DOM Input Tel Object

Explore