HTML input – type, name, value

Input – Attribute

Die Eingabefelder des Dokuments übernehmen Werte aus Benutzereingaben, die beim Absenden der Daten zu einer Anwendung (meist einem PHP-Programm) auf den Server gesendet werden. Das type-Attribut bestimmt das Aussehen und die möglichen Eingaben, der eingegebene Wert wird dem Attribut value zugeordnet.

Der Wert des name-Attributs wird zusammen mit dem eingegebenen Wert versendet.

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.

<input type="text" name="mytext" value="">

<?php
if (isset($_POST["mytext"]) && !empty($_POST["mytext"] )) {
   $val = $_POST["mytext"];
   …
}
?>

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

input type="image"

Anstelle des normalen Senden-Buttons zeigt input type = "image" ein Bild. Ein input-Element mit type="image" wird wie type="submit" behandelt.

Das alt-Attribut dient demselben Zweck wie das alt-Attribut beim img-Tag: eine kurze Beschreibung für Benutzer ohne grafische Oberfläche. width und height als Attribut im input-Tag machen nur Sinn bei type="image".

<input type="image" src="senden.png" width="200" height="55" alt="Email Senden Button">

Läßt man alle Attribute außer type="image" weg, entsteht ein einfacher Button mit der Aufschrift Submit oder Senden, nicht anders als bei input type="submit"

<input type="image" alt="Senden-Button">

Hinweis: Bei type="image" darf kein value-Attribut aufgeführt werden, aber ein alt-Text für Benutzer ohne graphische Benutzeroberfläche ist ein MUSS.

checked für checkbox und radio

Markiert ein Feld als vorgewählt

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

input type=text mit maxlength

max. Zahl von Zeichen für ein Eingabefeld.

<label>
	<span>Land (einstellig)</span><input type="text" name="land" maxlength="1">
</label>
<label>
	<span>PLZ (5-stellig)</span><input type="number" max="99999" min="10000" size="6">
</label>

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.

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

multiple

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 mit Vorschau 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.

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.

inputmode

inputmode gibt die Art der virtuellen Tastatur vor, die eingespielt wird, wenn der Benutzer ein Textfeld wie input oder textarea aktiviert.

<label>
  Postleitzahl:
  <input type="text" inputmode="decimal">
</label>

• inputmode="text" spielt die Standard-Tastatur ein,
• inputmode="tel" die numerische Tastatur mit +*#
• inputmode="numeric" eine numerische Tastatur mit Sonderzeichen -/:;() …
• inputmode="email" Lettern und @ und smilies
• inputmode="url" Lettern
• inputmode="search"

inputmode ist mehr oder weniger überflüssig, seitdem wir den entsprechenden input type="" direkt angeben können.

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".