Formulare

Der HTML-Standard bietet verschiedenste Eingabefelder. Aufgrund dieser Vielfalt können Elemente nur sinnvoll gestaltet werden, wenn sie individuell behandelt werden. Daher werden im folgenden Abschnitt die Eingabefelder der Komponenten im Detail betrachtet.

Texteingaben

Einfache Eingabefelder

Die einfachste Form des Eingabefelds ist das <input>-Feld. HTML5 sieht hierfür verschiedenste Typen vor. Im einfachsten Fall handelt es sich dabei um den Typ <input type="text">. Durch die CSS-Klasse .form-input kann das gewünschte Aussehen und Verhalten angewendet werden.

Da Eingabefelder immer in Kombination mit einer Beschriftung erscheinen sollten, werden sie mit einem <div>-Tag mit der CSS-Klasse .form-input-set ummantelt. Es schafft die Anordnung von Eingabefeld und Beschriftung:

<div class="form-input-set"> 
  <label for="text1">Standard Eingabefeld</label> 
  <input type="text" class="form-input" name="text1" id="text1" placeholder="..."> 
</div>
Tipp: Das Attribut placehoder="Placeholder" sorgt für das Erscheinen eines Platzhaltertextes, wenn das Element leer ist. So kann der Benutzer gezeigt werden, was dort einzutragen ist. Hinweis: Das Placeholder-Attribut ist im Internet-Explorer kleiner Version 9 nicht verfügbar.

Mehrzeilige Eingabefelder

Für lange Texte ist in HTML der <textarea>-Tag vorgesehen. Da die Eingabe dem einfachen Eingabefeld sehr ähnelt, kann ebenfalls die CSS-Klasse .form-input angewendet werden:

<div class="form-input-set">
  <label for="text2">Lange Texteingabe</label>
  <textarea class="form-input" name="text2" id="text2">Lorem ipsum...</textarea>
</div>

Funktionale Dekorationen

Um dem Benutzer ein angemessenes Eingabe-Feedback zu bieten, werden verschiedene Dekorationen für Formularfelder angeboten. Die CSS-Klassen .decoration-positive, .decoration-warning und .decoration-negative werden dabei auf das umgebene <div>-Tag angewendet um auch das <label> beeinflussen zu können:

<!-- Erfolgreich Eingabefeld --> 
<div class="form-input-set decoration-positive">...</div> 

<!-- Warnung Eingabefeld --> 
<div class="form-input-set decoration-warning">...</div> 

<!-- Erfolglos Eingabefeld --> 
<div class="form-input-set decoration-negative">...</div> 

<!-- Inaktiv Eingabefeld --> 
<input type="text" class="form-input" name="text6" id="text6" disabled="disabled">
Anmerkung Barrierefreiheit: Die eingesetzen Farben haben im Zusammenhang mit Eingabefeldern meist die Funktion der visuellen Rückmeldung über eine getätigte Eingabe. Diese wird von Unterstützungstechnologien in der Regel nicht erkannt. Deshlab sollte zur visuellen Rückmeldung auch unbedingt eine textuelle Rückmeldung wie: "Dies ist ein Pflichtfeld, bitte geben Sie ihren Vornamen ein" oder ähnliches erfolgen.

Fieldsets

Um Eingabefelder logisch zusammenfassen ist das <fieldset>-Tag vorgesehen. Der <legend>-Tag sorgt dabei für die nötige Beschriftung der Gruppe:

Benutzerdaten 
<fieldset class="form-fieldset">
  <legend>Benutzerdaten</legend>
  ...
</fieldset>
Anmerkung: Das fieldset hat im Bezug auf die Größenberechnung je nach Browser unterschiedliche Verhalten. Ziel ist es meist, dass das Formular unabhängig von der umliegenden Seite in jedem Fall komplett und nicht bschnitten angezeigt wird. Das hat aber auch zur Folge, dass die CSS-Klasse .text-ellipsed innerhalb des fieldset nicht greift.

Checkbox

Für Checkboxen ist in HTML das Tag <input type="checkbox"> vorgesehen. Da es für Checkboxen bisher keine Möglichkeit gibt, ihnen mit einfachen CSS-Mitteln ein angemessenes Aussehen zu verleihen kommt Javascript zum Einsatz. Zunächst sollte über die Klasse .form-checkbox der Checkbox das Grundgerüst verliehen werden. Ein jQuery-Plugin sorgt nun für die nötige Modifikation:

$('.form-checkbox').checkbox()
Gruppen Beschriftung 
<fieldset class="form-fieldset">
  <legend>Gruppen Beschriftung</legend>
  <div class="form-checkbox-set">
    <label>
      <input type="checkbox" name="cb0" value="0" class="form-checkbox">foo
    </label>
  </div>
  <div class="form-checkbox-set">
    <label>
      <input type="checkbox" name="cb1" value="1" class="form-checkbox" selected>bar
    </label>
  </div>
  <div class="form-checkbox-set">
    <label>
      <input type="checkbox" name="cb2" value="2" class="form-checkbox" checked>Inaktiv
    </label>
  </div>
</fieldset>
Anmerkung: Werden Checkboxen dynamisch via Javascript oder über einen Ajax-Call hinzugefügt, muss das Plugin explizit auf die neuen Elemente angewand werden.

Radio

Da Radiobuttons meist in Gruppen auftreten sollten diese nur innerhalb eines <fieldset> vorkommen um so deren Zusammengehörigkeit zu visualisieren. Der <legend>-Tag beinhaltet dabei die Beschreibung der Gruppe.

Ein einzelener Radio-Button wird mit dem <input type="radio">-Tag erzeugt. Die CSS-Klasse .form-radio verleiht ihm das Grundgerüst und die grundelegenden Eigenschaften die alle Browser gemeinsam abbilden können.

Für eine optimale Darstellung gibt es auch für Radiobuttons ein jQuery-Plugin:

$('.form-radio').radio()
Gruppen Beschriftung 
<fieldset class="form-fieldset">
  <legend>Gruppen Beschriftung</legend>
    <div class="form-radio-set">
      <label>
        <input type="radio" name="rb" value="rb1" class="form-radio">foo
      </label>
    </div>
    <div class="form-radio-set">
      <label>
        <input type="radio" name="rb" value="rb2" class="form-radio" checked>bar
      </label>
    </div>
    <div class="form-radio-set">
      <label>
        <input type="radio" name="rb" value="rb3" class="form-radio" disabled>Inaktiv
      </label>
    </div>
</fieldset>

Select

<!-- Selectbox --> 
<div class="form-input-set"> 
  <label for="selectbox" title="Primäroptionen Auswahlliste">Selectbox</label> 
  <select name="select" id="selectbox" class="form-select"> 
    <option value="opt1">Option A</option> 
    <option value="opt2" selected>Option B</option> 
    <option value="opt3">Option C</option> 
    <option value="opt4" disabled>Option D (inaktiv)</option> 
  </select> 
</div> 

<!-- Selectbox (inaktiv) --> 
<div class="form-input-set"> 
  <label for="selectbox2" title="Sekundäroptionen Auswahlliste">Selectbox ( inaktiv )</label> 
  <select name="select2" id="selectbox2" class="form-select" disabled> 
    <option value="opt1">Option eins</option> 
    <option value="opt2">Option zwei</option> 
    <option value="opt3">Option drei</option> 
    <option value="opt4" disabled>Option vier (inaktiv)</option> 
  </select> 
</div>

Nähere Informationen zu Accessibility von Eingabe-Elementen im Artikel: SEO und Accessibility