HTML-Tag <input>

❮ Vorige Nächste ❯

Das Tag <input> wird im Rahmen des Elements <form> für die Bestimmung der Felder für die Informationseingabe seitens der Benutzer verwendet. Der Typ des Feldes (Text, Radiobutton, Checkbox, Feld für die Passworteingabe usw.) wird durch das Attribut type definiert.

Um den Text mit einem bestimmten Element zu verbinden, wird das Tag <label>, das für ihn die Textmarkierung definiert, verwendet.

Syntax

Das Tag <input> wird ungepaart verwendet, kein Endtag ist notwendig. (In XHTML ist das Endtag <input/> obligatorisch). Das Tag enthält keinen Textinhalt, es enthält nur Attribute.

Beispiel

<!DOCTYPE html>
<html>
   <head>
       <title>Der Titel des Dokuments</title>
   </head>
   <body>
	<form action="getform.php" method="get">
    	    Vorname: <input type="text" name="first_name" />
    	    Nachname: <input type="text" name="last_name" />
    	    E-Mail-Adresse: <input type="email" name="user_email" />
    	    <input type="submit" value="Absenden" />
	</form>
  </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Das Hauptattribut, das die Art des Eingabefeldes bestimmt, ist type. Wenn das Attribut fehlt, ist der Standardwert "text".

