How to create an input field for the telephone numbers?

Telephone numbers or mobile numbers are widely used data on websites. The product and e-commerce websites ask the user to enter the contact numbers for messaging them about products and offers. The HTML provides an input field for telephone numbers. But validating telephone numbers automatically before the form submission is not possible. It is because every country has its own pattern of a phone number. Here, we will learn to create an input field for a telephone number.

HTML <input> with type=tel

The input field can be used to enter a phone number. Add <input> tag with type="tel" to enter a phone number. The <input> field can be added with the pattern attribute to specify the sequence of phone numbers.

The input field with type tel is functionally similar to the input field with type text but it provides a custom keyboard to the mobile browsers.

Example: Create input field of type="tel"

Here is an example to create an input field for telephone numbers.

Attributes for input field of type="tel"

The attributes used for telephone numbers are:

• maxlength - The maximum number of characters( UTF-16 code units) the user can enter in the input field. It should be an integer value greater or equal to 0. Also, the max length should be greater than or equal to min length.
• minlength - The minimum number of characters( UTF-16 code units) the user can enter in the input field. The value of max length should be a non-negative integer with a value less than the max length value.
• pattern - A regular expression to be entered which can be validated.
• placeholder - A display value to the input field to hint out users.
• size - An integer value which specifies the size of the input field.

Example: Create an input field for a telephone number

Here, we have added the above attributes to the input field for telephone numbers.

Conclusion

Here we have created an input field for the telephone numbers. It can be used by the user to enter valid phone numbers. The sequence of the phone numbers can be defined using the pattern attribute. For mobile browsers, it supports a special type of keyboard to enter phone numbers.