Einzeiliges Eingabefeld in HTML mit INPUT-Tag

Zu den am häufigsten verwendeten Elementen in HTML-Formularen zählen einzeilige Eingabefelder. Diese dienen dazu, dass man kurze Eingaben vornehmen kann, bei denen keine Zeilenumbrüche notwendig sind. Typische Anwendungsfälle sind Eingaben für den Namen, die Straße oder den Ort. Meistens enthalten Formulare im Internet mehrere einzeilige Eingabefelder.

Eingabefeld mit INPUT-Tag in HTML

HTML-Code für einzeilige Eingabefelder

Wie fast alle Formularfelder werden einzeilige Eingabefelder in HTML mit dem INPUT-Tag erzeugt. Ein Beispielcode für ein Eingabefeld in der Grundform.

<!-- In HTML -->
<input type="text">

<!-- In XHTML -->
<input type="text" />

Attribute beim einzeiligen Eingabefeld

Der INPUT-Tag ist zunächst ein leeres Element. Durch das Attribut type="text" wird das Element als einzeiliges Eingabefeld definiert. Die Browser dürften auch ohne das Attribut type das Element standardmäßig als einzeiliges Eingabefeld anzeigen. Der Vollständigkeit halber sollte man das Attribut jedoch angeben.

Neben dem Attribut type können mit einem Leerzeichen getrennt weitere Attribute angegeben werden. Diese sind für ein funktionsfähiges Formular in der Regel auch notwendig. Wenn man beispielsweise das Formular an ein PHP-Script abschicken möchte, dann muss man für das Eingabefeld einen Namen vergeben und der Inhalt des Eingabefelds kann vom PHP-Script über den Namen ausgelesen werden. Ist kein Name angegeben, kann das Auslesen über den Namen nicht erfolgen. Der HTML-Code würde wie folgt erweitert werden, wenn man dem Eingabefeld z.B. den Namen "stadt" zuweisen möchte.

<!-- In HTML -->
<input type="text" name="stadt">

<!-- In XHTML -->
<input type="text" name="stadt" />

So kann man den INPUT-Tag mit weiteren Attributen erweitern.

Attribut für die ID

Neben type="..." und name="..." kann das Attribut für die ID wichtig sein. Es wird mit id="..." angegeben und muss auf der Seite eindeutig sein. Die ID wird bei einzeiligen Eingabefeldern in der Regel identisch mit dem Namen gehalten. Der Grund hierfür ist, dass die beiden Attribute denselben Namensraum teilen. Ist die ID identisch wie der Name, können beide demselben Element zugewiesen werden. Es ist jedoch nicht möglich, die ID und den Namen für zwei verschiedene Elemente zuzuweisen, wenn sie identisch sind. Daher hält man die beiden Attribute in der Regel identisch. Dazu drei Beispiele.

Gültiger HTML-Code mit zwei Eingabefeldern

<input type="text" name="stadt" id="stadt">
<input type="text" name="land" id="123">

In XHTML muss lediglich beachtet werden, den abschließenden Trailing-Slash mit " /> einzufügen. Im ersten Eingabefeld ist die ID und der Name "stadt". Da identische Werte einem Element zugewiesen werden können, ist der Code gültig. Im nächsten Eingabefeld wurde als Name "land" gewählt und die ID ist "123". Auch dieser Code ist gültig, da bei einem Element der Name und die ID identisch sein können, jedoch nicht müssen. Hierbei gibt es Ausnahmen bei den Tags A, APPLET, FORM, FRAME, IFRAME, IMG und MAP. Wenn diesen Tags Name und ID zugewiesen wurde, dann müssen sie auch identisch sein. Der INPUT-Tag zählt jedoch nicht dazu.

Ungültiger HTML-Code mit zwei Eingabefeldern

<input type="text" name="aaa" id="bbb">
<input type="text" name="bbb" id="ccc">

Entscheidend bei diesem Code sind die beiden Attribute id="bbb" und name="bbb". Denn, obwohl die Werte identisch sind, wurden sie zwei verschiedenen Eingabefeldern zugewiesen. Somit ist der Code ungültig.

