Formularele HTML sunt componente esențiale ale paginilor web interactive, permițând colectarea de informații de la utilizatori. Fie că este vorba despre un formular de contact, o căsuță de căutare sau un proces de comandă online, formularele sunt instrumentul principal pentru interacțiunea utilizator-website.
Structura de bază a unui formular
Un formular HTML este creat folosind elementul <form>
. În interiorul acestuia, se adaugă diverse elemente de intrare.
<form action="/submit-form" method="post">
<!-- Elementele formularului vor fi adăugate aici -->
</form>
Atribute importante ale elementului <form>
:
action
: Specifică unde vor fi trimise datele formularuluimethod
: Definește metoda HTTP folosită pentru trimiterea datelor (de obicei „get” sau „post”)
Elemente comune de formular
1. Câmpuri de text
Câmpurile de text permit utilizatorilor să introducă text scurt.
<label for="nume">Nume:</label>
<input type="text" id="nume" name="nume" required>
2. Câmpuri de parolă
Similar cu câmpurile de text, dar ascund caracterele introduse.
<label for="parola">Parolă:</label>
<input type="password" id="parola" name="parola" required>
3. Casete de selectare (Checkbox)
Permit utilizatorilor să selecteze mai multe opțiuni.
<input type="checkbox" id="subscrie" name="subscrie" value="da">
<label for="subscrie">Abonează-mă la newsletter</label>
4. Butoane radio
Permit utilizatorilor să aleagă o singură opțiune dintr-un grup.
<p>Alegeți genul:</p>
<input type="radio" id="masculin" name="gen" value="masculin">
<label for="masculin">Masculin</label>
<input type="radio" id="feminin" name="gen" value="feminin">
<label for="feminin">Feminin</label>
5. Liste de selecție (Dropdown)
Oferă o listă de opțiuni din care utilizatorul poate alege.
<label for="tara">Țara:</label>
<select id="tara" name="tara">
<option value="romania">România</option>
<option value="moldova">Moldova</option>
<option value="bulgaria">Bulgaria</option>
</select>
6. Zone de text multilinie
Pentru introducerea de text mai lung.
<label for="mesaj">Mesaj:</label>
<textarea id="mesaj" name="mesaj" rows="4" cols="50"></textarea>
7. Buton de trimitere
Pentru a trimite formularul.
<input type="submit" value="Trimite formularul">
Validarea formularelor
HTML5 oferă atribute pentru validarea de bază a formularelor.
Atribute de validare comune:
required
: Câmpul trebuie completatminlength
șimaxlength
: Lungimea minimă și maximă a textuluimin
șimax
: Valori minime și maxime pentru câmpuri numericepattern
: Definește un model regex pentru validare
Exemplu:
<input type="email" id="email" name="email" required>
<input type="tel" id="telefon" name="telefon" pattern="[0-9]{10}" required>
Tipuri de input HTML5
HTML5 a introdus noi tipuri de input care oferă validare și interfețe specifice pe dispozitive mobile.
<input type="email" name="email">
<input type="url" name="website">
<input type="number" name="varsta">
<input type="date" name="data_nasterii">
<input type="time" name="ora_intalnire">
<input type="color" name="culoare_preferata">
<input type="range" name="rating" min="1" max="5">
Gruparea elementelor de formular
Folosiți <fieldset>
și <legend>
pentru a grupa și eticheta secțiuni ale formularului.
<fieldset>
<legend>Informații personale:</legend>
<label for="nume">Nume:</label>
<input type="text" id="nume" name="nume">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
Accesibilitate în formulare
- Folosiți întotdeauna etichete
<label>
asociate cu elementele de input. - Grupați elementele logic folosind
<fieldset>
și<legend>
. - Furnizați mesaje de eroare clare și instrucțiuni pentru completarea formularului.
- Utilizați atributul
aria-describedby
pentru a asocia texte explicative cu câmpurile de input.
<label for="parola">Parolă:</label>
<input type="password" id="parola" name="parola" aria-describedby="parola-help" required>
<p id="parola-help">Parola trebuie să conțină cel puțin 8 caractere, incluzând o literă mare și un număr.</p>
Exemple de formulare complete
Formular de contact simplu
<form action="/trimite-contact" method="post">
<label for="nume">Nume complet:</label>
<input type="text" id="nume" name="nume" required>
<label for="email">Adresă de email:</label>
<input type="email" id="email" name="email" required>
<label for="subiect">Subiect:</label>
<input type="text" id="subiect" name="subiect" required>
<label for="mesaj">Mesajul dumneavoastră:</label>
<textarea id="mesaj" name="mesaj" rows="5" required></textarea>
<button type="submit">Trimite mesajul</button>
</form>
Formular de înregistrare
<form action="/inregistrare" method="post">
<fieldset>
<legend>Informații personale</legend>
<label for="nume">Nume:</label>
<input type="text" id="nume" name="nume" required>
<label for="prenume">Prenume:</label>
<input type="text" id="prenume" name="prenume" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="data_nasterii">Data nașterii:</label>
<input type="date" id="data_nasterii" name="data_nasterii" required>
</fieldset>
<fieldset>
<legend>Detalii cont</legend>
<label for="username">Nume utilizator:</label>
<input type="text" id="username" name="username" required minlength="5">
<label for="parola">Parolă:</label>
<input type="password" id="parola" name="parola" required minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Trebuie să conțină cel puțin un număr, o literă mică, o literă mare, și cel puțin 8 caractere">
<label for="confirma_parola">Confirmă parola:</label>
<input type="password" id="confirma_parola" name="confirma_parola" required>
</fieldset>
<fieldset>
<legend>Preferințe</legend>
<input type="checkbox" id="newsletter" name="newsletter" value="da">
<label for="newsletter">Abonează-mă la newsletter</label>
<p>Cum ai aflat despre noi?</p>
<select id="sursa" name="sursa">
<option value="">Selectează o opțiune</option>
<option value="search">Motor de căutare</option>
<option value="ad">Reclamă</option>
<option value="friend">Recomandare prieten</option>
<option value="other">Altă sursă</option>
</select>
</fieldset>
<button type="submit">Creează cont</button>
</form>
Stilizarea Formularelor HTML
Pentru a face formularele mai atractive și mai ușor de utilizat, putem aplica stiluri CSS. Iată un exemplu de stil care poate fi aplicat formularelor noastre HTML:
<style>
/* Stiluri generale pentru formular */
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* Stiluri pentru etichete */
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #333;
}
/* Stiluri pentru câmpuri de input și textarea */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
/* Stiluri pentru focus pe input */
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 5px rgba(76,175,80,0.5);
}
/* Stiluri pentru butoane */
button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #45a049;
}
/* Stiluri pentru checkboxuri și radio buttons */
input[type="checkbox"],
input[type="radio"] {
margin-right: 10px;
}
/* Stiluri pentru fieldset și legend */
fieldset {
margin-bottom: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
legend {
font-weight: bold;
padding: 0 10px;
color: #333;
}
/* Stiluri responsive */
@media screen and (max-width: 600px) {
form {
width: 100%;
padding: 10px;
}
}
</style>
Acum, să aplicăm acest stil la un formular complet:
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formular de Înregistrare Stilizat</title>
<style>
/* Inserați aici stilul CSS de mai sus */
</style>
</head>
<body>
<form action="/inregistrare" method="post">
<h2>Formular de Înregistrare</h2>
<fieldset>
<legend>Informații Personale</legend>
<label for="nume">Nume:</label>
<input type="text" id="nume" name="nume" required>
<label for="prenume">Prenume:</label>
<input type="text" id="prenume" name="prenume" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="data_nasterii">Data nașterii:</label>
<input type="date" id="data_nasterii" name="data_nasterii" required>
</fieldset>
<fieldset>
<legend>Detalii Cont</legend>
<label for="username">Nume utilizator:</label>
<input type="text" id="username" name="username" required minlength="5">
<label for="parola">Parolă:</label>
<input type="password" id="parola" name="parola" required minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Trebuie să conțină cel puțin un număr, o literă mică, o literă mare, și cel puțin 8 caractere">
</fieldset>
<fieldset>
<legend>Preferințe</legend>
<label>
<input type="checkbox" id="newsletter" name="newsletter" value="da">
Abonează-mă la newsletter
</label>
<label for="sursa">Cum ai aflat despre noi?</label>
<select id="sursa" name="sursa">
<option value="">Selectează o opțiune</option>
<option value="search">Motor de căutare</option>
<option value="ad">Reclamă</option>
<option value="friend">Recomandare prieten</option>
<option value="other">Altă sursă</option>
</select>
</fieldset>
<button type="submit">Creează cont</button>
</form>
</body>
</html>
Acest cod CSS și HTML combinate vor crea un formular atractiv și ușor de utilizat. Iată câteva aspecte cheie ale stilizării:
- Layout responsiv: Formularul se adaptează la diferite dimensiuni de ecran.
- Spațiere consistentă: Marginile și padding-ul asigură o citire ușoară.
- Culori armonioase: O schemă de culori simplă dar eficientă îmbunătățește aspectul vizual.
- Efecte interactive: Hover și focus oferă feedback vizual utilizatorului.
- Grupare logică: Fieldset-urile și legendele ajută la organizarea informațiilor.
Aceste stiluri pot fi personalizate în continuare pentru a se potrivi cu designul general al site-ului dumneavoastră. Experimentați cu diferite culori, fonturi și efecte pentru a crea un aspect unic care să se potrivească cu identitatea brandului dumneavoastră.
Concluzii și bune practici
- Utilizați etichete semantice corespunzătoare pentru fiecare tip de input.
- Implementați validarea atât pe partea clientului (folosind atribute HTML5), cât și pe partea serverului.
- Asigurați-vă că formularele sunt accesibile, folosind etichete și atribute ARIA când este necesar.
- Testați formularele pe diferite dispozitive și browsere pentru a asigura o experiență consistentă.
- Oferiți feedback clar utilizatorilor atunci când completează sau trimit formularul.
- Mențineți formularele simple și cerețiq doar informațiile esențiale.
Prin implementarea corectă a formularelor HTML, veți îmbunătăți semnificativ interacțiunea utilizatorilor cu site-ul dumneavoastră, facilitând colectarea de informații într-un mod eficient și accesibil.
Lasă un răspuns