Attribut	Wert	Beschreibung
accept	audio/* video/* image/* MIME_type	Gibt die Arten von Dateien an, die Sie über das Datei-Upload-Feld senden können. (Es wird mit type="file" verwendet).
align	left right top middle bottom	Es definiert den Ausrichtungstyp des Bildes. (Es wird nur bei Bildern verwendet). Es wird in HTML5 nicht unterstützt.
alt	text	Es definiert den alternativen Text für das Bild. (Es wird nur bei Bildern verwendet).
autocomplete	on off	Aktiviert/deaktiviert die automatische Vervollständigung. Neues Attribut in HTML5.
autofocus	autofocus	Es gibt an, dass das Formularfeld nach dem Hochladen der Seite einen Fokus erhalten soll. Neues Attribut in HTML5.
checked	checked	Es zeigt an, dass das Element beim Hochladen der Seite vorgewählt werden sollte. (Es wird nur für <input type = "checkbox"> und <input type = "radio"> verwendet).
disabled	disabled	Es gibt an, dass das Element nicht für die Benutzerinteraktion zur Verfügung stehen darf.
form	form_id	Gibt die Form (angegeben durch das Element <form>) des Steuerelements an. Der Wert ist die Formularkennung (id) im gleichen Dokument. Neues Attribut in HTML5.
formaction	URL	Es gibt die Adresse an, an die die Formulardaten beim Klicken auf die Schaltfläche gesendet werden sollen. (Es wird nur für <input type = "image"> und <input type = "submit"> verwendet).
formenctype	application/x-www-form- urlencoded multipart/form-data text/plain	Es bestimmt, wie die Formulardaten vor dem Senden an den Server kodiert werden. (Es wird nur für <input type = "image"> und <input type = "submit"> verwendet). Alle Symbole werden vor dem Senden verschlüsselt (voreingestellt). Die Symbole werden nicht kodiert. Die Leerzeichen werden durch das "+" Zeichen ersetzt, die Symbole werden jedoch nicht kodiert.
formmethod		Es gibt die HTTP-Anfragemethode an, die beim Senden der Formulardaten verwendet wird. (Es wird nur für <input type = "image"> und <input type = "submit"> verwendet).
	get	Es sendet Formulardaten in der Adressleiste (“name = value”), die der Seiten-URL nach dem Fragezeichen hinzugefügt und durch das Et-Zeichen (&) getrennt wird. (http://example.ru/doc/?name=Ivan&password=vanya)
	post	Der Browser verbindet sich mit dem Server und sendet die Daten zur Verarbeitung.
formnovalidate	formnovalidate	Es weist darauf hin, dass es nicht notwendig ist, die Daten auf ihre Richtigkeit zu überprüfen. (Es wird nur für <input type = "submit"> verwendet).
formtarget		Es gibt an, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll. (Es wird nur für <input type = "image"> und <input type = "submit"> verwendet).
	-blank	Öffnet die Antwort in einem neuen Fenster.
	_self	Öffnet die Antwort im aktuellen Fenster.
	_parent	Öffnet die Antwort im übergeordneten Frame.
	_top	Öffnet die Antwort auf die gesamte Breite des Fensters.
height	pixels	Es definiert die Höhe des Elements (Es wird nur für <input type = "image"> verwendet).
inputmode	verbatim latin latin-name latin-prose full-width-latin kana katakana numeric tel email url	Es definiert das Tastaturlayout.
list	datalist_id	Es definiert eine Liste von Optionen, aus denen der Benutzer auswählen kann. Der Wert für das Attribut ist die ID des Elements <datalist>.
max	number date	Es stellt den oberen Wert für die Eingabe einer Zahl oder eines Datums ein.
maxlength	number	Es definiert die maximale Anzahl der Symbole, die der Benutzer eingeben kann.
min	number date	Es bestimmt den Minimalwert für die Eingabe einer Zahl oder eines Datums.
multiple	multiple	Es gibt an, dass der Benutzer mehr als einen Wert in das Element eingeben kann. (nur für <input type = "file"> und <input type = "email">).
name	text	Es definiert den Namen des Elements. (Wird zur Formularidentifikation verwendet.)
pattern	regexp	Es gibt einen regulären Ausdruck an, nach denen Sie Daten im Formularfeld eingeben und verifizieren müssen. (Nur für die Bedienelemente Text, Suche, Tel., URL, E-Mail und Passwort).
placeholder	text	Es definiert eine kurze Eingabeaufforderung, die den erwarteten Wert für das Eingabefeld beschreibt. Der Benutzer sieht einen Hinweis im Eingabefeld. Sie verschwindet, wenn der Benutzer mit der Dateneingabe beginnt oder wenn das Feld einen Fokus erhält.
readonly	readonly	Es bestimmt, dass das Eingabefeld nur zum Lesen aktiviert ist. Der Benutzer kann keine Änderungen vornehmen.
required	required	Es bestimmt, dass das Eingabefeld vor dem Absenden des Formulars ausgefüllt werden muss.
selectionDirection	forward backward none	Es legt die Richtung der Auswahl fest.
size	number	Legt die Größe des Textfeldes fest. (Nur für Text, Suche, Tel. , URL, E-Mail und Passwort). Voreingestellte Anzahl von Symbolen in 20.
src	URL	Gibt den Pfad zum Bild an, der als Schaltfläche "Senden" verwendet wird. (Nur für <input type = "image">).
step	number	Es bestimmt den Inkrementschritt (Inkrementwert) für numerische Felder. Es wird zusammen mit den Attributene min und max, die die Minimal- und Maximalwerte definieren, verwendet.
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Es definiert den Typ des Eingabefeldes.
value	text	Es definiert den Wert des Elements.
width	width	Es definiert die Breite des Elements (nur für <input type = "image">).

Das Tag <input> unterschtützt Globale Attribute und Globale Eventhandler.

Die Werte des Attributes type

Wert	Beschreibung
button	Es definiert den aktiven Button.
checkbox	Es definiert die Checkbox. (Der Benutzer kann eine von den angebotenen Varianten wählen).
color	Es definiert die Farbenpalette (Der Benutzer kann eine von den angebotenen Varianten wählen).
date	Es definiert das Feld für das Kalenderdatum.
datetime	Es stellt das Feld für die Eingabe des Datums und der Zeit ein
datetime-local	Es stellt das Feld für die Eingabe des Datums und der Zeit ein ohne Zeitzone.
e-mail	Es stellt das Feld für die Eingabe der E-Mail-Adresse ein.
file	Es gestaltet ein Verwaltungselement mit dem Button "Überblick". Mit dem Klick darauf kann man eine Datei wählen und beladen.
hidden	Es definiert das verborgene Eingabefeld. Der Benutzerfenster ist nicht sichtbar.
image	Es definiert, dass statt des Buttons für die Absendung von Angaben an den Server ein Bild verwendet wird. Der Weg zum Bild wird durch das Attribut src definiert. Sowie kann man das Attribut alt für die Bestimmung des alternativen Textes, die Attribute heigh und width für die Bestimmung der Höhe und Breite des Bildes verwenden.
month	Es definiert das Feld für die Wahl des Monats, wonach die Angaben in der Form vom Jahr-Monat angezeigt werden (zum Beispiel: 2018-07).
number	Es definiert das Feld für die Nummereingabe.
password	Es definiert das Feld für die Passworteingabe (die eingegebenen Symbole werden in der Form von Sternzeichen, Punkten und anderen Symbolen angezeigt).
radio	Es gestaltet Radiobuttons (bei der Wahl eines Radiobuttons werden alle andern Buttons inaktiv)
range	Es gestaltet den Diapason für die Auswahl von Zahlen. Voreingestellt ist der Diapason von 0 bis 100. Der Zahlendiapason wird durch die Attribute min und max gestaltet.
reset	Es definiert den Button für die Abteilung der Information.
search	Es gestaltet das Textfeld für die Suche.
submit	Es gestaltet den Button für die Absendung von Angaben (der Button”Absenden”).
text	Es gestaltet einzeiliges Feld für die Texteingabe.
time	Es definiert das Feld für die Zeiteingabe in einem 24-Stundenformat (zum Beispiel 13:45).
url	Es gestaltet das Feld für die URL-Eingabe.
week	Es gestaltet ein Feld für die Wahl der Woche, danach werden die Angaben im Format Jahr-Woche (zum Beispiel: 2018-W25) eingegeben.