Ce face <form>
Tagul <form> grupează controalele interactive dintr-un formular: căsuțe de text, butoane radio, casete de bifare, meniuri și butoane de trimitere.
Cele două atribute esențiale sunt action (adresa URL a scriptului de pe server care procesează datele) și method: POST (pentru crearea sau modificarea de date confidențiale, parole, comenzi) sau GET (pentru căutări sau filtre, unde parametrii apar în URL).
Dacă formularul permite încărcarea de fișiere de pe calculatorul utilizatorului, este obligatoriu să adaugi atributul enctype="multipart/form-data".
Atribute
| Atribut | Descriere |
|---|---|
action |
Adresa URL către care sunt trimise datele la apăsarea butonului de trimitere. |
method |
„POST” (date trimise în corpul cererii) sau „GET” (date trimise în bara de adrese URL). |
enctype |
Tipul de codare: „multipart/form-data” (obligatoriu pentru încărcare de fișiere). |
autocomplete |
„on” (browserul sugerează date salvate) sau „off”. |
novalidate |
Dezactivează validarea automată a browserului la trimitere. |
Exemple
Exemplul 1: Formular de autentificare cu trimitere sigură POST
Parola este mascată și trimisă securizat în corpul cererii HTTP.
<form action="/login" method="POST">
<div>
<label for="utilizator">Email:</label>
<input type="email" id="utilizator" name="email" required>
</div>
<div>
<label for="parola">Parolă:</label>
<input type="password" id="parola" name="parola" required>
</div>
<button type="submit">Intră în cont</button>
</form>Ce afișează browserul
Două câmpuri (Email, Parolă) și un buton „Intră în cont”. La trimitere, browserul verifică dacă emailul este valid.Greșeli frecvente
- Folosirea metodei GET pentru formulare de autentificare sau date bancare; metoda GET expune parola în bara de adrese și în istoricul browserului.
- Imbricarea unui tag
Comenzi înrudite
<input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.<button>: Element clicabil pentru declanșarea trimiterii formularelor sau a unor acțiuni JavaScript în pagină.<label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.<textarea>: Zonă de introducere a textului pe mai multe rânduri (multiline text box), cu redimensionare automată în browser.