Mură-n-gură

Formulare HTML: Interacțiunea cu utilizatorul (Curs HTML pentru începători, partea 4)

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 formularului
  • method: 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 completat
  • minlength și maxlength: Lungimea minimă și maximă a textului
  • min și max: Valori minime și maxime pentru câmpuri numerice
  • pattern: 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

  1. Folosiți întotdeauna etichete <label> asociate cu elementele de input.
  2. Grupați elementele logic folosind <fieldset> și <legend>.
  3. Furnizați mesaje de eroare clare și instrucțiuni pentru completarea formularului.
  4. 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:

  1. Layout responsiv: Formularul se adaptează la diferite dimensiuni de ecran.
  2. Spațiere consistentă: Marginile și padding-ul asigură o citire ușoară.
  3. Culori armonioase: O schemă de culori simplă dar eficientă îmbunătățește aspectul vizual.
  4. Efecte interactive: Hover și focus oferă feedback vizual utilizatorului.
  5. 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

  1. Utilizați etichete semantice corespunzătoare pentru fiecare tip de input.
  2. Implementați validarea atât pe partea clientului (folosind atribute HTML5), cât și pe partea serverului.
  3. Asigurați-vă că formularele sunt accesibile, folosind etichete și atribute ARIA când este necesar.
  4. Testați formularele pe diferite dispozitive și browsere pentru a asigura o experiență consistentă.
  5. Oferiți feedback clar utilizatorilor atunci când completează sau trimit formularul.
  6. 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.

Comentarii

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *