HTML/Tutorials/Formulare/Gliederung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das erste Suchformular enthält drei Elemente: Ein label-, ein input- und ein button-Element. Diese drei Elemente können gut in einer Zeile angeordnet werden. Aus Sicht der Dokumentstruktur ist das form-Element aber kein Textbaustein. Es gruppiert lediglich Eingabeelemente als zu einem gemeinsamen Datensatz gehörend.

Daher ist es wichtig, sich über sinnvolle Elemente zur Textstrukturierung und Gliederung größerer Formulare Gedanken zu machen.

Gruppierung mit fieldset

Mit dem fieldset-Element können Elemente innerhalb von Formularen gruppiert werden. Mit dem legend-Element kann zusätzlich eine Überschrift für das fieldset-Element definiert werden.

Das Element fieldset kann unter HTML5 folgende Attribute haben:

  • disabled: Mit dem Wert disabled kann das fieldset ausgegraut angezeigt und nicht auswählbar gemacht werden.
  • form: Mit dem Wert der id eines Formulars kann es diesem zugeordnet werden.
  • name: Durch den Namen kann es in einem verarbeitenden Script ausgewertet werden.


Beispiel ansehen …
<form id="gewinnen"> <h2>Ausfüllen und Gewinnen!</h2> <fieldset> <legend>Name</legend> <label for="vorname"> Vorname: <input name="vorname" id="vorname" placeholder="Max"> </label> <label for="zuname"> Zuname: <input name="zuname" id="zuname" placeholder="Mustermann"> </label> </fieldset> <fieldset> <legend>Geschlecht</legend> <label for="männl"> <input type="radio" name="geschlecht" id="männl" value="männl"> männlich </label> <label for="weibl"> <input type="radio" name="geschlecht" id="weibl" value="weibl"> weiblich </label> </fieldset> </form>
Das Formular erhält eine Beschreibung in einem label-Element, das über das form-Attribut mit der id des Formulars verknüpft ist.
Es ist mit fieldset-Elementen in zwei Blöcke gegliedert, die jede eine Erklärung in einem legend-Element haben.
Beachten Sie: Standardmäßig zeichnen die Browser einen Rahmen um das fieldset. Das legend-Element liegt genau auf diesem Rahmen. Allerdings können Sie dies zum Beispiel mit border: none auch anders festlegen.

Fortschrittsanzeige mit progress

Das progress-Element veranschaulicht einen Fortschritt einer Aktion etwa bei Bearbeitung eines Fragebogens in einer an Browser und Betriebssystem angepassten Darstellung. Progress bedeutet Fortschritt oder Verlauf.

Details: caniuse.com

Das progress-Element erwartet folgende Attribute:

  • max, gibt an, wieviele Schritte maximal möglich sind
  • value, Anzahl der abgearbeiteten Schritte

Dabei gelten folgende Regeln:

  • ein fehlendes max-Attribut wird mit dem Wert 1 initialisiert
  • der Wert des value-Attributs sollte kleiner als der des max-Attributes sein
Fortschrittsanzeige ansehen …
<form> <h1>Ein kleines Formular</h1> <label>Bitte geben Sie Ihren Namen ein: <input placeholder="Mustermann" onchange="aktualisiere_progressbar()"></label> <label>Bitte geben Sie Ihren Vornamen ein: <input placeholder="Max" onchange="aktualisiere_progressbar()"></label> <label>Bitte geben Sie Ihren Wohnort ein: <input placeholder="Köln" onchange="aktualisiere_progressbar()"></label> <label>Fortschritt: <progress id="fortschritt" value="0" max="3"></progress> </label> </form>
Das progress-Element wird innerhalb eines label-Elements platziert. Es enthält 3 Stufen, deren Anzahl im max-Attribut festgelegt ist.
      function aktualisiere_progressbar() {
	var anteil = 0;
	for (var k = 0; k < document.forms[0].elements.length; k++) { if (document.forms[0].elements[k].value != '') anteil++; }
	document.getElementById('fortschritt').value = anteil;
      }
Dieses Beispiel zeigt eine dynamische Anpassung des Fortschritts mit JavaScript.
Beachten Sie: Aus Gründen der Barrierefreiheit sollten Sie den aktuellen Status auch in den Inhalt des progress-Elementes schreiben.
Beispiel
<progress value="65" max="100">Stand der Abarbeitung: 65%</progress>


Das W3C empfiehlt als Standardabmessungen 10em Breite und 1em Höhe. In den meisten Browserstylesheets ist das auch so umgesetzt.

Ausblick

erweiterte Möglichkeiten

Die Spezifikation sieht vor dass in Abhängigkeit von den Abmessungen des progress-Elements verschiedene Darstellungen gerendert werden sollen.

  • height > width: Säulendiagramm (stehend)
  • height < width: Balkendiagramm (liegend)
  • height = width: Kreisdiagramm

Gliederung durch HTML-Markup

Hinweis:
Die folgenden Abschnitte behandeln die Frage, welches HTML-Markup Formulare erhalten sollten. Er ist für das Verständnis der folgenden Kapitel nicht unbedingt notwendig und kann daher auch übersprungen werden.

Gliederung durch Textabsatz

Da wir aus visueller Sicht eine einzige Zeile für das Suchformular erwarten, wäre ein Textabsatz bereits eine sinnvolle Lösung:

fertiges Suchformular für eine Google-Suche ansehen …
<form action="https://google.de/search">
  <p>
    <label for="q">Suchbegriff</label>
    <input id="q" name="q">
    <button>finden</button>
  </p>
</form>

Man kann sich nun streiten, ob der Textabsatz im Formular, oder das Formular im Textabsatz zu stehen habe. Für dieses konkrete Beispiel ist das völlig irrelevant, da beide Möglichkeiten gleichermaßen funktionieren:

fertiges Suchformular für eine Google-Suche - andere Code-Reihenfolge ansehen …
<p>
  <form action="https://google.de/search">
    <label for="q">Suchbegriff</label>
    <input id="q" name="q">
    <button>finden</button>
  </form>
</p>

Visuelle Gestaltungsmöglichkeiten aufgrund semantischen Codes

Will man ein Formular gestalten, benötigt man sowohl die Layoutsprache CSS, als auch eine Dokumentstruktur, die passende Elemente zum Gestalten anbietet. Notiert man beispielsweise alles in einer Zeile und sorgt ausschließlich mit br-Elementen für Zeilenumbrüche, so hebt man auf der einen Seite die wichtige Trennung zwischen Markup und Layout auf, indem man HTML-Elemente ausschließlich wegen ihrer (voreingestellten) Darstellung ins Dokument schreibt, und hat auf der anderen Seite nicht genügend Elemente im Dokument, für die man ausgeklügelte Darstellungsregeln in der Layoutsprache festlegen könnte. Es lohnt sich also sehr, semantisch sinnvolles Markup zu verwenden.

Wenden wir uns nun einem Login-Formular zu. Für dieses brauchen wir zwei Eingabefelder (1. Benutzername und 2. Passwort), sowie einen Submit-Button. Bereits hier stellt sich aber die Frage, wie man diese drei Elemente in eine sinnvolle Dokumentstruktur einbindet. Drei mögliche Ansätze seien hier einmal vorgestellt:

Der Klassiker aus den Urzeiten des Webs: Tabellenlayout

Login-Formular mit Tabelle ansehen …
<form action="login.php" method="post">
  <table>
    <tbody>
      <tr>
        <th>
          <label for="login">Benutzer</label>
        </th>
        <td>
          <input id="login" name="login">
        </td>
      </tr>
      <tr>
        <th>
          <label for="pass">Passwort</label>
        </th>
        <td>
          <input id="pass" name="pass" type="password">
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td>
          <button>anmelden</button>
        </td>
      </tr>
    </tbody>
  </table>
</form>
Diese Wahl der Dokumentstruktur ist nicht unbegründet, handelt es sich doch um tabellarische Daten: Benutzername bzw. Passwort und der jeweils zugehörende Wert. Problematisch wird diese Wahl beim Submit-Button. Er gehört nicht zu den tabellarischen Daten, wird in der Dokumentstruktur jedoch als Wert (deswegen zweite Spalte) ausgezeichnet, zu dem es keinen Namen (deswegen eine leere erste Zelle) gibt.

Listen anstelle von Tabellen

