Elementele HTML <form>
Acest capitol descrie toate elementele diferite de formular HTML.
Elementul <form> poate conține unul sau mai multe dintre aceste elemente de formular: <input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option> și <optgroup>.
Elementul <input>
Elementul <input> este unul dintre cele mai folosite elemente de formular. Poate fi afișat în mai multe moduri, în funcție de atributul său type. Toate valorile diferite ale type sunt tratate în HTML Input Types.
Exemplu
Un singur câmp de text cu o etichetă.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul input</title>
</head>
<body>
<form>
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Elementul <label>
Elementul <label> definește o etichetă pentru un element de formular.
Ajută utilizatorii de cititoare de ecran, deoarece cititorul de ecran citește eticheta cu voce tare când utilizatorul se deplasează la input. De asemenea, ajută persoanele care au dificultăți în a apăsa zone foarte mici, cum ar fi butoanele radio sau checkbox-urile: apăsând pe textul etichetei se comută controlul corespunzător. Setează atributul for al etichetei la aceeași valoare ca id-ul input-ului, pentru a le lega între ele.
Elementul <select>
Elementul <select> creează o listă derulantă. Fiecare opțiune este un element <option>. Implicit, prima opțiune este selectată.
Pentru a preselecta o opțiune, adaugă-i atributul selected. Folosește atributul size pentru a seta câte opțiuni sunt vizibile odată, iar atributul multiple pentru a permite utilizatorului să aleagă mai multe opțiuni.
Listă derulantă
O listă derulantă simplă de mașini.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul select</title>
</head>
<body>
<form>
<label for="cars">Alege o mașină:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Opțiune preselectată
Aceeași listă cu Fiat preselectat folosind atributul selected.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opțiune preselectată</title>
</head>
<body>
<form>
<label for="cars">Alege o mașină:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Valori vizibile
Folosirea size="3" pentru a afișa trei opțiuni odată.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valori vizibile</title>
</head>
<body>
<form>
<label for="cars">Alege o mașină:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Selecții multiple
Folosirea atributului multiple pentru ca utilizatorul să poată alege mai multe mașini.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selecții multiple</title>
</head>
<body>
<form>
<label for="cars">Alege o mașină:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Elementul <textarea>
Elementul <textarea> creează un câmp de text pe mai multe linii.
Atributul rows setează câte linii sunt vizibile, iar atributul cols setează lățimea vizibilă. Poți seta dimensiunea și cu CSS.
Folosirea rows și cols
O zonă de text dimensionată cu rows și cols.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul textarea</title>
</head>
<body>
<form>
<textarea name="message" rows="10" cols="30">Pisica se juca în grădină.</textarea>
</form>
</body>
</html>
Dimensionată cu CSS
O zonă de text dimensionată în schimb cu width și height din CSS.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea dimensionat cu CSS</title>
</head>
<body>
<form>
<textarea name="message" style="width:200px; height:100px;">Pisica se juca în grădină.</textarea>
</form>
</body>
</html>
Elementul <button>
Elementul <button> creează un buton pe care se poate face click.
Notă: Setează întotdeauna atributul type pentru un buton, deoarece browserele diferite pot folosi tipuri implicite diferite.
Exemplu
Un buton care afișează o alertă la apăsare.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul button</title>
</head>
<body>
<button type="button" onclick="alert('Salut, lume!')">Apasă-mă!</button>
</body>
</html>
Elementele <fieldset> și <legend>
Elementul <fieldset> grupează câmpurile înrudite dintr-un formular. Elementul <legend> oferă acestui grup o legendă.
Exemplu
Un formular ale cărui câmpuri sunt grupate într-un <fieldset> cu o legendă <legend>.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fieldset și legend</title>
</head>
<body>
<form action="/action_page.php">
<fieldset>
<legend>Date personale:</legend>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nume de familie:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Trimite">
</fieldset>
</form>
</body>
</html>
Elementul <datalist>
Elementul <datalist> oferă unui <input> o listă de opțiuni predefinite. Utilizatorul vede o listă derulantă cu aceste opțiuni în timp ce scrie.
Atributul list al input-ului trebuie să corespundă cu id-ul elementului <datalist> pentru a le conecta.
Exemplu
Un input de text cu o datalist de sugestii ale browserului.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul datalist</title>
</head>
<body>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
</body>
</html>
Elementul <output>
Elementul <output> afișează rezultatul unui calcul, cum ar fi unul realizat de un script.
Exemplu
Un formular care adună două numere și afișează rezultatul într-un element <output>.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementul output</title>
</head>
<body>
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b">100</output>
<br><br>
<input type="submit">
</form>
</body>
</html>
Elemente de Formular HTML
Acestea sunt elementele de formular HTML și ce face fiecare:
<form>— definește un formular pentru input-ul utilizatorului.<input>— definește un control de input.<textarea>— definește un control de input pe mai multe linii (zonă de text).<label>— definește o etichetă pentru un element<input>.<fieldset>— grupează elementele înrudite dintr-un formular.<legend>— definește o legendă pentru un element<fieldset>.<select>— definește o listă derulantă.<optgroup>— definește un grup de opțiuni înrudite într-o listă derulantă.<option>— definește o opțiune într-o listă derulantă.<button>— definește un buton pe care se poate face click.<datalist>— oferă o listă de opțiuni predefinite pentru controalele de input.<output>— definește rezultatul unui calcul.