Email, telephone, and URL <input> types
The <input type="email">, <input type="tel">, and <input type="url"> HTML elements represent email address, telephone number, and URL fields in a form.
Overview
The <input type="email">, <input type="tel">, and <input type="url"> HTML elements represent email address, telephone number, and URL fields in a form.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 1 | 5 | 18 | 3 | |
| HTML attribute | ||||||
| input elements of type tel are used to let the user enter and edit a telephone number. Unlike and , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world. | 3 | 12 | 4 | 4 | 18 | 3 |
| input elements of type url are used to let the user enter and edit a URL. | 1 | 12 | 1 | 1 | 18 | 1 |
- Doesn't do validation, but instead offers a custom 'email' keyboard, which is designed to make entering email addresses easier.
- The custom 'email' keyboard does not provide a comma key, so users cannot enter multiple email addresses.
- Automatically applies a default style of `opacity: 0.4` to disable textual `<input>` elements, including those of type 'email'. Other major browsers don't currently share this particular default style.
- The field type doesn't demonstrate any special behavior.
- The field type doesn't demonstrate any special behavior.
Syntax
<label>Email: <input type="email" placeholder="user@example.com" required></label>
<label>Phone: <input type="tel" placeholder="090-1234-5678" pattern="[0-9-]+"></label>
<label>URL: <input type="url" placeholder="https://example.com"></label>Live demo
Email / Phone / Urlinput
dedicated. Inputtype in mobailki-bo-d. Optimization and valid-tion provide.
Use cases
Using Email, telephone, and URL <input> types
The <input type="email">, <input type="tel">, and <input type="url"> HTML elements represent email address, telephone number, and URL fields in a form.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
- MDN Web Docs - Email, telephone, and URL <input> types
- Can I use - Email, telephone, and URL <input> types
Powered by web-features