Weiterer ungültiger HTML-Code mit zwei Eingabefeldern

<input type="text" name="aaa" id="bbb">
<input type="text" name="ccc" id="bbb">

Bei beiden Eingabefeldern ist der Wert für das ID-Attribut "bbb". Da eine ID eindeutig sein muss, ist der Code ungültig.

Wichtige Unterschiede zwischen den Attributen ID und Name

Verschiedenen Eingabefeldern können theoretisch identische Namen zugewiesen werden, jedoch nicht identische ID's. Eine ID muss immer eindeutig sein. In JavaScript kann der Name mit getElementsByName() ausgelesen werden und die Methode wird in Mehrzahl ausgedrückt (getElements...). Der Rückgabewert hierbei ist immer ein Array (Datentyp, der mehrere Werte enthalten kann). Die ID wird mit getElementById() ausgelesen und die Methode wird in Einzahl ausgedrückt (getElement...). Der Rückgabewert ist hierbei kein Array, sondern nur der Wert eines Objekts aus dem DOM. Wird ein Formular an ein PHP-Script geschickt, kann der Name (je nach Übertragungsmethode) z.B. mit $_POST['name']; oder $_GET['name']; ausgelesen und weiter verarbeitet werden. Bei der ID ist das nicht möglich.

Weitere wichtige Attribute

Neben diesen können die folgenden Attribute wichtig bei einzeiligen Eingabefeldern sein.

  • maxlength: Die maximale Länge des Textes, der eingegeben werden kann. Der numerische Wert wird innerhalb der Anführungszeichen, z.B. in der Form maxlength="25" angegeben.
  • value: Mit value="..." kann das Eingabefeld mit einem Vorgabewert belegt werden. Das wird meistens in zwei Fällen genutzt. Einerseits kann es genutzt werden, um ein Eingabefeld mit häufig genutzten Werten zu belegen, der ggf. vom Benutzer überschrieben werden kann. Andererseits kann es auch genutzt werden, um den Benutzern das erneute Ausfüllen bereits ausgefüllter Eingabefelder zu ersparen. Typischer Anwendungsfall ist, dass wenn der Benutzer nicht alle Pflichtfelder ausgefüllt hat, erneut die Formularseite angezeigt wird. Dabei werden die Eingabefelder mit den Werten vorbelegt, die bereits eingegeben wurden. Das kann bei der Verwendung von PHP und der Übertragungsmethode POST z.B. mit value="<?php echo $_POST['name']; ?>" realisiert werden.
  • readonly: Mit dem Attribut readonly ist der Wert eines Eingabefelds nicht änderbar. Ist das Eingabefeld z.B. mit value="..." mit einem Wert vorbelegt, kann dieser nicht geändert werden.
  • disabled: Mit dem Attribut disabled ist der Wert eines Eingabefelds ebenfalls nicht änderbar. Der Unterschied zu readonly ist, dass das Eingabefeld bei disabled quasi "deaktiviert" wird, sozusagen technisch nicht existiert. Das bewirkt, dass die Werte bei disabled beim Abschicken des Formulars nicht übertragen werden. Bei readonly werden sie dagegen übertragen. Auch die weiteren Attribute wie tabindex oder accesskey sind bei disabled nicht existent.

Bei den Attributen readonly und disabled wird bei der Schreibweise zwischen HTML und XHTML unterschieden. In HTML können die Attribute in minimierter Form ohne Werte geschrieben werden. In XHTML ist eine Minimierung dagegen nicht möglich und man muss das Attribut mit den Werten (readonly, disabled) angeben. Ein Beispielcode für beide Attribute.

<!-- In HTML -->
<input type="text" name="stadt" readonly>
<input type="text" name="land" disabled>

