input-Attribute: placeholder, autocomplete

HTML input Attribute

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 – Eingabefeld aktivieren

Das autofocus-Attribut kennzeichnet ein Eingabefeld, das beim Laden der Seite den Fokus erhält. Das war früher eine Aufgabe für Javascript:

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="" /> 

autofocus ist vom Typ Boolean und die einfache Angabe autofocus (ohne Hochkommas) reicht.

autocomplete – automatisch vervollständigen

Viele Browser speichern Eingaben in Formularfelder für eine erneute Nutzung und bieten ein automatischen Vervollständigen.

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

autocomplete="off" unterbindet das Speichern der Eingaben. Zuverlässig funktioniert das Ausschalten des automatischen Vervollständigen allerdings nicht, vor allem bei Email und Passwörtern, da die Browser ihre Passwort-Manager bevorzugen.

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

disabled – Eingabefeld deaktivieren

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>

disabled ist z.B. sinnvoll, wenn der Nutzer ein Feld erst nach vorangehenden Eingaben ausfüllen soll. Dann kann Javascript das "disabled" entfernen, damit der Nutzer seinen Wert eingeben kann.

document.querySelector("#feld1").onblur = function () {
  if (this.value.length > 0) {
    document.querySelector("#feld2").removeAttribute("disabled");
  }
}

HTML5 form-Attribut

In HTML4 und XHTML verursachte ein Eingabefeld Probleme, wenn es nicht innerhalb des form-Tags lag: 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.

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

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" />

0

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 des range-Sliders sind eine Barriere für kräftige Finger auf den touch-Displays kleiner Monitore. Das Erscheinungsbild von input type range kann mit CSS geändert werden.

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.

Mit dem ersten Zeichen, das in das Feld getippt wird,verschwindet die Anzeige des Platzhalters.

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>

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

Auf Lager Butter Bier Brot Milch Magerquark

Firefox zeigt die Optionen, wenn die Taste ↓ gedrückt wird. Aber sowohl Chrome und Opera als auch Firefox fügen aber die Optionen der datalist zum Autocomplete hinzu. Safari hält sich raus.