Elementul HTML <input> este componenta de baza pentru captarea datelor de la utilizatori in formularele web.
Tipuri de Câmpuri Input
Tipuri Textuale și Semantice
| Tip | Descriere |
|---|---|
text |
Text simplu pe o singura linie |
password |
Camp securizat pentru parole |
email |
Adresa de email cu validare automata |
url |
Introducere URL absolut |
tel |
Numar de telefon (afiseaza tastatura numerica pe mobil) |
search |
Camp de cautare cu buton de stergere rapida |
Tipuri Numerice și Cantitative
| Tip | Descriere |
|---|---|
number |
Camp numeric cu incrementare (min, max, step) |
range |
Glisor pentru selectarea unei valori aproximative |
Tipuri Temporale și Calendaristice
| Tip | Descriere |
|---|---|
date |
Selector data calendaristica (an, luna, zi) |
time |
Selector ora (ore, minute) |
datetime-local |
Data si ora locale fara fus orar |
month |
Selector an si luna |
week |
Selector an si numar saptamana ISO |
Selecție și Acțiuni
| Tip | Descriere |
|---|---|
checkbox |
Caseta de bifare sau selectie multipla |
radio |
Optiune radio exclusiva intr-un grup |
color |
Paleta pentru alegerea culorilor |
file |
Incarcare fisiere atasate (accept, multiple) |
hidden |
Valoare ascunsa transmisa odata cu formularul |
submit |
Buton de trimitere a formularului |
reset |
Reseteaza campurile la valorile implicite |
button |
Buton generic fara actiune implicita |
Atribute Cheie de Validare
| Atribut | Comportament |
|---|---|
required |
Impiedica trimiterea daca campul este gol |
pattern="[A-Za-z0-9]+" |
Expresie regulata (Regex) ceruta pentru valoare |
min="1" max="100" |
Valori minime si maxime permise |
step="0.5" |
Pasul de incrementare valid |
minlength="5" maxlength="20" |
Lungimea minima si maxima a caracterelor |
placeholder="..." |
Text ajutator temporar |
readonly |
Impiedica modificarea dar trimite valoarea |
disabled |
Dezactiveaza campul si nu trimite valoarea |
autofocus |
Focalizeaza automat campul la incarcare |
Exemplu Complet de Formular
<form action="/api/submit" method="POST">
<label for="user-email">Adresă de email:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Parolă (min. 8 caractere):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Vârstă:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Accept termenii și condițiile
</label>
<input type="submit" value="Înregistrare" />
</form>