<!-- In XHTML -->
<input type="text" name="stadt" readonly="readonly" />
<input type="text" name="land" disabled="disabled" />
  • tabindex: Viele Menschen sind daran gewöhnt, den Cursor von einem Formularfeld zum nächsten mit der Tab-Taste zu positionieren. Die Tab-Reihenfolge ist dabei normalerweise in der Reihenfolge der Elemente. Die Tab-Reihenfolge kann mit tabindex="..." auch vorgegeben werden.
  • accesskey: Über das Attribut accesskey kann ein Buchstabe für den Tastenkürzel (Shortcut) definiert werden, mit dem das entsprechende Eingabefeld ausgewählt bzw. der Cursor darin positioniert werden kann. Der eingegebene Buchstabe allein reicht jedoch nicht aus, um das Eingabefeld auszuwählen. Meistens besteht die Tastenkombination aus ALT + accesskey. Es könnte auch ALT + SHIFT + accesskey oder eine andere Tastenkombination sein und ist abhängig vom Browser.

Ein Beispielcode mit den Attributen tabindex und accesskey.

<input type="text" name="stadt" accesskey="s" tabindex="1">
<input type="text" name="land" accesskey="l" tabindex="2">

In XHTML muss lediglich beachtet werden, den abschließenden Trailing-Slash mit " /> zu verwenden. Beim Attribut accesskey ist zu beachten, dass das Attribut ab HTML5 zu den globalen Attributen zählt und nicht mehr nur bei bestimmten Elementen wie z.B. dem INPUT-Tag angewendet werden kann.

  • size: Mit dem Attribut size="..." kann ein numerischer Wert für die optische Breite des Textfelds vorgegeben werden. Allerdings widerspricht das dem Grundgedanken, dass möglichst alle Elemente mit CSS formatiert werden sollten.

Attribute ab HTML5

Ab HTML5 sind für Formulare viele neue Attribute als Teil der Spezifikationen hinzugekommen. Für einzeilige Eingabefelder sind vor allem folgende Attribute relevant.

  • list: Damit kann die ID einer Liste angegeben werden, die wiederum mit dem Tag datalist definiert wird, z.B. in der Form <datalist id="vorschlagsliste">. Die Liste kann verschiedene Werte enthalten, die mit dem Tag option angegeben werden, z.B. in der Form <option>Wert</option>. Diese Werte werden dann als Vorschlagsliste für das Eingabefeld verwendet. Ein Beispielcode.
<!-- Code mit der Angabe der Listen-ID -->
<input type="text" list="vorschlagsliste">

<!-- Code für die Vorschlagsliste -->
<datalist id="vorschlagsliste">
  <option>Programmierung</option>
  <option>Netzwerktechnik</option>
  <option>Servertechnik</option>
</datalist>

Die Auswirkungen des Codes können beim folgenden Eingabefeld getestet werden.

Wenn man den Mauszeiger über das Eingabefeld bewegt, wird auf der rechten Seite ein Pfeil sichtbar, worüber die Vorschlagsliste geöffnet wird und woraus ein Wert ausgewählt werden kann. Setzt man den Cursor in das Eingabefeld und beginnt, ein Wort einzutippen, werden die passenden Werte angezeigt und können ausgewählt werden, z.B. mit einem Mausklick oder über Pfeil-Unten-Taste + Tab-Taste. Bei älteren Browsern kann es sein, dass die Funktion nicht umgesetzt wird.

Weitere Attribute, die ab HTML5 verwendbar sind.

  • form: Mit diesem Attribut wird ein Eingabefeld einem Formular zugewiesen. Als Wert wird die ID des Formulars eingetragen, z.B. form="formularid". Damit ist es auch möglich, das Eingabefeld außerhalb des FORM-Tags zu platzieren. Hierfür muss dem FORM-Tag eine ID zugewiesen worden sein.
  • autocomplete: Als Werte sind "on" oder "off" möglich. Damit kann festgelegt werden, ob die Daten in den Formularfeldern erhalten bleiben bzw. automatisch vervollständigt werden sollen, wenn man nach dem Abschicken des Formulars die Webseite mit dem Formular erneut besucht, z.B. über die Zurück-Schaltfläche des Browsers.
  • placeholder: Wofür man früher JavaScript benötigte, ist ab HTML5 ohne die Scriptsprache möglich. Mit diesem Attribut kann ein Text definiert werden, der das Textfeld beschreibt und initial in leicht grauer Schriftfarbe im Textfeld angezeigt wird, sodass die Benutzer beim Ausfüllen einen Hinweis erhalten. Ein Beispielcode.
