Welche Arten von input-Elementen gibt es in HTML?

Es gibt die folgenden Arten von input-Elementen:

• text: Einzeiliger Textbereich.
• password: Passwortfeld, Zeichen sind verborgen.
• submit: Schaltfläche zum Absenden des Formulars.
• reset: Schaltfläche zum Zurücksetzen des Formulars.
• radio: Optionsschalter (einer aus mehreren).
• checkbox: Kontrollkästchen (eins oder mehrere aus mehreren).
• button: Normale Schaltfläche.
• file: Feld zur Dateiauswahl.
• hidden: Verstecktes Feld, für den Benutzer unsichtbar, aber wird mit dem Formular gesendet.
• image: Bildschaltfläche zum Absenden des Formulars.

Die HTML5-Spezifikation hat neue Typen hinzugefügt:

• email: Feld zur Eingabe einer E-Mail-Adresse.
• url: Feld zur Eingabe einer URL.
• number: Feld zur Eingabe einer Zahl.
• range: Schieberegler zur Auswahl eines numerischen Werts innerhalb eines Bereichs.
• date: Feld zur Datumsauswahl.
• month: Feld zur Monats- und Jahresauswahl.
• week: Feld zur Wochen- und Jahresauswahl.
• time: Feld zur Zeitauswahl.
• datetime-local: Feld zur Auswahl von Datum und Uhrzeit ohne Zeitzone.
• search: Suchfeld.
• color: Farbauswahlfeld.
• tel: Feld zur Eingabe einer Telefonnummer.

Beispiel für die Verwendung:

<!-- Einzeiliger Textbereich -->
<input type="text" placeholder="Name">

<!-- Passwortfeld -->
<input type="password" placeholder="Passwort">

<!-- Schaltfläche zum Absenden des Formulars -->
<input type="submit" value="Absenden">

<!-- Schaltfläche zum Zurücksetzen des Formulars -->
<input type="reset" value="Zurücksetzen">

<!-- Optionsschalter -->
<input type="radio" name="gender" value="male"> Männlich
<input type="radio" name="gender" value="female"> Weiblich

<!-- Kontrollkästchen -->
<input type="checkbox" name="interests" value="music"> Musik
<input type="checkbox" name="interests" value="sports"> Sport

<!-- Normale Schaltfläche -->
<input type="button" value="Klick mich">

<!-- Dateiauswahlfeld -->
<input type="file">

<!-- Verstecktes Feld -->
<input type="hidden" name="userId" value="123">

<!-- Bildschaltfläche -->
<input type="image" src="submit.png" alt="Absenden">

<!-- E-Mail-Feld -->
<input type="email" placeholder="Email">

<!-- URL-Feld -->
<input type="url" placeholder="Webseite">

<!-- Zahlenfeld -->
<input type="number" min="1" max="10">

<!-- Schieberegler -->
<input type="range" min="0" max="100">

<!-- Datumsauswahl -->
<input type="date">

<!-- Monat -->
<input type="month">

<!-- Woche -->
<input type="week">

<!-- Uhrzeit -->
<input type="time">

<!-- Datum und Uhrzeit (lokal) -->
<input type="datetime-local">

<!-- Suchfeld -->
<input type="search" placeholder="Suche">

<!-- Farbauswahl -->
<input type="color">

<!-- Telefonnummer -->
<input type="tel" placeholder="+7 (xxx) xxx-xx-xx">