HTML-Kurs / Formulare mit fieldset, legend und autocomplete gliedern

Verwenden Sie fieldset, um zugehörige Formularelemente zu gruppieren, und legend, um die Frage der Gruppe anzugeben. Für Felder wie den Namen oder die E-Mail-Adresse einer Person kann ein passendes autocomplete-Token dem Browser anzeigen, welche Informationen das Feld erfragt.

Fassen Sie eine Frage mit fieldset und legend zusammen

Die einzelnen Beschriftungen der Optionsfelder beschreiben die Antworten, aber die Benutzer benötigen auch die Frage, zu der diese Antworten gehören. legend liefert diesen Gruppennamen. Vergleichen Sie die Radio- und Checkbox-Eingaben, einschließlich nicht ausgewählter Steuerelemente, in Auswahl der Eingabetypen für E-Mails, Zahlen, Daten und Auswahlmöglichkeiten.

<fieldset>
  <legend>Wie können wir Sie kontaktieren?</legend>
  <label><input type="radio" name="contact" value="email"> E-Mail</label>
  <label><input type="radio" name="contact" value="phone"> Telefon</label>
</fieldset>

Öffnen Sie das Beispiel in einem Browser: standardmäßig können ein Rahmen und eine Beschriftung erscheinen. Das CSS kann diese Anzeige ändern, ohne die Beziehung zu entfernen. Beide Radio-Buttons teilen name="contact", daher hebt die Auswahl einer Option die Auswahl der anderen auf. Verwenden Sie ein separates fieldset für eine andere Frage und einen anderen Radio-Button-Gruppennamen; andernfalls könnte die Auswahl einer Antwort in einer Frage eine Antwort in einer anderen löschen.

Beschreiben Sie das Ziel eines Eingabefeldes mit Autovervollständigung

<form action="/contact" method="post">
  <fieldset>
    <legend>Kontaktdaten</legend>
    <label for="full-name">Vollständiger Name</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">E-Mail-Adresse</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">Senden</button>
</form>

autocomplete="name" und autocomplete="email" beschreiben die Ziele der Felder. Sie legen keinen festen Wert fest und übermitteln keine Informationen im Namen des Benutzers. Das Vorhandensein eines Vorschlags hängt von den Browsereinstellungen und den gespeicherten Informationen ab. Das Attribut name ist der serverseitige Schlüssel; das Token autocomplete ist ein Hinweis auf den vorgesehenen Verwendungszweck der Eingabe. /contact ist ein illustrativer Pfad und erfordert einen serverseitigen Handler. Ein automatisches Ausfüllziel ersetzt nicht die in label und input richtig verknüpfen beschriebene Zuordnung von Label und ID.

Unabhängige Gruppen und Eingabeziele testen

Speichern Sie als groups.html und wählen Sie E-Mail und Vormittag. Beide Auswahlen sollten koexistieren, da die Gruppen unterschiedliche Namenswerte verwenden.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Übung zu den Gruppen</title>
</head>
<body>
  <h1>Beantworten Sie zwei unabhängige Fragen</h1>
  <form id="groups-form" method="get">
    <fieldset>
      <legend>Kontaktmöglichkeit</legend>
      <label><input type="radio" name="contact" value="email" required> E-Mail</label>
      <label><input type="radio" name="contact" value="phone"> Telefon</label>
    </fieldset>
    <fieldset>
      <legend>Besuchszeit</legend>
      <label><input type="radio" name="visit" value="morning" required> Morgen</label>
      <label><input type="radio" name="visit" value="afternoon"> Nachmittag</label>
    </fieldset>
    <button type="submit">Überprüfen Sie die beiden Antworten</button>
  </form>
</body>
</html>

Ersetzen Sie vorübergehend name="visit" durch name="contact" bei beiden Optionsfeldern der Besuchsgruppe. Wenn Sie eine Antwort wählen, wird die der anderen Frage gelöscht: Das gleiche name definiert die Radio-Gruppe. Stellen Sie name="visit" nach dem Vergleich wieder her.

Wählen Sie ein Token aus, das den angeforderten Informationen entspricht. autocomplete="postal-code" validiert das Postleitzahlenformat nicht, und ein Browser ohne gespeicherte Informationen kann möglicherweise keine Vorschläge anzeigen.

Gruppierung und automatische Vervollständigung überprüfen

Setzen Sie keine themenfremden Fragen in dasselbe Fieldset, und verteilen Sie eine Frage mit einfacher Auswahl nicht ohne Gruppennamen. Verwenden Sie stattdessen die definierten autocomplete-Tokens anstelle von beliebigen Wörtern. Testen Sie zwei unabhängige Gruppen von Optionsfeldern: Wenn die Auswahl einer Antwort in der zweiten Gruppe die erste löscht, stimmen ihre name-Werte wahrscheinlich versehentlich überein. Die automatische Ausfüllfunktion überprüft keine Benutzerdaten, und Formulare, die persönliche Daten sammeln, erfordern stets angemessene Sicherheits- und Datenschutzpraktiken. Siehe die Referenz MDN autocomplete und die Referenz fieldset.