CodeGym/Kursy/Frontend SELF PL/Grupowanie elementów formularza

Grupowanie elementów formularza

Dostępny

4.1 Element <fieldset>

Grupowanie elementów formularza pozwala logicznie połączyć powiązane elementy, co poprawia strukturę formularza i czyni go bardziej przyjaznym dla użytkowników. HTML oferuje dwa tagi do grupowania elementów formularza: <fieldset> i <legend>.

Element <fieldset> służy do grupowania powiązanych elementów formularza wewnątrz <form>. Wizualnie ten element zazwyczaj wyświetla się jako ramka wokół grupowanych elementów, co pomaga użytkownikowi zrozumieć, które pola należą do jednej grupy.

Przykład użycia:

W tym przykładzie widzimy dwie grupy elementów formularza: "Personal Information" i "Account Details", każda z nich otoczona elementem <fieldset> i zaopatrzona w nagłówek <legend>.

HTML
<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </fieldset>
  <fieldset>
    <legend>Account Details</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
  </fieldset>
  <button type="submit" id="submit">Submit</button>
</form>
<script>
  const inputs = document.getElementsByTagName("input");
  const submit = document.getElementById("submit");

  submit.addEventListener("click", (e) => {
    e.preventDefault();

    const values = [];
    let allValid = true;

    for (let input of inputs) {
      if (!input.validity.valid) {
        allValid = false;
        break;
      }
      values.push(input.value);
    }

    if (allValid) {
      alert(
        "Personal Information:\n" +
        `Name: ${values[0]}\n` +
        `Email: ${values[1]}\n\n` +
        "Account Details:\n" +
        `Username: ${values[2]}\n` +
        `Password: ${values[3]}`
      );
    } else {
      alert("Proszę wypełnić wszystkie pola");
    }
  });
</script>
HTML
<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  <fieldset>
    <legend>Account Details</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </fieldset>
  <input type="submit" value="Submit">
</form>

Podstawowe atrybuty <fieldset>:

Atrybut disabled: sprawia, że wszystkie elementy wewnątrz <fieldset> stają się niedostępne dla użytkownika (nie można ich zmieniać i nie zostaną wysłane do serwera).

HTML
<fieldset disabled>
  <legend>Disabled Group</legend>
  <label for="disabled-field">This field is disabled:</label>
  <input type="text" id="disabled-field" name="disabled-field">
</fieldset>

4.2 Element <legend>

Element <legend> służy do dodania nagłówka do grupy elementów utworzonej za pomocą <fieldset>. Pomaga użytkownikowi zrozumieć cel i kontekst grupy pól formularza.

Przykład użycia:

HTML
<fieldset>
  <legend>Contact Information</legend>
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone">
  <label for="address">Address:</label>
  <input type="text" id="address" name="address">
</fieldset>

Właściwości elementu <legend>:

  1. Pozycja: element <legend> zawsze znajduje się wewnątrz <fieldset>, a jego pozycja zwykle znajduje się na górze ramki.
  2. Tekst: tekst wewnątrz <legend> opisuje grupę pól formularza, co pomaga użytkownikom szybko się zorientować w formularzu.

Przydatne wskazówki dotyczące używania <fieldset> i <legend>

  • Logiczne grupowanie: używaj <fieldset> i <legend> do logicznego grupowania elementów formularza – to sprawi, że formularz będzie bardziej zorganizowany i zrozumiały dla użytkownika
  • Dostępność: elementy <fieldset> i <legend> poprawiają dostępność formularza, pomagając użytkownikom, którzy używają technologii wspomagających, zrozumieć strukturę i zawartość formularza
  • Styl i wygląd: używaj CSS do stylizacji <fieldset> i <legend> aby poprawić wygląd formularza

4.3 Przykłady użycia <fieldset> i <legend>

Formularz rejestracji z grupowaniem pól:

HTML
<form form action="/submit" method="post">
  <fieldset>
    <legend>Personal Details</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" required>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" required>
  </fieldset>
  <fieldset>
    <legend>Login Information</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
  </fieldset>
  <button type="submit" id="submit">Submit</button>
</form>
<script>
  const inputs = document.getElementsByTagName("input");
  const submit = document.getElementById("submit");

  submit.addEventListener("click", (e) => {
    e.preventDefault();

    const values = [];
    let allValid = true;

    for (let input of inputs) {
      if (!input.validity.valid) {
        allValid = false;
        break;
      }
      values.push(input.value);
    }

    if (allValid) {
      alert(
        "Personal Details:\n" +
        `First name: ${values[0]}\n` +
        `Last Name: ${values[1]}\n\n` +
        "Login information:\n" +
        `Username: ${values[2]}\n` +
        `Password: ${values[3]}`
      );
    } else {
      alert("Proszę wypełnić wszystkie pola");
    }
  });
</script>
HTML
<form>
  <fieldset>
    <legend>Personal Details</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname">
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname">
  </fieldset>
  <fieldset>
    <legend>Login Information</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </fieldset>
  <input type="submit" value="Register">
</form>

Formularz z różnymi typami danych:

HTML
<form action="/auth" method="post">
  <fieldset>
    <legend>Contact Information</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" required>
  </fieldset>
  <fieldset>
    <legend>Preferences</legend>
    <label for="newsletter">Subscribe to newsletter:</label>
    <input type="checkbox" id="newsletter" name="newsletter">
    <label for="updates">Receive updates:</label>
    <input type="checkbox" id="updates" name="updates">
  </fieldset>
  <button type="submit" id="submit">Submit</button>
</form>
<script>
  const form = document.querySelector("form");
  const inputs = form.querySelectorAll("input");
  const submit = document.getElementById("submit");

  submit.addEventListener("click", (e) => {
    e.preventDefault();

    let email = "";
    let phone = "";
    let newsletter = 0;
    let updates = 0;
    let allValid = true;

    inputs.forEach((input) => {
      if (input.type === "email" && (!input.validity.valid)) {
        allValid = false;
      } else if (input.type === "tel" && (!input.validity.valid)) {
        allValid = false;
      }

      if (input.type === "email") {
        email = input.value;
      } else if (input.type === "tel") {
        phone = input.value;
      } else if (input.type === "checkbox") {
        if (input.id === "newsletter") {
          newsletter = input.checked ? 1 : 0;
        } else if (input.id === "updates") {
          updates = input.checked ? 1 : 0;
        }
      }
    });

    if (allValid) {
      alert(
        "Contact Information\n" +
        `Email: ${email}\n` +
        `Phone Number: ${phone}\n\n` +
        "Preferences\n" +
        `Subscribe to newsletter: ${newsletter}\n` +
        `Receive updates: ${updates}`
      );
    } else {
      alert("Pola Email i Phone muszą być wypełnione");
    }
  });
</script>
HTML
<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
  <fieldset>
    <legend>Preferences</legend>
    <label for="newsletter">Subscribe to newsletter:</label>
    <input type="checkbox" id="newsletter" name="newsletter">
    <label for="updates">Receive updates:</label>
    <input type="checkbox" id="updates" name="updates">
  </fieldset>
  <input type="submit" value="Submit">
</form>
CSS
fieldset {
  border: 2px solid #ccc;
  padding: 20px;
}

legend {
  font-weight: bold;
  padding: 0 10px;
}
1
Zadanie
Frontend SELF PL,  poziom 8lekcja 4
Niedostępne
Formularz rejestracji
Formularz rejestracji
1
Zadanie
Frontend SELF PL,  poziom 8lekcja 4
Niedostępne
Wyłączona grupa
Wyłączona grupa
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy