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>
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">
Fieldsets¶ ↑
Um Eingabefelder logisch zusammenfassen ist das <fieldset>
-Tag vorgesehen. Der <legend>
-Tag sorgt dabei für die nötige Beschriftung der Gruppe:
<fieldset class="form-fieldset"> <legend>Benutzerdaten</legend> ... </fieldset>
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.