CodeGym/Corsi/Frontend SELF IT/Raggruppamento degli elementi del form

Raggruppamento degli elementi del form

Disponibile

4.1 Elemento <fieldset>

Raggruppare gli elementi del form permette di unire logicamente gli elementi correlati, migliorando la struttura del form e rendendola più comoda per gli utenti. HTML fornisce due tag per raggruppare gli elementi del form: <fieldset> e <legend>.

L'elemento <fieldset> viene utilizzato per raggruppare gli elementi correlati all'interno di un <form>. Visivamente questo elemento viene generalmente mostrato come una cornice attorno agli elementi raggruppati, aiutando l'utente a capire quali campi appartengono a un gruppo.

Esempio di utilizzo:

In questo esempio vediamo due gruppi di elementi del form: "Personal Information" e "Account Details", ognuno dei quali è incorniciato da un elemento <fieldset> e dotato di un titolo <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("Per favore, completa tutti i campi");
    }
  });
</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>

Attributi principali di <fieldset>:

Attributo disabled: rende tutti gli elementi all'interno di un <fieldset> non accessibili all'utente (non possono essere modificati e non verranno inviati al server).

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 Elemento <legend>

L'elemento <legend> viene usato per aggiungere un titolo a un gruppo di elementi creato con il <fieldset>. Aiuta l'utente a capire lo scopo e il contesto del gruppo di campi del form.

Esempio di utilizzo:

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>

Caratteristiche dell'elemento <legend>:

  1. Posizionamento: l'elemento <legend> si trova sempre all'interno di un <fieldset>, e la sua posizione è generalmente nella parte superiore della cornice.
  2. Testo: il testo all'interno di <legend> descrive il gruppo di campi del form, aiutando gli utenti a orientarsi rapidamente nel form.

Consigli utili per l'uso di <fieldset> e <legend>

  • Raggruppamento logico: utilizza <fieldset> e <legend> per raggruppare logicamente gli elementi del form — questo renderà il form più organizzato e comprensibile per l'utente
  • Accessibilità: gli elementi <fieldset> e <legend> migliorano l'accessibilità del form, aiutando gli utenti che utilizzano tecnologie assistive a capire la struttura e il contenuto del form
  • Stile e decorazione: usa CSS per stilizzare <fieldset> e <legend> per migliorare l'aspetto del form

4.3 Esempi d'uso di <fieldset> e <legend>

Form di registrazione con raggruppamento dei campi:

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("Per favore, completa tutti i campi");
    }
  });
</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>

Form con diversi tipi di dati:

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("I campi Email e Phone devono essere compilati");
    }
  });
</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
Compito
Frontend SELF IT,  livello 8lezione 4
Bloccato
Modulo di registrazione
Modulo di registrazione
1
Compito
Frontend SELF IT,  livello 8lezione 4
Bloccato
Gruppo Disabilitato
Gruppo Disabilitato
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti