html mit Adi Prinz

Eine Feldgruppe erstellen

Das fieldset-Element umschließt mehrere inhaltlich zusammengehörige Formularfelder. Browser stellen diese Gruppe normalerweise mit einem Rahmen dar.

<fieldset>
  <label for="vorname">Vorname:</label>

  <input
    type="text"
    id="vorname"
    name="vorname">

  <label for="nachname">Nachname:</label>

  <input
    type="text"
    id="nachname"
    name="nachname">
</fieldset>
    

Ein fieldset dient nicht nur der optischen Gestaltung. Es beschreibt auch die inhaltliche Beziehung zwischen den enthaltenen Formularfeldern.

Eine Gruppenüberschrift hinzufügen

Das legend-Element benennt den Zweck einer Feldgruppe. Es sollte direkt am Anfang des fieldset-Elements stehen.

<fieldset>
  <legend>Persönliche Daten</legend>

  <label for="name">Name:</label>

  <input
    type="text"
    id="name"
    name="name">

  <label for="email">E-Mail-Adresse:</label>

  <input
    type="email"
    id="email"
    name="email">
</fieldset>
    

Die Gruppenüberschrift hilft besonders bei der Bedienung mit Screenreadern. Beim Erreichen eines Feldes kann dadurch auch der Zusammenhang mit der gesamten Gruppe vermittelt werden.

Optionsfelder verständlich gruppieren

Bei einer Gruppe von Optionsfeldern beschreibt legend die gemeinsame Frage. Die einzelnen label-Elemente benennen die möglichen Antworten.

<fieldset>
  <legend>Gewünschte Kontaktart</legend>

  <input
    type="radio"
    id="kontakt-email"
    name="kontaktart"
    value="email">

  <label for="kontakt-email">
    E-Mail
  </label>

  <input
    type="radio"
    id="kontakt-telefon"
    name="kontaktart"
    value="telefon">

  <label for="kontakt-telefon">
    Telefon
  </label>
</fieldset>
    

Ein einzelnes label für die gesamte Gruppe reicht nicht aus. Die gemeinsame Frage gehört in legend; jede Antwort benötigt zusätzlich ihr eigenes label.

Zusammengehörige Checkboxen gruppieren

Auch mehrere Checkboxen können mit fieldset und legend als gemeinsame Auswahlgruppe ausgezeichnet werden.

<fieldset>
  <legend>Gewünschte Unterlagen</legend>

  <input
    type="checkbox"
    id="unterlage-skript"
    name="unterlagen[]"
    value="skript">

  <label for="unterlage-skript">
    Kursskript
  </label>

  <input
    type="checkbox"
    id="unterlage-beispiele"
    name="unterlagen[]"
    value="beispiele">

  <label for="unterlage-beispiele">
    Übungsbeispiele
  </label>
</fieldset>
    

Ein Formular in mehrere Bereiche gliedern

Ein umfangreiches Formular kann mehrere fieldset-Elemente enthalten. Dadurch werden unterschiedliche Themenbereiche klar voneinander getrennt.

<form action="anmeldung.php" method="post">
  <fieldset>
    <legend>Persönliche Daten</legend>

    <!-- Eingabefelder -->
  </fieldset>

  <fieldset>
    <legend>Kursauswahl</legend>

    <!-- Optionsfelder -->
  </fieldset>

  <button type="submit">
    Anmeldung absenden
  </button>
</form>
    

Feldgruppen sollten nach ihrem Inhalt gebildet werden. Ein fieldset nur zur Erzeugung eines Rahmens zu verwenden, ist nicht sinnvoll.

Eine vollständige Feldgruppe deaktivieren

Mit dem booleschen Attribut disabled kann ein vollständiges fieldset deaktiviert werden. Die darin enthaltenen Formularfelder können dann normalerweise nicht bedient werden.

<fieldset disabled>
  <legend>Zusätzliche Rechnungsadresse</legend>

  <label for="rechnungsstrasse">
    Straße:
  </label>

  <input
    type="text"
    id="rechnungsstrasse"
    name="rechnungsstrasse">

  <label for="rechnungsort">
    Ort:
  </label>

  <input
    type="text"
    id="rechnungsort"
    name="rechnungsort">
</fieldset>
    

Die Felder eines deaktivierten fieldset-Elements werden beim Absenden normalerweise nicht übertragen.

Feldgruppen verschachteln

fieldset-Elemente dürfen grundsätzlich ineinander verschachtelt werden. Das kann bei umfangreichen Formularen sinnvoll sein, sollte aber nur bei einer klaren inhaltlichen Unterteilung verwendet werden.

<fieldset>
  <legend>Kursanmeldung</legend>

  <fieldset>
    <legend>Kurs</legend>

    <!-- Kursauswahl -->
  </fieldset>

  <fieldset>
    <legend>Termin</legend>

    <!-- Terminauswahl -->
  </fieldset>
</fieldset>
    

Zu viele verschachtelte Ebenen können ein Formular unübersichtlich machen. Häufig sind mehrere nebeneinanderstehende Feldgruppen verständlicher.

Praxisbeispiel: Kursanmeldung

Die persönlichen Daten, die Kursauswahl und die zusätzlichen Unterlagen bilden jeweils eine eigene, verständlich beschriftete Feldgruppe. Das Absenden wird im Lernbeispiel verhindert; die HTML-Validierung kann trotzdem ausprobiert werden.

Ein Feld einem Formular zuordnen

Das form-Element erhält eine eindeutige id. Ein außerhalb stehendes Formularfeld verweist mit seinem form-Attribut auf diese ID.

<form
  id="kontaktformular"
  action="kontakt.php"
  method="post">

  <label for="name">Name:</label>

  <input
    type="text"
    id="name"
    name="name">
</form>

<label for="email">E-Mail-Adresse:</label>

<input
  type="email"
  id="email"
  name="email"
  form="kontaktformular">
    

Obwohl das E-Mail-Feld außerhalb des Formulars steht, gehört es zum Formular mit der ID kontaktformular. Sein Wert wird beim Absenden dieses Formulars mitübertragen.

Die Verknüpfung erfolgt über die ID

Der Wert des form-Attributs muss exakt mit der id des gewünschten Formulars übereinstimmen.

<form id="bestellung">
  <!-- Formularfelder -->
</form>

<input
  type="text"
  name="gutscheincode"
  form="bestellung">
    

Die Zuordnung erfolgt nicht über das name-Attribut des Formulars, sondern ausschließlich über dessen id.

Eine ID darf innerhalb einer HTML-Seite nur einmal vorkommen. Dadurch bleibt die Zuordnung eindeutig.

Ein zugeordnetes Feld ausprobieren

Das E-Mail-Feld und die Schaltfläche stehen außerhalb des form-Elements. Durch form="beispiel-registrierung" gehören sie trotzdem zu diesem Formular. Auch das externe Pflichtfeld wird bei der HTML-Validierung geprüft.

Eine Schaltfläche einem Formular zuordnen

Auch eine Submit- oder Reset-Schaltfläche kann außerhalb des Formulars angeordnet und mit dem form-Attribut zugeordnet werden.

<form
  id="anmeldung"
  action="anmeldung.php"
  method="post">

  <label for="benutzername">
    Benutzername:
  </label>

  <input
    type="text"
    id="benutzername"
    name="benutzername"
    required>
</form>

<button
  type="submit"
  form="anmeldung">
  Anmeldung absenden
</button>

<button
  type="reset"
  form="anmeldung">
  Eingabe zurücksetzen
</button>
    

Die Submit-Schaltfläche sendet das zugeordnete Formular ab. Die Reset-Schaltfläche setzt die Felder dieses Formulars auf ihre ursprünglichen Werte zurück.

Zwischen mehreren Formularen unterscheiden

Befinden sich mehrere Formulare auf einer Seite, kann jedes externe Feld gezielt einem dieser Formulare zugeordnet werden.

<form id="lieferadresse">
  <!-- Felder der Lieferadresse -->
</form>

<form id="rechnungsadresse">
  <!-- Felder der Rechnungsadresse -->
</form>

<input
  type="text"
  name="lieferhinweis"
  form="lieferadresse">

<input
  type="text"
  name="rechnungsnummer"
  form="rechnungsadresse">
    

Jedes Formularfeld kann mit dem form-Attribut nur einem bestimmten Formular zugeordnet werden.

Elemente mit form-Attribut

Das form-Attribut kann bei verschiedenen Formularelementen verwendet werden.

• button
• fieldset
• input
• object
• output
• select
• textarea

Das label-Element wird weiterhin über sein for-Attribut mit der ID des zugehörigen Formularfeldes verbunden. Es verwendet dafür nicht das form-Attribut.

Ein fieldset einem Formular zuordnen

Auch ein fieldset kann außerhalb eines Formulars stehen und über das form-Attribut einem Formular zugeordnet werden.

<form
  id="kursanmeldung"
  action="anmeldung.php"
  method="post">
</form>

<fieldset form="kursanmeldung">
  <legend>Kursauswahl</legend>

  <input
    type="radio"
    id="kurs-html"
    name="kurs"
    value="html">

  <label for="kurs-html">
    HTML
  </label>
</fieldset>
    

Wichtig: Die Zuordnung des fieldset-Elements wird nicht automatisch auf seine enthaltenen Formularfelder übertragen. Die einzelnen Felder benötigen gegebenenfalls ebenfalls ein passendes form-Attribut.

Formulareigenschaften mit Schaltflächen überschreiben

Eine zugeordnete Submit-Schaltfläche kann einzelne Einstellungen des Formulars für diesen Absendevorgang überschreiben.

<form
  id="beitrag"
  action="speichern.php"
  method="post">

  <label for="beitrag-titel">Titel:</label>

  <input
    type="text"
    id="beitrag-titel"
    name="titel"
    required>
</form>

<button
  type="submit"
  form="beitrag">
  Speichern
</button>

<button
  type="submit"
  form="beitrag"
  formaction="vorschau.php"
  formtarget="_blank">
  Vorschau
</button>
    

• formaction – bestimmt das Übertragungsziel
• formmethod – bestimmt die Übertragungsmethode
• formenctype – bestimmt die Codierungsart
• formtarget – bestimmt das Zielfenster
• formnovalidate – überspringt die integrierte Validierung

Praxisbeispiel: Formular mit externer Steuerung

Der Textbereich und beide Schaltflächen befinden sich außerhalb des form-Elements. Das form-Attribut verbindet sie trotzdem mit dem Profilformular.