How to create tel input in html

HtmlHow-ToBeginner · 3 min read

How to Create a Tel Input in HTML: Simple Guide

To create a telephone input in HTML, use the <input type="tel"> element. This input type allows users to enter phone numbers and can trigger a numeric keypad on mobile devices.

📐

Syntax

The basic syntax for a telephone input in HTML is using the input element with the type attribute set to tel. You can also add attributes like name, id, and placeholder to improve usability.

type="tel": Specifies the input is for telephone numbers.
name: Identifies the input for form submission.
id: Links the input to a label for accessibility.
placeholder: Shows example text inside the input.

html

<input type="tel" name="phone" id="phone" placeholder="Enter your phone number">

Output

A single input box labeled for phone number entry with placeholder text 'Enter your phone number'.

💻

Example

This example shows a complete form with a telephone input field and a label. The input uses type="tel" so mobile devices show a numeric keypad. The placeholder guides the user on what to enter.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Telephone Input Example</title>
</head>
<body>
  <form>
    <label for="phone">Phone Number:</label><br>
    <input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
    <br><br>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A form with a labeled phone number input box showing placeholder '123-456-7890' and a submit button.

⚠️

Common Pitfalls

Common mistakes when creating a telephone input include:

Not using type="tel", which can cause mobile devices to show a full keyboard instead of a numeric keypad.
Not adding a pattern attribute to guide valid phone number formats.
Missing label elements, which hurts accessibility.
Assuming type="tel" validates the phone number format automatically—it does not.

Always combine type="tel" with proper labels and optional pattern validation for best results.

html

<!-- Wrong: no type or label -->
<input name="phone" placeholder="Phone">

<!-- Right: type tel with label and pattern -->
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

📊

Quick Reference

Attribute	Description	Example
type	Defines input type as telephone	type="tel"
name	Name for form data	name="phone"
id	ID for label association	id="phone"
placeholder	Example text inside input	placeholder="123-456-7890"
pattern	Regex to validate input format	pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required	Makes input mandatory	required

✅

Key Takeaways

Use to create a phone number input that triggers numeric keyboards on mobile.

Always pair the input with a for better accessibility.

Add a placeholder to guide users on the expected phone number format.

Use the pattern attribute to help validate the phone number format if needed.

Remember that type="tel" does not validate input by itself; validation must be handled separately.