Atributele HTML Input form*
Acest capitol descrie diferitele atribute form* pe care le poți folosi pentru elementul HTML <input>. Acestea sunt atribute suplimentare ale căror nume încep cu form, iar majoritatea permit ca un singur buton să suprascrie o setare a formularului din care face parte.
Atributul form
Atributul form spune cărui formular îi aparține un <input>. Setează valoarea sa la id-ul elementului <form>. Acest lucru permite ca un input să fie plasat în afara formularului în pagină, dar totuși să fie trimis odată cu acesta.
Exemplu
Un câmp plasat în afara formularului, care totuși îi aparține prin atributul form.
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>Atributul form</title>
</head>
<body>
<form action="/action_page.php" id="form1">
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Trimite">
</form>
<p>Câmpul "Nume de familie" de mai jos este în afara formularului, dar tot face parte din el:</p>
<label for="lname">Nume de familie:</label>
<input type="text" id="lname" name="lname" form="form1">
</body>
</html>
Atributul formaction
Atributul formaction setează URL-ul fișierului care va procesa input-ul la trimiterea formularului.
Notă: Suprascrie atributul propriu action al formularului. Funcționează cu tipurile de input submit și image.
Exemplu
Un formular cu două butoane de trimitere care trimit datele către URL-uri diferite.
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>Atributul formaction</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nume de familie:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Trimite">
<input type="submit" formaction="/action_page2.php" value="Trimite ca Admin">
</form>
</body>
</html>
Atributul formenctype
Atributul formenctype setează modul în care datele formularului trebuie codificate la trimitere (doar pentru formulare care folosesc method="post").
Notă: Suprascrie atributul propriu enctype al formularului. Funcționează cu tipurile de input submit și image.
Exemplu
Un formular cu două butoane de trimitere: unul folosește codificarea implicită, celălalt trimite datele ca multipart/form-data.
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>Atributul formenctype</title>
</head>
<body>
<form action="/action_page_binary.asp" method="post">
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Trimite">
<input type="submit" formenctype="multipart/form-data" value="Trimite ca Multipart/form-data">
</form>
</body>
</html>
Atributul formmethod
Atributul formmethod setează metoda HTTP folosită pentru a trimite datele formularului la URL-ul de acțiune.
Notă: Suprascrie atributul propriu method al formularului. Funcționează cu tipurile de input submit și image. Datele pot fi trimise ca variabile URL cu GET sau ca o cerere HTTP post cu POST.
Note despre GET: adaugă datele la URL ca perechi nume/valoare, este util atunci când utilizatorul vrea să adauge rezultatul la favorite, și are o limită de lungime a URL-ului, deci nu toate datele pot fi transferate. Nu folosi niciodată GET pentru informații sensibile, deoarece acestea apar în bara de adrese.
Note despre POST: trimite datele ca o cerere HTTP post, care nu poate fi adăugată la favorite. POST este mai robust și mai sigur decât GET și nu are limită de dimensiune.
Exemplu
Un formular cu două butoane de trimitere, unul trimițând cu GET și celălalt cu POST.
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>Atributul formmethod</title>
</head>
<body>
<form action="/action_page.php" method="get">
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nume de familie:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Trimite folosind GET">
<input type="submit" formmethod="post" value="Trimite folosind POST">
</form>
</body>
</html>
Atributul formtarget
Atributul formtarget setează un nume sau un cuvânt-cheie pentru locul unde se va afișa răspunsul primit după trimiterea formularului.
Notă: Suprascrie atributul propriu target al formularului. Funcționează cu tipurile de input submit și image.
Exemplu
Un formular cu două butoane de trimitere care afișează răspunsul în ferestre diferite.
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>Atributul formtarget</title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Prenume:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Nume de familie:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Trimite">
<input type="submit" formtarget="_blank" value="Trimite într-o fereastră/filă nouă">
</form>
</body>
</html>
Atributul formnovalidate
Atributul formnovalidate spune că un <input> nu trebuie validat la trimiterea formularului.
Notă: Suprascrie atributul propriu novalidate al formularului. Funcționează cu tipul de input submit.
Exemplu
Un formular cu două butoane de trimitere, unul dintre ele sărind peste validare.
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>Atributul formnovalidate</title>
</head>
<body>
<form action="/action_page.php">
<label for="email">Introdu adresa ta de email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Trimite">
<input type="submit" formnovalidate="formnovalidate" value="Trimite fără validare">
</form>
</body>
</html>
Atributul novalidate
Atributul novalidate este un atribut al elementului <form>. Când este prezent, niciuna dintre datele formularului nu este validată la trimiterea acestuia.
Exemplu
Un formular setat astfel încât niciuna dintre datele sale nu este validată la trimitere.
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>Atributul novalidate</title>
</head>
<body>
<form action="/action_page.php" novalidate>
<label for="email">Introdu adresa ta de email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Trimite">
</form>
</body>
</html>