HTML Element - input
Das input-Element erstellt interaktive Formularfelder, über die Benutzer Daten eingeben oder eine Auswahl treffen können.
Beispiel
<form>
<label for="vname">Vorname:</label><br>
<input type="text" id="vname" name="vname">
<label for="fname">Familienname:</label><br>
<input type="text" id="fname" name="fname">
</form>
Definition und Verwendung
Das input-Element wird verwendet, um interaktive Steuerelemente für webbasierte Formulare zu erstellen.
Das input-Element kann je nach Attribut type auf verschiedene Arten dargestellt werden.
Für die Beschriftungen für das input-Element ist der Einsatz von label sinnvoll.
Attribute
Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.
Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.
| Attribut | Wert | Beschreibung |
|---|---|---|
| accept |
file_extension audio/* video/* image/* media_type |
Legt einen Filter für die Dateitypen fest, die der Benutzer im Dateiauswahldialogfeld auswählen kann (nur für Typ="file"). |
| alt | text | Gibt einen Alternativtext für Bilder an (nur für type="image") |
| autocomplete | on off |
Gibt an, ob für ein input-Element die Autovervollständigung aktiviert sein soll. |
| autofocus | autofocus | Legt fest, dass ein input-Element beim Laden der Seite automatisch den Fokus erhalten soll. |
Warnung: Ein automatisches Fokussieren eines Formularsteuerelements kann sehbehinderten Menschen, die Bildschirmlesegeräte verwenden, und Menschen mit kognitiven Beeinträchtigungen verwirren. Wenn autofocus zugewiesen ist, "teleportieren" Bildschirmlesegeräte ihren Benutzer ohne Vorwarnung zum Formularsteuerelement. |
||
| checked | checked | Gibt an, dass ein input-Element beim Laden der Seite vorausgewählt sein soll (für type="checkbox" oder type="radio"). |
| dirname | inputname.dir | Gibt an, dass die Textanweisung übermittelt wird |
| disabled | disabled | Gibt an, dass ein input-Element deaktiviert werden soll. |
| form | form_id | Gibt das Formular an, zu dem das input-Element gehört. |
| formaction | URL | Gibt die URL der Datei an, die das Eingabefeld beim Absenden des Formulars verarbeitet (für type="submit" und type="image")). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Legt fest, wie die Formulardaten beim Absenden an den Server kodiert werden sollen (für type="submit" und type="image"). |
| formmethod | get post |
Definiert die HTTP-Methode zum Senden von Daten an die Aktions-URL (für type="submit" und type="image") |
| formnovalidate | formnovalidate | Legt fest, dass Formularelemente bei der Übermittlung nicht validiert werden sollen. |
| formtarget | _blank _self _parent _top framename |
Legt fest, wo die nach dem Absenden des Formulars empfangene Antwort angezeigt werden soll (für type="submit" und type="image"). |
| height | pixels | Gibt die Höhe eines input-Elements an (nur für type="image") |
| list | datalist_id | Bezieht sich auf ein datalist-Element, das vordefinierte Optionen für ein input-Element enthält. |
| max | number date |
Gibt den Maximalwert für ein input-Element an. |
| maxlength | number | Gibt die maximale Anzahl der in einem input-Element zulässigen Zeichen an. |
| min | number date |
Legt einen Mindestwert für ein input-Element fest. |
| minlength | number | Gibt die Mindestanzahl der in einem input-Element erforderlichen Zeichen an. |
| multiple | multiple | Gibt an, dass ein Benutzer mehr als einen Wert in ein input-Element eingeben kann. |
| name | text | Gibt den Namen eines input-Elements an. |
| pattern | regexp | Gibt einen regulären Ausdruck an, anhand dessen der Wert eines input-Elements überprüft wird. |
| placeholder | text | Gibt einen kurzen Hinweis an, der den erwarteten Wert eines input-Elements beschreibt. |
| popovertarget | element_id | Gibt an, welches Popover-Element aufgerufen werden soll (nur für type="button") |
| popovertargetaction | hide show toggle |
Legt fest, was mit dem Popover-Element passiert, wenn Sie auf die Schaltfläche klicken (nur für type="button") |
| readonly | readonly | Gibt an, dass ein Eingabefeld schreibgeschützt ist. |
| required | required | Gibt an, dass ein Eingabefeld vor dem Absenden des Formulars ausgefüllt werden muss. |
| size | number | Gibt die Breite eines input-Elements in Zeichen an. |
| src | URL | Gibt die URL des Bildes an, das als Absende-Schaltfläche verwendet werden soll. (nur für type="image") |
| step |
number any |
Legt das Intervall zwischen gültigen Zahlen in einem Eingabefeld fest. |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Gibt den Typ des anzuzeigenden input-Elements an. |
| value | text | Gibt den Wert eines input-Elements an. |
| width | pixels | Gibt die Breite eines input-Elements an (nur für type="image") |
Unterstützung von Global- und Event-Attributen
Das input-Tag unterstützt auch Global- und Event-Attribute.
Standardbrowser CSS
Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.
Browserunterstützung
Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.
| Element | Firefox | Internet Explorer / Edge | Safari | Chrome | Opera |
|---|---|---|---|---|---|
<input> |