<input type=url> în HTML

<input type="url" name="site" placeholder="https://exemplu.ro">

Ce face <input type=url>

<input type="url"> acceptă doar adrese absolute, care încep cu un protocol (https://, http://, ftp:// etc.). La trimitere, o valoare ca www.exemplu.ro este respinsă, pentru că lipsește protocolul.

Pe telefon apare o tastatură cu tastele / și . la îndemână, uneori și un buton .com. Spațiile de la început și sfârșit sunt eliminate automat.

Validarea verifică doar forma adresei, nu și dacă site-ul există. Pentru a cere strict https, adaugă pattern="https://.*".

Atribute

Atribut	Descriere
pattern	Regulă suplimentară, de exemplu doar adrese https.
placeholder	Exemplu de adresă completă, cu protocol.
minlength / maxlength	Lungimea minimă și maximă a adresei.
list	Id-ul unui <datalist> cu adrese sugerate.
required	Câmpul nu poate rămâne gol.

Exemple

Exemplul 1: Site-ul personal într-un profil

Placeholder-ul arată formatul complet, ca utilizatorul să nu uite https://.

<label for="site">Site-ul tău</label>
<input type="url" id="site" name="site" placeholder="https://anapopescu.ro">

Ce afișează browserul

„https://anapopescu.ro” este acceptat.
„anapopescu.ro” este respins la trimitere cu un mesaj care cere o adresă URL.

Exemplul 2: Doar adrese securizate

pattern respinge adresele http://, deși au format valid.

<label for="webhook">Adresa webhook</label>
<input type="url" id="webhook" name="webhook" required
       pattern="https://.*" title="Adresa trebuie să înceapă cu https://">

Ce afișează browserul

„https://api.exemplu.ro/plata” este acceptată.
„http://api.exemplu.ro/plata” este respinsă cu mesajul din title.

Greșeli frecvente

• Placeholder fără protocol (www.site.ro): utilizatorul scrie la fel și primește eroare.
• Afișarea pe pagină a adresei primite fără verificare pe server: o adresă javascript: are format valid și poate fi periculoasă într-un link.

Comenzi înrudite

• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <input type=email>: Câmpul pentru adrese de email: browserul verifică formatul la trimitere, iar pe telefon apare tastatura cu @.
• <input type=text>: Câmpul de text pe un singur rând, tipul implicit al elementului input, pentru nume, orașe, titluri și alte texte scurte.
• <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.