HTML-<input>-Tag
Der <input>-Tag wird innerhalb des <form>-Elements verwendet und definiert Felder für Benutzereingaben. Der Typ des Feldes (Text, Kontrollkästchen, Optionsfeld, Passwortfeld usw.) wird durch den Wert des type-Attributs bestimmt. Der Tag hat keinen Textinhalt, er enthält nur Attribute.
Er gehört zu einer Tag-Gruppe namens Formularelemente.
Um Text mit einem bestimmten Element zu verknüpfen, verwenden wir den <label>-Tag, der dafür eine Textbeschriftung festlegt.
Syntax
Der <input>-Tag ist leer, was bedeutet, dass der schließende Tag nicht erforderlich ist. In XHTML muss der (<input>)-Tag jedoch geschlossen werden (<input/>).
Beispiel für den HTML-<input>-Tag:
Beispiel für den HTML-<input>-Tag
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Beispiel für den HTML-<input>-Tag mit dem HTML-<label>-Tag:
Beispiel für den HTML-<input>-Tag mit dem HTML-<label>-Tag
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Ergebnis
Attribute
Das wichtigste Attribut, das den Typ des Eingabefeldes bestimmt, ist type. Wenn das Attribut fehlt, ist der Standardwert "text".
| Attribut | Wert | Beschreibung |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Gibt die Dateitypen an, die Sie über das Datei-Upload-Feld senden können. (Wird mit type="file" verwendet). |
| align | left right top middle bottom | Definiert den Ausrichtungstyp des Bildes. (Wird nur bei Bildern verwendet). In HTML5 nicht unterstützt. |
| alt | text | Definiert den alternativen Text für das Bild. (Wird nur bei Bildern verwendet). |
| autocomplete | on off | Aktiviert/deaktiviert die automatische Vervollständigung. Neues Attribut in HTML5. |
| autofocus | autofocus | Gibt an, dass das Formularfeld nach dem Laden der Seite den Fokus erhalten soll. Neues Attribut in HTML5. |
| checked | checked | Gibt an, dass das Element beim Laden der Seite vorausgewählt sein soll. (Wird nur für <input type = "checkbox"> und <input type = "radio"> verwendet). |
| disabled | disabled | Gibt an, dass das Element für die Benutzerinteraktion nicht verfügbar sein muss. |
| form | form_id | Gibt das Formular an (durch das <form>-Element angegeben) des Steuerelements. Der Wert ist die Formularkennung (id) im selben Dokument. Neues Attribut in HTML5. |
| formaction | URL | Gibt die Adresse an, an die die Formulardaten gesendet werden, wenn auf die Schaltfläche geklickt wird. (Wird nur für <input type = "image"> und <input type = "submit"> verwendet). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Bestimmt, wie Formulardaten vor dem Senden an den Server kodiert werden. (Wird nur mit <input type="image"> und <input type="submit"> verwendet). Werte: application/x-www-form-urlencoded (Standard, kodiert alle Zeichen), multipart/form-data (keine Kodierung, wird für Datei-Uploads verwendet), text/plain (Leerzeichen werden zu +, andere Zeichen werden nicht kodiert). |
| formmethod | get post | Gibt die HTTP-Anfragemethode an, die beim Senden der Formulardaten verwendet wird. (Wird nur für <input type = "image"> und <input type = "submit"> verwendet). get sendet Formulardaten in der Adressleiste. post sendet Daten zur Verarbeitung an den Server. |
| formnovalidate | formnovalidate | Gibt an, dass die Daten nicht auf Korrektheit überprüft werden müssen. (Wird nur für <input type = "submit"> verwendet). |
| formtarget | _blank _self _parent _top | Gibt an, wo die Antwort nach dem Absenden des Formulars angezeigt werden soll. (Wird nur für <input type = "image"> und <input type = "submit"> verwendet). |
| height | pixels | Definiert die Höhe des Elements (wird nur für <input type = "image"> verwendet). |
| inputmode | verbatim latin latin-name latin-prose full-width-latin kana katakana numeric tel email url | Definiert das Tastaturlayout. |
| list | datalist_id | Definiert eine Liste von Optionen, aus der der Benutzer wählen kann. Der Wert des Attributs ist die id des <datalist>-Elements. |
| max | number date | Legt den oberen Wert für die Eingabe einer Zahl oder eines Datums fest. |
| maxlength | number | Definiert die maximale Anzahl von Zeichen, die der Benutzer eingeben kann. |
| min | number date | Legt den minimalen Wert für die Eingabe einer Zahl oder eines Datums fest. |
| multiple | multiple | Gibt an, dass der Benutzer im Element mehr als einen Wert eingeben kann (nur für <input type = "file"> und <input type = "email">). |
| name | text | Definiert den Namen des Elements. (Wird zur Formularidentifikation verwendet). |
| pattern | regular expression | Gibt einen regulären Ausdruck an, nach dem Sie Daten in das Formularfeld eingeben und überprüfen müssen. (Nur für Steuerelemente vom Typ text, search, tel, url, email und password). |
| placeholder | text | Definiert eine kurze Eingabeaufforderung, die den erwarteten Wert für das Eingabefeld beschreibt. Der Benutzer sieht einen Hinweis im Eingabefeld. Er verschwindet, wenn der Benutzer mit der Eingabe beginnt oder wenn das Feld den Fokus erhält. |
| readonly | readonly | Definiert, dass das Eingabefeld nur zum Lesen aktiviert ist. Der Benutzer kann keine Änderungen vornehmen. |
| required | required | Gibt an, dass das Eingabefeld vor dem Absenden des Formulars ausgefüllt werden muss. |
| size | number | Definiert die sichtbare Breite des Textfeldes in Zeichen. (Nur für text, search, tel, url, email und password). Standard ist 20 Zeichen. |
| src | URL | Gibt den Pfad zum Bild an, das als Schaltfläche „Senden“ verwendet wird. (Wird nur für <input type = "image"> verwendet). |
| step | number | Legt den Schrittwert (Inkrementwert) für numerische Felder fest. Wird mit den Attributen min und max verwendet, die die minimalen und maximalen Werte definieren. |
| 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 | Definiert den Typ des Eingabefeldes. |
| value | text | Definiert den Wert des Elements. |
| width | width | Definiert die Breite des Elements (nur für <input type = "image">). |
Der <input>-Tag unterstützt außerdem die Global attributes und die Event Attributes.
Werte des type-Attributs
| Wert | Beschreibung |
|---|---|
| button | Definiert die aktive Schaltfläche. |
| checkbox | Kontrollkästchen ankreuzen (der Benutzer kann mehr als eine der Optionen auswählen). |
| color | Gibt eine Farbpalette an (der Benutzer kann Farbwerte in Hexadezimalform auswählen). |
| date | Definiert das Eingabefeld für ein Kalenderdatum. |
| datetime (deprecated) | Definiert das Eingabefeld für Datum und Uhrzeit. (In HTML5 veraltet, verwenden Sie stattdessen datetime-local.) |
| datetime-local | Definiert das Eingabefeld für Datum und Uhrzeit ohne Zeitzone. |
| Definiert das Eingabefeld für E-Mail. | |
| file | Legt das Steuerelement mit der Schaltfläche „Durchsuchen“ fest, durch deren Anklicken Sie die Datei auswählen und laden können. |
| hidden | Definiert ein verborgenes Eingabefeld. Es ist für den Benutzer nicht sichtbar. |
| image | Gibt an, dass anstelle einer Schaltfläche ein Bild verwendet wird, um Daten an den Server zu senden. Der Pfad zum Bild wird durch das src-Attribut angegeben. Das alt-Attribut kann auch verwendet werden, um alternativen Text anzugeben, die Attribute height und width, um Höhe und Breite des Bildes anzugeben. |
| month | Definiert das Feld zur Auswahl eines Monats, wonach die Daten als Jahr-Monat angezeigt werden (zum Beispiel: 2018-07). |
| number | Definiert das Eingabefeld für Zahlen. |
| password | Definiert ein Feld zur Eingabe eines Passworts (die eingegebenen Zeichen werden als Sternchen, Punkte oder andere Zeichen angezeigt). |
| radio | Erstellt ein Optionsfeld (wenn ein Optionsfeld ausgewählt wird, werden alle anderen deaktiviert). |
| range | Erstellt einen Schieberegler zur Auswahl von Zahlen im angegebenen Bereich. Der Standardbereich liegt von 0 bis 100. Der Zahlenbereich wird durch die Attribute min und max angegeben. |
| reset | Definiert eine Schaltfläche zum Zurücksetzen von Informationen. |
| search | Erstellt ein Textfeld für die Suche. |
| submit | Erstellt eine Schaltfläche zum Absenden der Formulardaten („Senden“-Schaltfläche). |
| text | Erstellt ein einzeiliges Textfeld. |
| time | Gibt ein numerisches Feld zur Eingabe der Uhrzeit im 24-Stunden-Format an (zum Beispiel 13:45). |
| url | Erstellt ein Eingabefeld für eine URL. |
| week | Erstellt ein Feld zur Auswahl der Woche, wonach die Daten als Jahr-Woche angezeigt werden (zum Beispiel: 2018-W25). |
Practice
What can be achieved with the HTML <input> tag?