Atributul autocomplete în HTML

<input type="email" name="email" autocomplete="email">
<input type="password" name="parola" autocomplete="new-password">

Ce face Atributul autocomplete

Atributul autocomplete se pune pe <input>, <select>, <textarea> sau pe tot <form>. Valoarea lui spune browserului ce informație așteaptă câmpul, ca să poată propune datele salvate ale utilizatorului: numele, emailul, telefonul, adresa sau parola.

Valorile sunt cuvinte standard: name, given-name, family-name, email, tel, street-address, postal-code, address-level2 (orașul), country, username, current-password, new-password, one-time-code. Poți adăuga în față shipping sau billing când formularul are două adrese, de exemplu shipping street-address.

autocomplete="off" cere browserului să nu propună valori salvate, dar browserele pot ignora cererea la câmpurile de autentificare, ca managerii de parole să funcționeze. Completarea automată corectă scurtează formularele și ajută persoanele cu dificultăți motorii.

Atribute

Atribut	Descriere
name / given-name / family-name	Numele complet, prenumele, numele de familie.
email / tel	Adresa de email și numărul de telefon complet.
street-address / postal-code / address-level2	Strada și numărul, codul poștal, orașul.
username / current-password	Datele de autentificare salvate.
new-password	Parolă nouă: browserul poate propune una generată.
one-time-code	Codul primit prin SMS sau email; pe telefon apare ca sugestie deasupra tastaturii.
off / on	Oprește sau permite completarea automată, fără a preciza tipul datelor.

Exemple

Exemplul 1: Adresa de livrare completată dintr-un clic

Fiecare câmp spune ce informație așteaptă, iar browserul le completează pe toate deodată.

<form action="/livrare" method="post">
  <input name="nume" autocomplete="shipping name" aria-label="Nume">
  <input name="telefon" type="tel" autocomplete="shipping tel" aria-label="Telefon">
  <input name="adresa" autocomplete="shipping street-address" aria-label="Strada și numărul">
  <input name="oras" autocomplete="shipping address-level2" aria-label="Oraș">
  <input name="cod_postal" autocomplete="shipping postal-code" aria-label="Cod poștal">
</form>

Ce afișează browserul

La clic în câmpul Nume, browserul propune adresa salvată „Ana Popescu, Str. Lăpușneanu 12, Iași”.
După alegere, toate cele cinci câmpuri se completează automat.

Exemplul 2: Codul de verificare primit prin SMS

one-time-code și inputmode="numeric" fac completarea codului rapidă pe telefon.

<label for="cod">Codul primit prin SMS</label>
<input id="cod" name="cod" inputmode="numeric"
       autocomplete="one-time-code" maxlength="6">

Ce afișează browserul

Pe telefon apare tastatura numerică, iar deasupra ei, sugestia „Din Mesaje: 482913”. O atingere completează codul.

Exemplul 3: Oprirea sugestiilor pentru un câmp

Pentru câmpuri unde sugestiile anterioare încurcă, de exemplu un cod de reducere.

<label for="voucher">Cod de reducere</label>
<input id="voucher" name="voucher" autocomplete="off">

Ce afișează browserul

La clic în câmp nu mai apare lista cu valorile scrise anterior.

Greșeli frecvente

• Punerea lui autocomplete="off" pe formularul de autentificare: browserele îl ignoră de obicei, iar utilizatorii pierd ajutorul managerului de parole.
• Valori inventate (autocomplete="oras"): browserul nu le recunoaște. Folosește valorile standard, de exemplu address-level2 pentru oraș.
• Folosirea lui current-password la înregistrare: browserul propune parola veche în loc să genereze una nouă; corect este new-password.

Comenzi înrudite

• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <input type=password>: Câmpul pentru parole: caracterele scrise sunt ascunse sub puncte, iar managerii de parole îl recunosc automat.
• <input type=email>: Câmpul pentru adrese de email: browserul verifică formatul la trimitere, iar pe telefon apare tastatura cu @.
• <input type=tel>: Câmpul pentru numere de telefon: pe mobil deschide tastatura numerică, iar formatul se verifică doar cu pattern.