<input type="text" placeholder="Hinweistext">

Die Auswirkung des Attributs placeholder kann im folgenden Eingabefeld getestet werden.

Nach der Eingabe eines Zeichens wird der Hinweistext überschrieben und der eingegebene Text wird angezeigt. Der Text wird beim Abschicken des Formulars an ein Script nicht übertragen, wenn keine Eingaben darin gemacht wurden. Bei älteren Browsern kann es sein, dass das Attribut keine Wirkung hat.

  • autofocus: Legt fest, dass nach dem Laden der Webseite der Cursor in das Eingabefeld gesetzt wird. Der Code kann in HTML5 sowohl in minimierter Form, als auch in XHTML-Schreibweise geschrieben werden. Zwei Beispiele.
<!-- Gewöhnliche HTML-Schreibweise -->
<input type="text" autofocus>

<!-- XHTML-Schreibweise -->
<input type="text" autofocus="autofocus /">
  • required: Definiert ein Pflichtfeld. Auch das Attribut kann in HTML5 in verkürzter Form oder in Langform in der XHTML-Schreibweise geschrieben werden. Ein Beispielcode.
<!-- Gewöhnliche HTML-Schreibweise -->
<input type="text" required>

<!-- XHTML-Schreibweise -->
<input type="text" required="required /">
  • pattern: Damit kann man für ein Eingabefeld reguläre Ausdrücke definieren, die in gewöhnlichen Programmiersprachen geläufig sind. HTML ist zwar keine Programmiersprache, trotzdem haben die regulären Ausdrücke Einzug erhalten. Damit werden Muster in Zeichenketten beschrieben, die erlaubt sind. Beispielsweise könnte man definieren, dass nur Großbuchstaben und maximal 2 Zeichen erlaubt sind. Der reguläre Ausdruck würde in der Form pattern="[A-Z]{2}" eingegeben werden.
  • title: Der Titel erscheint entweder als Tooltip, wenn der Mauszeiger über das Textfeld bewegt wird oder wenn die Eingabe ungültig ist. Ein Beispielcode mit pattern und title.
<!-- Code mit regulärem Ausdruck und Titel -->
<input type="text" pattern="[A-Z]{2}" title="Nur 2 Großbuchstaben">

<!-- Code für Schaltfläche -->
<input type="submit" value="Abschicken">

Die Auswirkungen können im folgenden Eingabefeld getestet werden. Zum Testen des Tooltips kann man den Mauszeiger über das Eingabefeld bewegen. Zum Testen der regulären Ausdrücke einmal 2 Kleinbuchstaben eingeben und abschicken und einmal 1 Großbuchstaben und 1 Zahl eingeben und abschicken.

Solche Prüfungen laufen über den Browser und somit clientseitig ab und ersetzen nicht die serverseitige Prüfung. Man könnte z.B. mit einem alten Browser die Seite aufrufen und somit die Gültigkeitsprüfung umgehen. Daher sollten Formulardaten am Ende immer serverseitig vom verarbeitenden Script überprüft werden.

Positionierung des INPUT-Tags innerhalb von Block-Elementen

Die zuvor beschriebenen Codebeispiele haben einen kleinen Schönheitsfehler. Denn, der INPUT-Tag ist ein Inline-Element und muss für die korrekte Syntax innerhalb eines Block-Elements platziert werden, z.B. in einem DIV- oder P-Tag. Ein Beispielcode.

<div><input type="text" name="stadt"></div>

Die Formatierung des Eingabefelds und/oder des umschließenden Block-Elements kann bequem über CSS erfolgen.