<input type=search> în HTML

<form action="/cauta" role="search">
  <input type="search" name="q">
</form>

Ce face <input type=search>

<input type="search"> funcționează ca un câmp de text obișnuit, dar îi spune browserului și cititoarelor de ecran că este o casetă de căutare. Chrome și Safari afișează un mic buton × pentru golirea câmpului, iar pe telefon tasta Enter devine adesea „Caută”.

Câmpul nu face nicio căutare singur: Enter trimite formularul în care se află, de obicei cu method="get", ca termenul să apară în adresă (/cauta?q=laptop) și pagina de rezultate să poată fi salvată sau distribuită.

Pune formularul de căutare într-un element <search> sau dă-i role="search", ca cititoarele de ecran să-l găsească ușor ca zonă de căutare a paginii.

Atribute

Atribut	Descriere
name	Numele parametrului din adresă; prin convenție q sau s (WordPress folosește s).
placeholder	Exemplu de termen afișat cât timp câmpul este gol.
list	Id-ul unui <datalist> cu căutări sugerate.
minlength / maxlength	Lungimea minimă și maximă a termenului.
autocomplete	off oprește lista cu căutări anterioare a browserului.

Exemple

Exemplul 1: Căutare într-un magazin online

Formularul cu method="get" pune termenul în adresa paginii de rezultate.

<form action="/cauta" method="get" role="search">
  <label for="q">Caută produse</label>
  <input type="search" id="q" name="q" placeholder="de exemplu, căști wireless">
  <button>Caută</button>
</form>

Ce afișează browserul

Caseta „de exemplu, căști wireless” și butonul Caută.
După ce scrii „laptop” apare un × pentru golire (Chrome, Safari); Enter deschide /cauta?q=laptop.

Exemplul 2: Căutare cu sugestii

Cele mai căutate orașe apar ca sugestii sub câmp.

<search>
  <form action="/cazare">
    <input type="search" name="oras" list="populare" aria-label="Caută cazare după oraș">
    <datalist id="populare">
      <option value="Iași">
      <option value="Brașov">
      <option value="Sibiu">
    </datalist>
  </form>
</search>

Ce afișează browserul

La clic în câmp apare lista Iași, Brașov, Sibiu; dacă alegi Brașov și apeși Enter, se deschide /cazare?oras=Brașov (codificat în adresă).

Greșeli frecvente

• Câmp de căutare fără etichetă: dacă nu vrei un text vizibil, adaugă măcar aria-label pentru cititoarele de ecran.
• Folosirea lui method="post" pentru căutare: rezultatele nu mai pot fi salvate ca link, iar butonul Înapoi cere retrimiterea formularului.

Comenzi înrudite

• <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.
• <input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.
• <button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.