CSS, HTML und Javascript mit {stil}

HTML input – Attribute

Attribute für Formularfelder

Die Attribute des input-Tags bestimmen Aussehen, Form und Art der Eingaben und die Benutzerfreundlichkeit von Eingabefeldern.

Input – Attribute

type, name und value sind die zentralen Attribute des input-Elements.

type
Art des input-Feldes fest – Texteingabe, Checkbox, Passwort usw.
name
Name eines Feldes für die verarbeitende Anwendung. Wenn es z.B. eine PHP-Anwendung ist, empfängt das PHP-Programm die Eingaben durch das Name-/Wert-Paar (name, value) Der Name muss im Dokument eindeutig sein und kann nicht wieder verwendet werden.
value
weist einem input-Feld einen Anfangswert zu, z.B. einen Text oder eine Zahl. name und value bilden die Name-/Wert-Paare, die das Formular an die verarbeitende Anwendung überträgt.

Alle weiteren Attribute sind nicht unbedingt erforderlich, aber erleichtern dem Benutzer die Eingabe und verhindern u.U. falsche Eingaben.

alt

(Nur bei type="image")

Ein input-Element mit type="image" wird wie type="submit" behandelt, aber zeigt ein Bild anstelle des schlichten Buttons. Das alt-Attribut dient demselben Zweck wie das alt-Attribut beim img-Tag.

<input type="image" src="img.svg" alt="Email-Senden-Button">

Hinweis: Bei type="image" darf kein value-Attribut aufgeführt werden.

checked

nur bei type="checkbox" und type="radio"
Markiert ein Feld als vorgewählt

<input type="checkbox" name="sendasgift" checked> Als Geschenk verpackt
Als Geschenk verpackt

dirname

bei type="text" oder type="search"

Laufrichtung des Texts. Beim Absenden des Formulars setzt der Browser zwei Felder ein: eines für das name/value-Paar, eines für dirname/direction. Wenn der Nutzer zur Rechts-nach-Links-Schreibrichtung wechselt und einen Text in Arabisch oder Hebräisch eingibt, wird der Wert von dirname zu rtl.

<input type="text" name="firstname" dirname="firstname.dir">

Der Wert des dirname-Attributs ist immer der Wert des name-Attributs gefolgt von ".dir".

height, width *

nur type="image"
Höhe bzw. Breite des Bildes

Hinweis: Bei type="image" darf kein value-Attribut aufgeführt werden.

maxlength *

max. Zahl von Zeichen

maxlength wirkt nur bei type="text". Bei einem Feld vom Typ number zeigt der Browser mit entsprechender CSS-Regel :invalid einen Eingabefehler an, wenn max="99999" mit dem größtmöglichen Wert eingesetzt wird.

multiple HTML5

Benutzer kann mehrere Eingaben als Wert eintragen, nur bei type="email" oder type="file"

Emailadressen mit Komma trennen

<input type="email" name="multi" id="multi" multiple>

Wenn multiple gesetzt ist, kann der Benutzer mehrere Emailadressen – per Komma getrennt – eingeben. Die Eingabe wird automatisch validiert; :valid und :invalid werden automatisch ausgewertet.

Beispiel: Mehrere Dateien laden

readonly *

Das Eingabefeld kann Werte anzeigen, aber nicht vom Benutzer ausgefüllt werden

<input type="text" value="4711" name="fragance" readonly>

Der Wert kann von einem Script geändert werden – z.B. in Abhängigkeit von Eingaben des Benutzers. Hat das input-Element ein name-Attribut, wird das Paar aus Name und Wert an die Anwendung ausgeliefert.

size *

Breite des Feldes – platzsparend, aber kann genauso gut durch eine CSS-Eigenschaft für das Feld gesteuert werden.

Zweistellige Länderkennzeichnung
input[name=sprache] { width: 2em; }

Zweistellige Länderkennzeichnung
<input type="text" size="2" name="language">
<input type="text" name="sprache" value="">

src *

nur bei type="image"
URL des Bildes für den submit-Button

<input src="img-button.png" type="image" alt="Senden als Email">

Hinweis: Bei type="image" darf kein value-Attribut aufgeführt werden.

tabindex (gibt es nicht mehr)

der Tabindex soll den Benutzer bei einer Navigation mit dem Keyboard durch die Reihenfolge der Eingabefelder führen.
Mit tabindex="-1" kann ein Script das nächste zu fokussierende Feld festlegen, aber tabindex="-1" legt keine Reihenfolge für das Ansteuern der Felder fest. tabindex="0" macht ein Element fokussierbar, aber legt keine Reihenfolge für das Ansteuern der Felder fest.
tabindex="1" oder größer sollte nicht benutzt werden.

Mit dem Tabulator navigiert der Nutzer in der Reihenfolge der Eingabefelder so wie sie im HTML notiert sind. Alles andere kann zu Verwirrungen führen und obendrein zu nicht vorhersagbaren Ergebnissen: z.B. springt IE 10 beim 6ten Tab in die Navigationsleiste.

023473 Dein Name Spin Schlüssel