<input type=email> în HTML

<input type="email" name="email" required>

Ce face <input type=email>

<input type="email"> este un câmp de text care acceptă doar adrese de email cu format valid. La trimiterea formularului, browserul verifică dacă valoarea arată ca nume@domeniu și, dacă nu, oprește trimiterea și afișează un mesaj. Spațiile de la început și de la sfârșit sunt eliminate automat.

Verificarea este doar de format: ana@exemplu trece (domeniul fără punct este valid după standard), iar o adresă inexistentă, dar corect scrisă, trece și ea. Dacă vrei să ceri un domeniu cu punct sau un anumit domeniu, adaugă pattern.

Pe telefon, câmpul deschide o tastatură cu tastele @ și punct la îndemână. Cu atributul multiple, câmpul acceptă mai multe adrese separate prin virgulă.

Atribute

Atribut	Descriere
multiple	Acceptă o listă de adrese separate prin virgulă.
pattern	Regulă suplimentară, aplicată pe lângă verificarea de format (de exemplu un anumit domeniu).
minlength / maxlength	Lungimea minimă și maximă a adresei.
placeholder	Exemplu de adresă afișat cât timp câmpul este gol.
autocomplete	Valoarea email permite browserului să propună adresa salvată.
list	Id-ul unui <datalist> cu adrese sugerate.

Exemple

Exemplul 1: Abonare la newsletter

Câmpul este obligatoriu și browserul propune adresa salvată a utilizatorului.

<form action="/newsletter" method="post">
  <label for="email">Adresa de email</label>
  <input type="email" id="email" name="email"
         required autocomplete="email"
         placeholder="ana.popescu@exemplu.ro">
  <button>Mă abonez</button>
</form>

Ce afișează browserul

Dacă scrii „ana.popescu” fără @ și apeși „Mă abonez”, apare un mesaj care cere un simbol @ în adresă.
„ana.popescu@exemplu.ro” este acceptată și formularul se trimite.

Exemplul 2: Doar adrese de la un anumit domeniu

pattern se adaugă peste verificarea de email; aici sunt acceptate doar adresele @uaic.ro.

<label for="email-student">Email instituțional</label>
<input type="email" id="email-student" name="email"
       pattern=".+@uaic\.ro"
       title="Folosește adresa de la universitate (@uaic.ro)">

Ce afișează browserul

„ana@uaic.ro” este acceptată.
„ana@gmail.com” are format valid, dar este respinsă la trimitere cu mesajul din title.

Exemplul 3: Mai multe adrese cu multiple

Utilizatorul trimite o invitație către mai mulți colegi deodată.

<label for="invitati">Invită colegii (separă adresele prin virgulă)</label>
<input type="email" id="invitati" name="invitati" multiple>

Ce afișează browserul

„ana@exemplu.ro, mihai@exemplu.ro” este acceptat.
Dacă una dintre adrese nu are format valid, tot câmpul este marcat invalid.

Greșeli frecvente

• Să consideri că browserul a verificat existența adresei: verifică doar formatul. Confirmarea se face prin email trimis de server.
• Folosirea lui type="text" pentru email: utilizatorul pierde tastatura cu @ de pe telefon și validarea automată.
• Lipsa validării pe server: atributul type poate fi schimbat din instrumentele browserului.

Comenzi înrudite

• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <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.
• 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.