<input type=tel> în HTML

<input type="tel" name="telefon" autocomplete="tel">

Ce face <input type=tel>

<input type="tel"> este un câmp de text destinat numerelor de telefon. Pe telefon deschide tastatura numerică de apelare, cu cifre mari și semnul +, ceea ce face completarea mult mai rapidă.

Spre deosebire de email sau url, browserul nu verifică formatul, pentru că numerele de telefon arată diferit de la o țară la alta. Dacă vrei un anumit format, adaugă pattern. Valoarea rămâne text, deci zerourile de la început și semnul + se păstrează.

Cu autocomplete="tel", browserul poate propune numărul salvat al utilizatorului.

Atribute

Atribut	Descriere
pattern	Formatul acceptat, de exemplu un număr mobil românesc.
placeholder	Un exemplu de număr, ca utilizatorul să vadă formatul așteptat.
minlength / maxlength	Numărul minim și maxim de caractere.
autocomplete	tel pentru numărul complet.
required	Câmpul nu poate rămâne gol.

Exemple

Exemplul 1: Telefon mobil românesc

Expresia acceptă 07xxxxxxxx sau +407xxxxxxxx, fără spații.

<label for="telefon">Telefon pentru curier</label>
<input type="tel" id="telefon" name="telefon"
       pattern="(\+40|0)7[0-9]{8}"
       placeholder="0722123456"
       title="Număr de mobil: 07xxxxxxxx sau +407xxxxxxxx"
       autocomplete="tel" required>

Ce afișează browserul

Pe telefon se deschide tastatura numerică.
„0722123456” și „+40722123456” sunt acceptate; „0232 123 456” este respins cu mesajul din title.

Exemplul 2: Telefon fără format impus

Fără pattern, orice text este acceptat; util pentru clienți din mai multe țări.

<label for="contact">Telefon (opțional)</label>
<input type="tel" id="contact" name="contact" placeholder="+40 232 123 456">

Ce afișează browserul

Câmp opțional; „+40 232 123 456” și „0049 30 1234567” sunt acceptate la fel.

Greșeli frecvente

• Așteptarea ca browserul să verifice numărul: fără pattern, câmpul acceptă orice text.
• Folosirea lui type="number" pentru telefon: zeroul de la început și semnul + se pierd, iar săgețile de mărire nu au sens.
• Un pattern prea strict pentru site-uri cu clienți din alte țări: respinge numere reale.

Comenzi înrudite

• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <input type=number>: Câmpul pentru valori numerice, cu limite min și max, pas de creștere și butoane de mărire și micșorare.
• Atributul autocomplete: Atributul care spune browserului ce date să completeze automat într-un câmp: nume, email, adresă, parolă sau codul primit prin SMS.
• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.