Formularz HTML - grupowanie zawartości

Spójrzmy na następujący kod HTML:

<form action="./php/submit-result.php">
  <p>
    <label>
      Jakie jest Twoje imię?
      <input type="text" name="imie" required>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony kolor?
      <input type="text" name="ulubiony-kolor">
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Nasz przykładowy kod HTML reprezentuje formularz HTML, który z kolei reprezentowany jest przez element form.

W zawartości naszego przykładowego formularza HTML występują trzy elementy HTML, które mogą przechowywać informację wprowadzoną przez użytkownika.

Wspomnianymi elementami HTML są elementy input.

Jeżeli z jakiegoś powodu chcemy pogrupować tematycznie treść reprezentowaną przez zawartość interesującego nas formularza HTML (na przykład na dane wymagane oraz na dane niewymagane), wtedy do wspomnianego celu możemy wykorzystać elementy fieldset.

Ponadto dla każdej treści reprezentowanej przez zawartość elementu fieldset możemy określić nagłówek wykorzystując do tego celu element legend, który musi być pierwszym elementem dzieckiem elementu fieldset.

Przykład:

<form action="./php/submit-result.php">
  <fieldset>
    <legend>Dane wymagane</legend>
    <p>
      <label>
        Jakie jest Twoje imię?
        <input type="text" name="imie" required>
      </label>
    </p>
  </fieldset>

  <fieldset>
    <legend>Dane niewymagane</legend>
    <p>
      <label>
        Jaki jest Twój ulubiony kwiat?
        <input type="text" name="ulubiony-kwiat">
      </label>
    </p>

    <p>
      <label>
        Jaki jest Twój ulubiony kolor?
        <input type="text" name="ulubiony-kolor">
      </label>
    </p>
  </fieldset>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat: