Atribute HTML pentru Formular
Acest capitol descrie diferitele atribute pe care le poți folosi pentru elementul HTML <form>.
Atributul Action
Atributul action spune ce ar trebui să se întâmple la trimiterea formularului.
De obicei, datele formularului sunt trimise către un fișier de pe server când utilizatorul apasă butonul de trimitere. În exemplul de mai jos, acestea sunt trimise către un fișier numit action_page.php, care conține un script pe partea de server ce procesează datele.
Sfat: Dacă omiți atributul action, datele sunt trimise către pagina curentă.
Exemplu
La trimitere, datele formularului sunt trimise către action_page.php.
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 Action</title>
</head>
<body>
<h2>Atributul action</h2>
<p>La trimitere, datele formularului sunt trimise către "action_page.php".</p>
<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 Target
Atributul target spune unde să se afișeze răspunsul primit după trimiterea formularului.
Poate fi una dintre: _blank (o fereastră sau filă nouă), _self (fereastra curentă), _parent (cadrul părinte), _top (întreaga fereastră) sau un nume de cadru (un iframe cu nume). Valoarea implicită este _self, deci răspunsul se deschide în fereastra curentă.
Exemplu
Aici rezultatul trimis se deschide într-o filă nouă a browserului, deoarece target este setat la _blank.
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 Target</title>
</head>
<body>
<h2>Atributul target</h2>
<p>Rezultatul trimis se va deschide într-o filă nouă a browserului:</p>
<form action="/action_page.php" target="_blank">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Atributul Method
Atributul method spune ce metodă HTTP să fie folosită la trimiterea datelor formularului.
Datele pot fi trimise ca variabile URL cu method="get" sau în corpul cererii cu method="post". Metoda implicită este GET.
Note despre GET: adaugă datele formularului la URL ca perechi nume/valoare, deci nu-l folosi niciodată pentru date sensibile (acestea apar în URL). URL-urile au și o limită de lungime (aproximativ 2048 de caractere). GET este util atunci când utilizatorul vrea să adauge rezultatul la favorite și este potrivit pentru date nesensibile, precum interogările de căutare.
Note despre POST: pune datele formularului în corpul cererii, deci nu apar în URL. POST nu are limită de dimensiune și poate trimite cantități mari de date, dar trimiterile POST nu pot fi adăugate la favorite.
Sfat: Folosește întotdeauna POST dacă datele formularului conțin informații sensibile sau personale.
Metoda GET
Acest formular folosește metoda GET când trimite datele.
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 Method (GET)</title>
</head>
<body>
<h2>Folosirea metodei GET</h2>
<form action="/action_page.php" method="get">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Metoda POST
Acest formular folosește metoda POST când trimite datele.
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 Method (POST)</title>
</head>
<body>
<h2>Folosirea metodei POST</h2>
<form action="/action_page.php" method="post">
<label for="fname">Prenume:</label><br>
<input type="text" id="fname" name="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Atributul Autocomplete
Atributul autocomplete spune dacă un formular trebuie să aibă completarea automată activată sau dezactivată.
Când este activată, browserul poate completa automat valori pe baza a ceea ce utilizatorul a scris anterior.
Exemplu
Un formular cu autocomplete setat la on.
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 Autocomplete</title>
</head>
<body>
<h2>Atributul autocomplete</h2>
<form action="/action_page.php" autocomplete="on">
<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"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Atributul Novalidate
Atributul novalidate este un atribut boolean (fie este prezent, fie nu).
Când este prezent, browserul nu va valida datele formularului la trimiterea acestuia.
Exemplu
Un formular cu atributul novalidate.
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 Novalidate</title>
</head>
<body>
<h2>Atributul novalidate</h2>
<form action="/action_page.php" novalidate>
<label for="email">Introdu adresa de email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Lista Tuturor Atributelor <form>
Acestea sunt toate atributele suportate de elementul <form>:
accept-charset— codificările de caractere folosite pentru trimiterea formularului.action— unde se trimit datele formularului la trimiterea acestuia.autocomplete— dacă formularul trebuie să aibă completarea automată activată sau dezactivată.enctype— cum trebuie codificate datele formularului la trimiterea către server (doar pentrumethod="post").method— metoda HTTP folosită la trimiterea datelor formularului.name— numele formularului.novalidate— că formularul nu trebuie validat la trimitere.rel— relația dintre o resursă legată și documentul curent.target— unde se afișează răspunsul primit după trimiterea formularului.