Das type-Attribut von <input> kann viele verschiedene Werte annehmen, die jeweils für eine andere Art von Eingabe gedacht sind. Der Browser passt dabei sogar an, welche Tastatur auf dem Handy angezeigt wird!

Übersicht der wichtigsten Typen

<!-- Normaler einzeiliger Text -->
<input type="text" name="vorname">

<!-- E-Mail-Adresse, mit eingebauter Formatprüfung -->
<input type="email" name="email">

<!-- Nur Zahlen, mit kleinen Pfeilen zum Hoch-/Runterzählen -->
<input type="number" name="alter">

<!-- Text, der beim Tippen als Punkte versteckt wird -->
<input type="password" name="passwort">

<!-- Ein Datumsauswahl-Kalender -->
<input type="date" name="geburtstag">

<!-- Eine Telefonnummer -->
<input type="tel" name="telefon">

Probiere diese Zeilen direkt in deiner kontakt.html aus (in ein <form> gepackt) und schau dir jeden Feldtyp im Browser an. Achte besonders auf type="date" - dein Browser zeigt dafür wahrscheinlich einen kleinen Kalender-Popup an, ganz ohne dass du dafür irgendeinen Code schreiben musstest!

Eingebaute Überprüfung, ganz ohne JavaScript

Ein großer Vorteil dieser speziellen Typen: Der Browser prüft die Eingabe teilweise schon von sich aus. Bei type="email" zum Beispiel meldet der Browser einen Fehler, wenn jemand versucht, "keine-email" statt einer echten E-Mail-Adresse mit @-Zeichen einzutippen - und das, obwohl wir in diesem Tutorial noch gar kein JavaScript benutzt haben!

Weitere nützliche Attribute für input

• placeholder: ein Platzhaltertext, der angezeigt wird, solange das Feld leer ist, und beim Tippen verschwindet.
• required: ein boolesches Attribut (du kennst das schon von controls) - das Feld muss ausgefüllt werden, bevor das Formular abgeschickt werden kann.
• value: ein Startwert, der schon im Feld steht, bevor der Nutzer etwas eintippt.

<input type="email" name="email" placeholder="deine@email.de" required>

Finns Kontaktformular erweitern

Baue jetzt mehrere Felder in dein Kontaktformular ein:

<h1>Kontakt</h1>

<form>
  <input type="text" name="vorname" placeholder="Dein Vorname" required>
  <input type="email" name="email" placeholder="deine@email.de" required>
  <input type="tel" name="telefon" placeholder="Deine Telefonnummer (optional)">
</form>