Das input-Tag

Das Tag input erstellt verschiedene Elemente eines HTML-Formulars: ein normales Eingabefeld, ein Feld für die Passworteingabe, ein Ankreuzfeld (Checkbox), Optionsschalter (Radio), eine Schaltfläche.

Das Tag input sollte sich innerhalb des Tags form befinden. Dies ist nicht zwingend erforderlich, aber notwendig für das Senden von Daten an den Server und deren anschließende Verarbeitung mit PHP.

Benötigt keinen schließenden Tag.

Attribute

Attribut	Beschreibung
type	Legt den Typ des Eingabefelds fest. Optionen siehe unten.
value	Standardwert im Eingabefeld. Im Fall einer Schaltfläche legt es deren Text fest. Weitere Details siehe Attribut value.
placeholder	Hinweis im Eingabefeld, weitere Details siehe Attribut placeholder.
name	Name des Eingabefelds. Wird benötigt, um die Daten des Eingabefelds in PHP auszulesen. Für die korrekte Funktion des Formulars dürfen die Namen der Eingabefelder nicht miteinander übereinstimmen (in einem Formular). Wenn sie übereinstimmen - erhält PHP die Daten des Eingabefelds, das im HTML-Code weiter unten steht.
disabled	Sperrt ein Formularelement (nicht nur input, sondern praktisch jedes), weitere Details siehe Attribut disabled.

Werte des Attributs type

Wert	Beschreibung
text	Erstellt ein normales Texteingabefeld.
password	Erstellt ein Texteingabefeld für Passwörter. Versuchen Sie, Text einzugeben - er wird als Sternchen angezeigt.
checkbox	Erstellt ein Ankreuzfeld (Checkbox). Weitere Details siehe checkbox.
radio	Erstellt einen Optionsschalter (Radio Button). Weitere Details siehe radio.
hidden	Erstellt ein verstecktes Input-Feld, das auf dem Bildschirm nicht sichtbar ist, aber die im Attribut value enthaltenen Daten an den Server sendet.
button	Erstellt eine Schaltfläche. Das Klicken auf diese Schaltfläche wird das Formular nicht an den Server senden. Sie kann innerhalb eines Links oder über JavaScript verwendet werden. Standardmäßig hat die Schaltfläche keinen Text (Beispiel einer Schaltfläche ohne Text: ), er wird mit Hilfe von value festgelegt. Siehe auch das Tag button, das ebenfalls eine Schaltfläche erstellt.
submit	Erstellt eine Schaltfläche, die Daten an den Server sendet. Der Text der Schaltfläche ist browserabhängig und kann mit Hilfe von value geändert werden. Siehe auch das Tag button, das ebenfalls eine Schaltfläche erstellt.
reset	Erstellt eine Schaltfläche, die das ausgefüllte Formular zurücksetzt. Der Text der Schaltfläche ist browserabhängig und kann mit Hilfe von value geändert werden.
file	Erstellt eine Schaltfläche zur Dateiauswahl. Das Design dieser Schaltfläche darf nicht über CSS geändert werden (es gibt jedoch trickreiche Möglichkeiten). Wenn Sie ein solches Feld im Formular benötigen, dann muss das Tag form das Attribut enctype mit dem Wert multipart/form-data haben.

Neue Werte für das Attribut type in HTML5

Diese Attributwerte sind neu, sie sind erst in HTML5 hinzugekommen, daher können sie in einigen Browsern unter Umständen nicht funktionieren oder in verschiedenen Browsern unterschiedlich funktionieren.

Falls der Browser den Inhalt des Attributs type nicht verstehen kann (z.B. wenn er nicht unterstützt wird oder falsch eingegeben wurde), wird er das Element als normales Texteingabefeld behandeln, als ob im type der Wert text stünde.

Sehen Sie sich die unten angeführten Beispiele in verschiedenen Browsern an. Versuchen Sie, Text in die Input-Felder einzugeben und auf die Senden-Schaltfläche zu klicken. Wenn der Text ungültig ist oder das Feld leer ist - wird der Browser einen Fehler ausgeben. Wenn beispielsweise in ein Feld vom Typ email eine ungültige E-Mail-Adresse eingegeben wird - wird der Browser das Senden des Formulars verhindern und eine Fehlermeldung ausgeben (den Text der Fehlermeldung und deren Aussehen kann man nicht über HTML/CSS ändern). Wenn das Feld leer ist - gibt der Browser ebenfalls einen Fehler aus, dies wird durch das Attribut required erreicht:

Wert	Beschreibung
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

Siehe auch