<input> Tag - Eingabefelder
Beispiel:
<form action="/action.php">
Vorname: <input type="text" name="vorname"><br>
Nachname: <input type="text" name="nachname"><br>
<input type="submit" value="Absenden">
</form>
Verwendung
Mit dem input Tag werden Eingabefelder für Benutzer erstellt. Je nach type Attribute können verschiedene Eingabefeldtypen definiert werden. Z.B. Texteingabefelder, Checkboxen,
Comboboxen, Buttons etc.
Attribute
| Attribut | Wert | Beschreibung |
| accept | file_extension audio/* video/* image/* media_type |
Dateitypen für Dateiuploadfelder (type="file") |
| align | left right top middle bottom |
Ausrichtung für type="image". In HTML 5 nicht mehr unterstützt. |
| alt | Text | Alternativer Text für type="image". |
| autocomplete | on off |
Autokomplettierung aktiv. Nur für HTML 5. |
| autofocus | autofocus | Eingabefeld bekommt automatisch den Fokus, wenn die Seite lädt. |
| checked | checked | Das Feld wird vorausgewählt. Kann bei type="checkbox" und type="radio" verwendet werden, um das Feld zu aktivieren. |
| disabled | disabled | Das Feld ist deaktiviert. |
| form | Formular-ID | Name des Formulars, zu welchem das Eingabefeld gehört. Ab HTML 5. |
| formaction | URL | Die URL, welche das Formular nach dem Absenden verarbeitet. Für Senden-Buttons Ab HTML 5. |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Gibt an, wie die Formulardaten kodiert werden sollen, wenn diese abgeschickt werden. Nur für Senden-Button. Ab HTML 5. |
| formethod | get, post | Wie wird das Formular übertragen (GET oder POST?). Ebenfalls nur für Senden-Button sinnvoll, ab HTML 5. |
| formtarget | _blank, _self, _parent, _top, Frame-Name. | Ziel des Formulars, neues Fenster etc. Nur für Senden-Button, ab HTML 5. |
| height | Höhe in Pixel | Für Bilder, Höhe. Ab HTML 5. |
| max | Zahl, Datum | Maximaler Wert für Eingabefeld. Ab HTML 5. |
| maxlength | Zahl | Maximale Länge der Eingabe. |
| min | Zahl, Datum | Minimale Länge |
| multiple | multiple | Benutzer kann mehrere Elemente auswählen, z.B. in einer Liste. Ab HTML 5. |
| name | Text | Name des Eingabefeldes |
| pattern | Regulärer Ausdruck | Regulärer Ausdruck für die Überprüfung der Eingabe, ab HTML 5. |
| placeholder | Text | Platzhalter der angezeigt wird, wenn noch keine Eingabe erfolgt ist. Ab HTML 5. |
| readonly | readonly | Feld ist nur lesbar und nicht veränderbar. |
| required | required | Eingabe ist erforderlich, bevor das Formular abgeschickt wird. Ab HTML 5. |
| size | Zahl | Größe des Eingabefeldes, z.B. Zeichen in Eingabefeld. |
| src | URL | Bild-URL für type="image". |
| step | Zahl | Schritt für Eingabefelder mit Hoch/Runter Auswahl. Ab HTML 5. |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Typ des Eingabefeldes. Eingabefeld, Eingabefeld für E-Mail, Datum, Farbe etc. Nicht jeder Browser unterstützt alle Elemente, von daher sollten Sie die Verwendung testen. |
| value | Text | Voreingetragener Text und Wert. Bei Checkboxen, der Wert der Übertragen wird, bei Auswahl. |
| width | Zahl | Breite in Pixel bei Bildern. Ab HTML 5. |