Adding a Tel Field to a Form

The tel type represents a one-line plain-text edit control for entering a telephone number. You can use the <input type=”tel”> tag to provide a telephone number in the field. In HTML 5, you can also add the pattern attribute, which is used to write a regular expression such as defining a format for telephone number, in the input field.

Let’s do the following steps to enter the telephone number using tel field.


<!DOTYPE html>
<head>
    <title>Adding a Telephone Number</title>
</head>
<body>
<center>
    <h2>Example of Telephone Number</h2>
    <form>
        <div>
            <lable>Telephone:
                <input type=”tel” pattern=”[0-9]{10}” name=”tel” title=”Phone Number ?!?!” />
            </lable>        
        <input type=”submit” value=”Submit” />
    </form>
</center>
</body>
</html>

Save the document with the name AddingTelephoneNumber.html and open on browser.

In case you enter any text or greater than 10 it generates an error.