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.