HTML DOM Input Tel placeholder Property

Last Updated : 29 Aug, 2022

The input tel placeholder property in HTML DOM is used to set or return the value of the placeholder attribute of an input tel field. The placeholder attribute specifies the short hint that describes the expected value of an input field. The short hint is displayed in the field before the user enters a value.

Syntax:

It returns the input tel placeholder property.

telObject.placeholder

It is used to set the Input tel placeholder property.

telObject.placeholder = text

Property Value: It contains single value text which is used to define a short hint that describes an expected value of the tel field.

Return Value: It returns a string value that represents a short hint that describes the expected value of the tel field.

Example 1: This example illustrates how to return the input tel placeholder property.

HTML

<!DOCTYPE html>
<html>
<body style="text-align:center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>DOM Input Tel placeholder property</h2>
    <form id="formID">
        <input type="tel" id="mytel"
            placeholder="Enter your PhoneNumber"
            autofocus />
    </form>
    <br /><br />
    <button onclick="btnclick()">
        Return!
    </button>
    <p id="paraID" style="font-size:20px;"></p>
 
    <script>
        function btnclick() {
            var x = document.getElementById("mytel").placeholder;
            document.getElementById("paraID").innerHTML = x;
        }
    </script>
</body>
</html>

Output:

Example 2: Below HTML code illustrates how to set the input tel placeholder property.

HTML

<!DOCTYPE html>
<html>
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>DOM Input Tel placeholder Property</h2>
    <form id="formID">
        <input type="tel" id="mytel"
            placeholder="Enter your PhoneNumber"
            autofocus />
    </form>
    <br /><br />
    <button onclick="btnclick()">
        Set!
    </button>
    <p id="paraID" style="font-size:20px;"></p>
 
    <script>
        function btnclick() {
            var x = document.getElementById("mytel")
                .placeholder = "Telephone number";
                 
            document.getElementById("paraID").innerHTML = x;
        }
    </script>
</body>
</html>