Corso di HTML / Organizzare i moduli con fieldset, legend e autocomplete

Usate fieldset per raggruppare gli elementi del modulo correlati e legend per indicare la domanda del gruppo. Per campi come il nome o l'indirizzo e-mail di una persona, un appropriato token autocomplete può indicare al browser quali informazioni il campo richiede.

Raggruppare una domanda con fieldset e legend

Le singole etichette dei pulsanti di opzione descrivono le risposte, ma gli utenti hanno bisogno anche della domanda a cui appartengono queste risposte. legend fornisce questo nome del gruppo. Confrontate gli input radio e checkbox, inclusi i controlli non selezionati, in Selezione dei tipi di input per email, numeri, date e opzioni.

<fieldset>
  <legend>Come possiamo contattarti?</legend>
  <label><input type="radio" name="contact" value="email"> E-mail</label>
  <label><input type="radio" name="contact" value="phone"> Telefono</label>
</fieldset>

Aprite l'esempio in un browser: per impostazione predefinita, possono apparire un bordo e un'etichetta. Il CSS può modificare questa visualizzazione senza rimuovere la relazione. Entrambi i pulsanti radio condividono name="contact", quindi selezionare un'opzione annulla la selezione dell'altra. Usate un fieldset separato per un'altra domanda e un nome di gruppo di pulsanti radio diverso; altrimenti, selezionare una risposta in una domanda potrebbe deselezionare una risposta in un'altra.

Descrivere lo scopo di un campo con autocomplete

<form action="/contact" method="post">
  <fieldset>
    <legend>Dati di contatto</legend>
    <label for="full-name">Nome completo</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">Indirizzo e-mail</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">Invia</button>
</form>

autocomplete="name" e autocomplete="email" descrivono gli obiettivi dei campi. Non impostano un valore fisso e non trasmettono informazioni a nome dell'utente. La presenza di un suggerimento dipende dalle impostazioni del browser e dalle informazioni memorizzate. L'attributo name è la chiave lato server; il token autocomplete è un'indicazione dello scopo previsto dell'input. /contact è un percorso illustrativo e richiede un gestore lato server. Un obiettivo di completamento automatico non sostituisce l'associazione di etichetta e ID descritta in collegare correttamente label e input .

Testare gruppi indipendenti e obiettivi di input

Salvate il documento come groups.html e selezionate E-mail e Mattina. Entrambe le selezioni dovrebbero coesistere, poiché i gruppi utilizzano valori di nome diversi.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Esercizio sui gruppi</title>
</head>
<body>
  <h1>Rispondi a due domande indipendenti</h1>
  <form id="groups-form" method="get">
    <fieldset>
      <legend>Opzione di contatto</legend>
      <label><input type="radio" name="contact" value="email" required> E-mail</label>
      <label><input type="radio" name="contact" value="phone"> Telefono</label>
    </fieldset>
    <fieldset>
      <legend>Orario di visita</legend>
      <label><input type="radio" name="visit" value="morning" required> Mattina</label>
      <label><input type="radio" name="visit" value="afternoon"> Pomeriggio</label>
    </fieldset>
    <button type="submit">Controlla le due risposte</button>
  </form>
</body>
</html>

Sostituite temporaneamente name="visit" con name="contact" in entrambi i campi di opzione del gruppo di visita. Se selezionate una risposta, quella dell'altra domanda viene deselezionata: lo stesso name definisce il gruppo radio. Ripristinate name="visit" dopo il confronto.

Scegliete un token che corrisponde alle informazioni richieste. autocomplete="postal-code" non convalida il formato del codice postale e un browser senza dati salvati potrebbe non riuscire a mostrare suggerimenti.

Verificare raggruppamento e completamento automatico

Non inserite domande non pertinenti nello stesso fieldset e non distribuite una domanda a scelta singola senza un nome di gruppo. Utilizzate invece i token autocomplete definiti al posto di parole qualsiasi. Provate due gruppi indipendenti di campi opzionali: se la selezione di una risposta nel secondo gruppo cancella la prima, probabilmente i loro valori name coincidono accidentalmente. La funzione di completamento automatico non verifica i dati degli utenti, e i moduli che raccolgono dati personali richiedono sempre pratiche adeguate di sicurezza e privacy. Consultate la documentazione MDN autocomplete e il riferimento fieldset.