X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <input>

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>

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.

Browser-Support



Finden Sie das nützlich?

Ähnliche Artikel