Formulare HTML
Un formular HTML este folosit pentru a colecta input de la un utilizator. Input-ul introdus de utilizator este cel mai adesea trimis către un server, unde este procesat.
Exemplu
Un formular simplu cu două câmpuri de text pentru prenume și nume.
Output: 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>Formular HTML</title>
</head>
<body>
<form>
Prenume:<br>
<input type="text" name="firstname"><br>
Nume:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Elementul <form>
Elementul <form> este folosit pentru a crea un formular HTML pentru input-ul utilizatorului.
Este un container care conține diferitele elemente de input, precum câmpuri de text, checkbox-uri, butoane radio și butoane de trimitere. Toate elementele de formular sunt tratate în HTML Form Elements.
Structura unui formular
Un tag <form> gol, cu elemente de formular plasate în interiorul lui.
<form>
.
form elements
.
</form>
Elementul <input>
Elementul <input> este cel mai folosit element de formular.
Poate fi afișat în multe moduri diferite, în funcție de atributul său type. Câteva tipuri comune sunt: text pentru un câmp de text pe o singură linie, radio pentru un buton radio ce permite alegerea uneia dintre mai multe opțiuni, checkbox pentru a alege zero sau mai multe opțiuni, submit pentru un buton care trimite formularul și button pentru un buton pe care se poate face click.
Toate tipurile de input sunt tratate în HTML Input Types.
Câmpuri de Text
<input type="text"> creează un câmp pe o singură linie pentru scrierea textului.
Notă: Formularul în sine nu este vizibil. Lățimea implicită a unui câmp de text este de aproximativ 20 de caractere.
Exemplu
Un formular cu câmpuri de text pentru prenume și nume, fiecare cu propria etichetă.
Output: 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>Câmpuri text</title>
</head>
<body>
<h2>Câmpuri de tip text</h2>
<form>
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Nume:</label><br>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Elementul <label>
Tag-ul <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.
Pentru a lega o etichetă de un input, setează atributul for al etichetei la aceeași valoare ca atributul id al input-ului.
Butoane Radio
<input type="radio"> creează un buton radio. Butoanele radio permit utilizatorului să aleagă DOAR UNA dintr-un set restrâns de opțiuni.
Exemplu
Un formular cu butoane radio pentru alegerea limbajului web preferat. Acestea au același name, deci se poate selecta doar unul.
Output: 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>Butoane Radio</title>
</head>
<body>
<p>Alege limbajul tău web preferat:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Checkbox-uri
<input type="checkbox"> creează un checkbox. Checkbox-urile permit utilizatorului să aleagă ZERO sau MAI MULTE opțiuni dintr-un set.
Exemplu
Un formular cu trei checkbox-uri pe care utilizatorul le poate bifa sau debifa independent.
Output: 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>Căsuțe de bifat</title>
</head>
<body>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> Am o bicicletă</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> Am o mașină</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Am o barcă</label>
</form>
</body>
</html>
Butonul de Trimitere
<input type="submit"> creează un buton care trimite datele formularului către un handler de formular.
Handler-ul de formular este de obicei un fișier de pe server cu un script care procesează input-ul. Îl setezi cu atributul action al formularului.
Exemplu
Un formular cu un buton de trimitere care trimite datele către pagina numită în atributul action.
Output: 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>Buton de trimitere</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Nume:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Atributul Name pentru <input>
Fiecare câmp de input trebuie să aibă un atribut name pentru a fi trimis când formularul este trimis.
Dacă atributul name lipsește, valoarea acelui câmp nu este trimisă deloc.
Exemplu
Acest formular nu va trimite valoarea câmpului „prenume”, deoarece acel input nu are atribut name.
Output: 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>Atributul Name</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>