CSS, HTML und Javascript mit {stil}

HTML-Attribute für input

HTML fieldset

Attribute für input-Felder wie autofocus, step und pattern verbessern die Benutzerschnittstelle.

Seit HTML 5 kann den Fokus beim Laden des Formulars auch ohne Javascript direkt in ein Eingabefeld legen, eine Werteliste als Vorschlag bei einem Eingabefeld unterbreiten und den Bereich für die Eingabe von Zahlen einschränken.

Die neuen Attribute sparen Javascript-Validierungen und erleichtern dem Benutzer die Eingabe korrekter Werte. Das heißt nicht, dass die serverseitige Prüfung auf valide Einfabewerte entfallen kann. Auf der Client-Seite geht es vielmehr darum, dem Benutzer bei falschen Eingaben schnell mit Korrekturen und Hilfen beiseite zu stehen.

Unter dieser Prämisse können wir input-Typen wie type=range und Attribute wie placeholder und autofocus heute bereits einsetzen. Wenn ein Browser das Attribut nicht unterstützt, überliest er es einfach. In den modernen Browsern helfen die neuen Attribute dem Benutzer auf die Sprünge.

autofocus

ein Feld, das beim Laden der Seite den Fokus erhält. Das haben wir bisher mit einem Javascript gemacht:

window.onload = document.getElementById('focusThis').focus();

HTML5 bringt autofocus als Attribut ins input-Tag.

HTML5 Fokus auf ein Eingabefeld setzen
<input autofocus type="text" value="" /> 

autocomplete

Eingaben in Formularfelder werden für eine erneute Nutzung gespeichert.

input autocomplete steuert das Speichern der Benutzereingaben in individuelle Formularfelder. autocomplete kann aktiviert oder deaktiviert werden. Passwörter werden nicht gespeichert.

Die meisten Browser bieten diesen Dienst bereits heute. autocomplete="off" unterbindet das Speichern der Eingaben.

<input name="account" type="text" id="account" autocomplete="off" />

disabled

disabled deaktiviert das Eingabefeld, so dass der Benutzer keine weiteren Eingaben oder Änderungen vornehmen kann.

<input type="text" disabled value="Keine weitere Eingabe" />
<select disabled>
    <option>Obst</option>
    <option>Gemüse</option>
    <option>Milch</option>
    <option>Butter</option>
</select>

HTML5 form-Attribut

In HTML4 und XHTML verursachte ein Eingabefeld, das nicht innerhalb des form-Tags lag, Probleme: Die Daten des Feldes wurden beim Absenden des Formulars nicht zusammen mit den Formulardaten an den Server übermittelt.

Dann musste das Name-Wert-Paar des ausgeschlossenen Eingabefelds mit Javascript an den Query-String angefügt werden. Keine schöne Operation …

<form action="form.php" id="myForm" method="form">
    <input type="text" name="formatt" value="" placeholder="Schreib was">
    <input type="submit" value="senden">
</form>

<textarea name="feld1" form="myForm"></textarea>
<input type="text" name="feld2" form="myForm" value="">

Das form-Attribut aus HTML5 verbindet Eingabefelder mit einem oder mehreren Formularen. Wenn eines der Eingabefelder jetzt außerhalb des <form>-Tags liegt, wird sein Name-Wert-Paar mit an den Server übertragen.

Array
(
    [formatt] => Peter Pan
    [feld1] => Schwefel und Galle! Schweigt ihr Hunde. Sonst versenke ich den Anker in euch.
    [feld2] => Tick Tack Tick Tack
)

list / datalist

Das list-Attribut für input-Felder verweist auf eine Liste von vorgegebenen Werten. Anders als beim select-Feld kann der Benutzer bei einer Liste auch eigene Werte eingeben.

Ein datalist-Tag führt die mögichen Werte auf und ist über die id mit dem list-Attribut des input-Tags verbunden.

<input type="text" list="dliste" value="" />

<datalist id="dliste">
    <option value="Butter">
    <option value="Bier">
    <option value="Brot">
    <option value="Milch">
    …
</datalist>

Opera zeigt die Optionen an, wenn das Eingabefeld in den Fokus kommen. Das sieht so aus:

In den Einkaufskorb Butter Bier Brot Milch Magerquark

Chrome und Firefox zeigen die Optionen, wenn die Taste ↓ gedrückt wird. Beide Browser fügen aber die Optionen zum Autocomplete hinzu. Safari hält sich raus.

min / max / step

min, max und step sind Steuerelemente für die Eingabe von Zahlen. Sie legen das Minimum / Maximum (z.B. von -5 bis 5) und die Schrittweite (z.B. 5 oder 0.2) fest.

Das Schöne am Eingabefeld input type="range": range beschränkt die Eingabe auf bestimmte Zahlen.

Normales Eingabefeld

<input type="text" />

Eingabefeld für Zahlen

<input type="number" step="5" />

Range

<input type="range" min="-5" max="5" />

Range

<input type="range" min="-5" max="5" step="0.2" />

Range

<input type="range" min="-5.0" max="5.0" step="0.5" />

Die kleinen Anfasser sind eine Barriere auf kleinen Monitoren. Das Erscheinungsbild von input type range kann mit CSS geändert werden.

pattern

Eingaben durch reguläre Ausdrücke auf bestimmte Eingabemuster einschränken.

Beschränkt die Eingabe auf 5 Ziffern (Postleitzahl).

<input type="text" pattern="^[0-9]{5}$" required value="" />

input placeholder

Text, der im Feld eingespielt wird, bis der Benutzer in das Feld klickt – eine Hilfestellung, für die wir heute noch Javascript einsetzen. So sieht der Benutzer, welches Eingabeformat erwartet wird.

novalidate

Attribut für einzelne Eingabefelder: Ob der Browser die Eingabe in dieses Feld validieren soll.

formnovalidate

Attribut für form-Tag: Ob der Browser das komplette Formular validieren soll.

input required

Feld ist erforderlich und muss einen korrekten Wert enthalten

:valid und :invalid

Eine falsche Eingabe in ein Formularfeld wird wie ein Javascript-Event erkannt und kann durch einen CSS-Selektor verdeutlichtlich werden.

	:invalid { background: firebrick; }
	:valid { background: ivory; }