Eingabetypen

Alle Felder bisher waren type="text", also einfache Zeilen für beliebige Zeichen. Das type-Attribut kann aber deutlich mehr, und jeder passende Typ nimmt dir Arbeit ab.

01 / 03Typen für Text

<form>
  <label for="a">Name (text)</label>
  <input type="text" id="a" name="a">

  <label for="b">E-Mail (email)</label>
  <input type="email" id="b" name="b">

  <label for="c">Passwort (password)</label>
  <input type="password" id="c" name="c">

  <label for="d">Telefon (tel)</label>
  <input type="tel" id="d" name="d">

  <label for="e">Website (url)</label>
  <input type="url" id="e" name="e">
</form>

Diese fünf sehen auf dem Desktop fast gleich aus, abgesehen von den Punkten beim Passwort. Der Unterschied zeigt sich woanders.

email bringt auf dem Handy eine Tastatur mit @ und Punkt in der Grundebene und prüft beim Absenden, ob das Eingetragene wie eine Adresse aussieht (ein @ und etwas danach).

password verdeckt die Eingabe und sagt Passwortmanagern, worum es geht.

tel blendet auf dem Handy den Ziffernblock ein. Geprüft wird nichts, denn Telefonnummern gibt es weltweit in zu vielen Schreibweisen.

url erwartet eine Adresse und prüft grob auf ein Protokoll.

search (aus der letzten Lektion) verhält sich wie text, wird aber von manchen Browsern mit einem kleinen X zum Leeren dargestellt.

Der Gewinn ist praktisch immer derselbe: passende Tastatur, sinnvolle Autovervollständigung, eine erste Prüfung geschenkt. Kosten: null.

02 / 03Typen mit eigener Bedienung

<form>
  <label for="f">Menge (number)</label>
  <input type="number" id="f" name="f">

  <label for="g">Datum (date)</label>
  <input type="date" id="g" name="g">

  <label for="h">Farbe (color)</label>
  <input type="color" id="h" name="h">

  <label for="i">Schärfegrad (range)</label>
  <input type="range" id="i" name="i">

  <label for="j">Datei (file)</label>
  <input type="file" id="j" name="j">
</form>

Diese Typen bringen eine eigene Oberfläche mit, die der Browser stellt.

number bekommt kleine Pfeile zum Hoch- und Runterzählen und lässt nur Zahlen zu. Für Dinge, mit denen man rechnet: Menge, Anzahl, Portionen. Nicht für Postleitzahlen, Hausnummern oder Kreditkartennummern. Das sind Ziffernfolgen, keine Zahlen, und eine führende Null würde verschwinden.

date öffnet einen Kalender, time eine Uhrzeitauswahl, datetime-local beides zusammen.

color öffnet die Farbauswahl des Betriebssystems.

range ist ein Schieberegler. Nimm ihn nur, wenn der genaue Wert egal ist, denn der Nutzer sieht ihn nicht.

file öffnet den Dateidialog. Mit accept schränkst du die Auswahl ein, mit multiple erlaubst du mehrere Dateien. Damit die Datei wirklich mitgeht, braucht das Formular außerdem method="post" und enctype="multipart/form-data". Ohne das kommt beim Server nur der Dateiname an, und der Fehler sieht genauso aus wie ein vergessenes name.

Alle diese Oberflächen sehen je nach Browser und Betriebssystem anders aus. Das lässt sich mit CSS kaum beeinflussen, und meistens ist das auch gut so: Nutzer kennen den Kalender ihres Geräts.

03 / 03placeholder ist kein Ersatz

<form>
  <input type="email" name="a" placeholder="E-Mail-Adresse">

  <label for="b">E-Mail-Adresse</label>
  <input type="email" id="b" name="b" placeholder="name@beispiel.de">
</form>

Oben ein Feld nur mit placeholder, unten eines mit label und placeholder.

Der placeholder ist der graue Text im leeren Feld. Er verschwindet, sobald jemand tippt. Genau darin liegt das Problem: Wer nach dem dritten Feld nicht mehr weiß, was hier hingehörte, muss das Feld leeren, um es nachzulesen. Screenreader lesen ihn je nach Software gar nicht oder nur zusätzlich vor, und der graue Text hat oft zu wenig Kontrast.

Deshalb: Der placeholder ist ein Beispiel, kein Name. Das Feld heißt „E-Mail-Adresse“ (das steht im label), und ein Beispiel dafür ist „name@beispiel.de“ (das steht im placeholder). Beides zusammen ist gut. Der placeholder allein ist ein Feld ohne Beschriftung, mit allen Nachteilen aus der letzten Lektion.

Ob ein Feld eine Beschriftung hat, sieht man ihm nicht an. Fragen kann man aber. Tipp in der Eingabezeile der Console das hier ab und drück Enter:

document.querySelectorAll("input")[0].labels.length

Die Antwort ist 0. Das obere Feld hat keine Beschriftung, nur grauen Text darin. Dieselbe Frage mit [1] statt [0] antwortet 1, und document.querySelectorAll("input")[1].labels[0].textContent sagt dir sogar, wie die Beschriftung lautet. Genau diesen Unterschied bekommt ein Screenreader vorgelesen.