Ce face <input>
Tagul <input> este un element vid (self-closing). Comportamentul său depinde integral de atributul type:
• text: text scurt pe o singură linie.
• email: adrese de email cu validare automată.
• password: text mascat cu buline pentru parole.
• number: numere cu butoane de incrementare/decrementare.
• checkbox: casetă de bifare (bifat / nebifat).
• radio: cerc de selecție exclusivă dintr-un grup.
• date: selector nativ de dată din calendar.
• file: buton de încărcare a unui fișier.
• submit: buton care trimite formularul.
Pentru ca valoarea introdusă să fie trimisă la server, este obligatoriu ca tagul să aibă definit atributul name.
Atribute
| Atribut | Descriere |
|---|---|
type |
Tipul câmpului: text, email, password, number, checkbox, radio, date, file, hidden, submit. |
name |
Numele câmpului trimis către server (cheia din formular). |
value |
Valoarea inițială a câmpului. |
placeholder |
Text temporar gri afișat în câmp ca sugestie înainte de tastare. |
required |
Obligă utilizatorul să completeze câmpul înainte de trimitere. |
disabled |
Dezactivează câmpul și previne trimiterea valorii la server. |
Exemple
Exemplul 1: Tipuri variate de câmpuri de introducere
Fiecare tip oferă o interfață adaptată dispozitivului (ex. tastatură numerică pe telefon pentru type=”number”).
<input type="text" placeholder="Nume complet">
<input type="email" placeholder="adresa@exemplu.ro">
<input type="number" min="1" max="10" value="1">
<label><input type="checkbox" checked> Sunt de acord cu termenii</label>Ce afișează browserul
O căsuță text, o căsuță email, o căsuță numerică cu săgeți sus/jos și o casetă de bifare deja selectată.Greșeli frecvente
- Omiterea atributului name; fără name, valoarea tastată de utilizator nu este trimisă deloc la server când formularul este expediat.
- Folosirea atributului placeholder ca înlocuitor pentru tagul
Comenzi înrudite
<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.<textarea>: Zonă de introducere a textului pe mai multe rânduri (multiline text box), cu redimensionare automată în browser.<button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.