<input type=text> în HTML

<input type="text" name="nume" minlength="2" maxlength="50">

Ce face <input type=text>

<input type="text"> afișează o casetă în care utilizatorul scrie un text pe un singur rând. Este tipul implicit: dacă atributul type lipsește sau are o valoare necunoscută, browserul folosește text. Enter în câmp trimite formularul, iar rupturile de rând din valoare sunt eliminate.

Pentru validare ai la dispoziție required, minlength, maxlength și pattern (o expresie regulată pe care trebuie să o respecte toată valoarea). maxlength oprește scrierea după numărul de caractere dat, iar celelalte reguli sunt verificate la trimitere, când browserul afișează un mesaj lângă câmp.

Folosește tipurile specializate (email, tel, number, url) când datele au un format cunoscut: pe telefon apare tastatura potrivită, iar validarea vine gratuit.

Atribute

Atribut	Descriere
name	Numele sub care valoarea ajunge la server (de exemplu $_POST['nume'] în PHP).
value	Valoarea inițială din câmp.
placeholder	Text de ajutor gri, afișat cât timp câmpul este gol. Nu înlocuiește eticheta <label>.
minlength / maxlength	Numărul minim și maxim de caractere acceptate.
pattern	Expresie regulată pe care trebuie să o respecte întreaga valoare (fără ^ și $, sunt implicite).
size	Lățimea vizibilă a câmpului, în caractere (implicit 20). Pentru aspect se preferă CSS.
list	Id-ul unui element <datalist> cu sugestii afișate sub câmp.
readonly	Valoarea se vede și se trimite, dar nu poate fi modificată.

Exemple

Exemplul 1: Nume cu lungime minimă și maximă

Câmpul cere cel puțin 2 caractere și nu lasă utilizatorul să scrie mai mult de 40.

<form action="/inscriere" method="post">
  <label for="nume">Numele complet</label>
  <input type="text" id="nume" name="nume"
         required minlength="2" maxlength="40"
         placeholder="de exemplu, Ana Popescu">
  <button>Trimite</button>
</form>

Ce afișează browserul

Eticheta „Numele complet” și o casetă cu textul gri „de exemplu, Ana Popescu”.
Dacă scrii doar „A” și apeși Trimite, browserul afișează un mesaj care cere cel puțin 2 caractere.

Exemplul 2: Număr de înmatriculare verificat cu pattern

Expresia acceptă formatul românesc: 1-2 litere pentru județ, 2-3 cifre și 3 litere. title explică formatul în mesajul de eroare.

<label for="numar">Număr de înmatriculare</label>
<input type="text" id="numar" name="numar"
       pattern="[A-Z]{1,2}[0-9]{2,3}[A-Z]{3}"
       title="Litere mari, fără spații, de exemplu IS12ABC"
       placeholder="IS12ABC">

Ce afișează browserul

„IS12ABC” și „B123XYZ” sunt acceptate.
„is 12 abc” este respins la trimitere cu mesajul browserului, urmat de textul din title.

Exemplul 3: Sugestii cu <datalist>

Utilizatorul poate alege un oraș din listă sau poate scrie altul.

<label for="oras">Orașul</label>
<input type="text" id="oras" name="oras" list="orase">
<datalist id="orase">
  <option value="Iași">
  <option value="Cluj-Napoca">
  <option value="Timișoara">
</datalist>

Ce afișează browserul

La clic sau la scriere apare sub câmp o listă cu Iași, Cluj-Napoca și Timișoara, filtrată după literele scrise.

Greșeli frecvente

• Folosirea lui placeholder în locul etichetei <label>: textul dispare la prima literă, iar cititoarele de ecran nu îl tratează ca etichetă.
• Încrederea doar în maxlength și pattern: oricine poate trimite alte date ocolind browserul, deci validarea pe server rămâne obligatorie.
• Scrierea lui ^ și $ în pattern crezând că sunt necesare; browserul verifică oricum întreaga valoare.

Comenzi înrudite

• <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.
• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <textarea>: Zonă de introducere a textului pe mai multe rânduri (multiline text box), cu redimensionare automată în browser.
• <input type=search>: Câmpul de căutare: se comportă ca un câmp text, dar este recunoscut ca bară de căutare și poate avea buton de golire.