Eine elegantere Möglichkeit ist die Verwendung einer Liste. HTML bietet hierzu eine (un)geordnete Liste oder eine Definitionsliste an.

Login-Formular mit ungeordneter Liste ansehen …
<form action="login.php" method="post">
  <ul><!-- alternativ wäre <ol> für geordnete Liste -->
    <li>
      <label for="login">Benutzer</label>
      <input id="login" name="login">
    </li>
    <li>
      <label for="pass">Passwort</label>
      <input id="pass" name="pass" type="password">
    </li>
    <li>
      <button>anmelden</button>
    </li>
  </ul>
</form>
Der Reiz dieser Dokumentstruktur liegt in ihrem überschaubarerem Quelltext. Möchte man die Listenpunkte ohne Aufzählungszeichen (bei Verwendung von <ul>) bzw. ohne Nummerierung (bei Verwendung von <ol>) haben, so kann man mit der Gestaltungssprache CSS eine passende Darstellungsregel einsetzen.

Auch mit einer Definitionsliste lässt sich das Login-Formular sinnvoll auszeichnen:

Login-Formular mit Definitionsliste ansehen …
<form action="login.php" method="post">
  <dl>
    <dt>
      <label for="login">Benutzer</label>
    </dt>
    <dd>
      <input id="login" name="login">
    </dd>
    <dt>
      <label for="pass">Passwort</label>
    </dt>
    <dd>
      <input id="pass" name="pass" type="password">
    </dd>
    <dd>
      <button>anmelden</button>
    </dd>
  </dl>
</form>
Das Standard-Layout des Browsers sieht vor, dass eine Definitionsliste „hängend formatiert“ dargestellt wird. Das bedeutet, dass das dd-Element mit einer Einrückung vom linken Rand angezeigt wird. Außerdem stehen dt- und dd-Elemente jeweils in einer neuen Zeile. Will man das anders haben, muss man wieder CSS bemühen und andere Darstellungsregeln verwenden.

Wenn die Beschriftung den Gestalter stört

Beachten Sie: Eingabe-Elemente sollten Sie niemals ohne zugehörendes label-Element verwenden, da Sie sonst die Bedienbarkeit erschweren und Barrieren errichten.
Beachten Sie: Wenn Sie aus gestalterischen Gründen die Beschriftung entfernen wollen, achten Sie darauf, dass Sie dadurch Menschen mit Behinderungen nicht benachteiligen, die auf assistive Technologien angewiesen sind.
benutzerfreundliches Suchformular ohne sichtbare Beschriftung ansehen …
<form action="https://google.de/search">
  <p>
    <label for="q">Suchbegriff</label>
    <input id="q" name="q">
    <button>finden</button>
  </p>
</form>
label[for=q] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}
Das Label-Element bekommt hier eine Schriftgröße und eine Zeilenhöhe von Null zugewiesen. Screenreader oder Braillezeile geben es trotzdem aus.

Eine weitere Möglichkeit ist die Verwendung des Attributs aria-label.

benutzerfreundliches Suchformular ohne sichtbare Beschriftung ansehen …
<form action="https://google.de/search">
  <input id="q" name="q" aria-label="Suchbegriff">
  <button>finden</button>
</form>
Assistive Technologien „beschriften“ das Eingabefeld mit "Suchbegriff".

Man kann die Bedienbarkeit intuitiver gestalten, wenn man im Eingabefeld einen Platzhalter-Begriff eingibt. Das erreicht man mit dem placeholder-Attribut:

benutzerfreundliches Suchformular mit Beschriftung im Suchfeld ansehen …
<form action="https://google.de/search">
  <p>
    <label for="q">Suchbegriff</label>
    <input id="q" name="q" aria-label="Suchbegriff" placeholder="Suchbegriff">
    <button>finden</button>
  </p>
</form>
label[for=q] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}
Das placeholder-Attribut sorgt dafür, dass im Suchfeld bereits ein Begriff angezeigt wird, der aber sofort verschwindet, wenn der Benutzer eine Eingabe vornimmt. Der Inhalt des placeholder-Attributes ist selbst kein absendbarer Wert, sondern dient nur zur Beschriftung.


Siehe auch

Referenz:


Weblinks