Skip to main content

HTML input type="tel"

The HTML input type="tel" is used to allow users to enter a telephone number into a form field on a web page. It is generally used in cases where the user needs to provide their phone number in order to receive an SMS message or be contacted.

This type of input field is usually accompanied by a validation pattern or a mask, which ensures that the user enters a valid phone number. It also supports international numbers, allowing users to enter phone numbers from different countries. This type of input is not automatically validated to a specific format before the form can be submitted, since telephone number formats vary greatly across different countries and regions.

<label for="user-phone">Phone:</label>
<input type="tel" id="user-phone" name="user-phone">
<label for="user-phone">Phone:</label>
<input type="tel" id="user-phone" name="user-phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
Format: 000-000-0000

This input type is becoming increasingly popular due to its convenience and ability to accurately collect contact information.

The <input type="tel"> element can be used in a variety of ways. For example, it could be used to capture a user's phone number when submitting a contact form, or to allow a user to enter their phone number when signing up for a service. It can also be used to allow a user to enter their phone number when making a purchase.

When using the <input type="tel"> element, it is important to consider the various formats that users may enter their phone numbers in. For example, some users may enter their number with dashes or parentheses, while others may enter it without any punctuation. It is also important to consider international numbers, as users may enter their numbers in a variety of formats. To ensure that the input is captured correctly, it is best to use a validation tool to ensure that the number is in the correct format.