input: placeholder, autofocus, disabled

Besondere Attribute für input

Diese 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 ohne Bedenken einsetzen. Wenn ein Browser das Attribut nicht unterstützt, übersieht 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();

HTML bringt autofocus als Attribut ins input-Tag.

<input autofocus type="text" value="" /> 

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

input placeholder

Text, der im Feld eingespielt wird, bis der Benutzer in das Feld klickt, ist eine Hilfestellung, für die lange Zeit Javascript einspringen musste. So sieht der Benutzer, welches Eingabeformat erwartet wird.

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

Bei einigen Typen von Eingabefeldern – z.B. input type="date" und type="color" funktioniert placeholder allerdings nicht. Dann kann value für die Anzeige des gewünschten Datums sorgen.

Sowohl bei type="date" als auch bei type="color" zeigen die Browser die graphischen Hilfsfelder (Kalender und Farbwähler).

<input type="date" value="2023-02-04">
<input type="color" value="#ffcc00">

disabled – Eingabefeld deaktivieren

disabled deaktiviert das Eingabefeld, so dass der Benutzer keine weiteren Eingaben oder Änderungen vornehmen kann. Sitzt eine Gruppe von Eingabefeldern in einem fieldset-Element, deaktiviert disabled alle Felder der Gruppe, um den Benutzer durch ein langes und komplexes Formular zu führen.

<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 disabled entfernen, damit der Nutzer seinen Wert eingeben kann.

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

input 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 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
)

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.

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.