Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a telephone number into a form using HTML5?
The task we are going to perform in this article is to add a telephone number into a form using HTML5. We are aware of the numerous benefits of using phone numbers. In case you need to collect a user's personal information, a telephone number is crucial. Additionally, a user may receive numerous messages or notifications on the form services.
Let's dive into the article for getting better understanding on adding a telephone number into a form using HTML5. This can be done by using the <input type="tel">.
Using <input> Tag
A phone number can be entered and edited using <input> elements of type 'tel'. The input value is not automatically checked to a specific format before the form can be submitted, unlike <input type="email"> and <input type="url">, because formats for telephone numbers vary so widely globally.
Syntax
Following is the syntax for <input type = "tel">.
<input type="tel">
Example
Let's look at the following example, where we are going to create a simple form and add an input field for telephone.
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#ABEBC6 ">
<form> FULLNAME: <input type="text" placeholder="Enter your Name" />
<br />
<br /> Mobile.No: <input type="tel" placeholder="Enter Mobile Number" />
<br />
<br />
<button>Submit</button>
</form>
</body>
</html>
On running the above code, the output window will pop up, displaying the input field for the user to enter their name and mobile number into the form, along with a click button on the webpage.
Example
In the following example, we are going to create a form for sign up, and including addition of phone number, and control the size by mentioning size="10".
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#CCCCFF ">
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="7">
<br>
<br> Phone.No: <input id="telNo" name="telNo" type="tel" size="10" />
<br>
<br>
<button>Sign Up</button>
</form>
</body>
</html>
When the above code gets executed, it will generate an output consisting of a form providing input fields to the user along with a click button on the webpage and a size="10" to control the input of the phone number.
Example
Following is an example where we are going to create a form by allowing the user to enter a mobile number and also using the min and max attributes.
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#D2B4DE">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="Lname">Lastname:</label>
<input type="text" id="Lname" name="Lname" minlength="7">
<br>
<br> Mobile.No: <input id="telNo" name="telNo" type="tel" size="26" minlength="10" maxlength="12" />
<br>
<br>
<button>Apply</button>
</form>
</body>
</html>
On running the above code, the output window will pop up, displaying the form on the webpage and allowing the user to enter data by providing input fields on the webpage.
Example
Consider the following example, where we are going to enter the mobile number in the form required and validate it.
<!DOCTYPE html>
<html>
<body style="text-align: center; background-color:#D5F5E3">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<div>
<label for="phno">Enter Mobile Number:</label>
<input id="phno" name="phno" type="tel" required />
<span class="validity"></span>
</div>
<div>
<button>Apply</button>
</div>
</form>
</body>
</html>
When the above code gets executed, it will generate an output consisting of a form along with an input field to enter a mobile number, which is required to be filled out before we submit the form, or else when the user tries to submit, it will pop a message.
337 Views
