HTML input – Eingabefeld in einem Formular

Eingabefelder

In HTML5 müssen input-Tags nicht mehr innerhalb von öffnenden und schließenden HTML form-Tags liegen, wenn das form-Attribut des input-Tags die Verbindung zum Formular und damit zur verarbeitenden Anwendung herstellt.

Das Anzeige und die Form des input-Elemente wird wird durch die Attribute bestimmt, in erster Linie durch das type-Attribut.

         ┌── Art des Eingabefelds,
         │   z.B. text oder checkbox
         ▼
<input type="text" name="spind" value="Ahoi">
                     ▲            ▲ 
                     │            │ 
   identifiziert   ──┘            │ 
   das Feld in                    │ 
   der Anwendung             Angezeigter Wert –
                             überträgt die Eingabe 
                             an den Server

Das input-Element ist leer (void), ist ein inline-Element, das keinen Zeilenumbruch erzeugt. In HTML 5 muss es nicht mehr mit einem Schrägstrich vor der schließenden spitzen Klammer geschlossen werden.

name- und value-Attribut identifizieren die Daten des Eingabefeldes gegenüber der Anwendung auf den Server.

Der blaue Rahmen, den die Browser um ein aktiviertes Eingabefeld legen, ist die Bestätigung für den Benutzer, dass er das Feld fokussiert hat. Der Rahmen entsteht durch CSS outline und kann durch CSS input:focus { outline: none; } unterdrückt werden.

input type

Aus dem einfachen type="text", type="password" und type="hidden" der Anfangszeiten hat sich eine lange Liste von spezialisierten Eingabefeldern entwickelt. Sie sollen dem Benutzer durch Voreinstellungen entgegen kommen und das Ausfüllen des Formulars erleichtern.

Ältere Browser, die noch keinen Support für diese input-Elemente bieten, interpretieren die Felder als type="text".

Mehr zur Darstellung der verschiedenen Typen des input-Elements.

Input name und value

Das name-Attribut identifiziert das Eingabefeld in der Anwendung auf dem Server und muss ähnlich wie ein id-Attribut eindeutig sein.

value ist leer, aber kann z.B. vorhandene Daten aus der Anwendung zeigen oder optional einen Vorgabewert, den der Benutzer überschreiben kann.

Das Formular überträgt den Wert des name-Attributs und die Eingabe des Benutzers aus dem value-Attribut beim Absenden der Daten an die Anwendung.

Javascript kann die Eingaben des Nutzers schon vor dem Absenden des Formular prüfen: Formulare mit Javascript validieren. Aber wenn die Daten aus dem Formular gespeichert oder per Email versendet werden sollen, wird eine Anwendung auf dem Server benötigt.

input type = text

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

Das input-Element mit type="text" ist das Arbeitspferd unter den Formularfeldern und spielt ein einzeiliges Feld für Informationen wie Telefonnummern oder Benutzernamen ein.

• Die vorgegebene Größe des Feldes beträgt meist 20 bis 30 Zeichen und wird über das Attribut size und/oder durch eine CSS-Regel gesteuert.
• maxlength maximale Anzahl von Zeichen, die das Eingabefled akzeptiert.
• value kann einen Text in das Eingabefled setzen (optional).
• Wenn mehr als eine Zeile erforderlich ist, soll anstelle des <input>-Tags mit type="text" das <textarea>-Tag benutzt werden.

type password

<input type="password" placeholder="Passwort" name="passwort">

einzeiliges Feld für die maskierte Eingabe eines Passwortes. Statt der eingegebenen Zeichen erscheinen Sterne oder Kugeln (bullets).

• Die vorgegebene Größe des Feldes beträgt meist 20 bis 30 Zeichen. Die Größe wird über das Attribut size und/oder durch eine CSS-Regel gesteuert.
• maxlength maximale Anzahl von Zeichen des Eingabefelds, stellt keine sichere Methode zur Abfrage des Passwortes dar.
• Zwar ist das Passwort auf dem Bildschirm nicht sichtbar, aber das Passwort wird unverschlüsselt als Teil des Formularinhalts übermittelt.

Weitere Attribute bei type="password"

autocomplete, maxlength, name, pattern, placeholder, readonly, required, size, value

input type file

type="file" erzeugt einen Button, mit dem der Benutzer eine oder mehrere Datei eines lokalen Verzeichnisses für einen File-Upload wählt.

<input type="file" name="upload">

• Die meisten Browser spielen ein Eingabefeld und eine Schaltfläche »Durchsuchen« oder »Datei auswählen« ein, damit der Benutzer die Datei in seinen lokalen Ordnern suchen kann.
• Im <form>-Tag muss enctype="multipart/form-data" stehen.
• Das Attribut value wird nicht benutzt.

Das Attribut multiple bereitet das Eingabefeld darauf vor, dass mehrere Dateien hochgeladen werden können.

type hidden

<input type="hidden" name="event" value="E4711">

Eingabefelder vom Typ hidden sind im Formular nicht sichtbar. Bei der Übermittlung des Formulars werden die Name/Wert-Paare von verdeckten Feldern zusammen mit den anderen Daten an die Anwendung übertragen. Auf diese Weise werden Formulardaten über mehrere HTML-Seiten hinweg gesammelt und weiter gegeben.

• Der verdeckte Inhalt ist ein Name/Wert-Paar.
• Der Name wird mit dem Attribut name angegeben. Das Attribut value muss ebenfalls gesetzt werden und kann eine beliebige Zeichenkette sein.

Weitere Attribute bei type="hidden"

name, value

input type="submit" / button "type=submit"

<input type="submit">

erzeugt den Button zum Absenden der Formulardaten. Per Vorgabe ist die Schaltfläche grau und zeigt den Text Senden (oder Submit). Farbe und Schriftgröße können durch CSS geändert werden.

weitere Attribute bei type="submit"

form, formaction, formenctype, formmethod, formnovalidate, formtaget, name, value

• Das Attribut value ändert den Text der Schaltfläche.
• Der Text innerhalb der Schaltfläche bestimmt die minimale Größe. Die Größe kann durch ein Stylesheet oder das size-Attribut geändert werden.
• Das Attribut name ist nicht immer erforderlich, aber es ist üblich, jedem Eingabefeld des Formulars einen Namen zu geben.
• Wenn das Attribut value benutzt wird, wird sein Wert zusammen mit dem Inhalt übermittelt.

Der submit-Button ist der Kern des Formulars – gleich ob er als input- oder mit einem HTML-Button-Tag deklariert ist.

input type="image"

Anstelle von input type="submit" kann ein input-Element vom Typ image das Absenden der Formulardaten auslösen.

<input src="button.svg" type="image" alt="Senden als Email">

Bei input type="image" wird kein value-Attribut aufgeführt.

weitere Attribute bei type="image"

alt, form, formaction, formenctype, formmethod, formnovalidate, formtaget, height, name, src, width

type reset

<input type="reset">

erzeugt eine Schaltfläche, die alle Felder des Formulars auf die Anfangswerte zurücksetzt.

• Per Vorgabe ist der Reset-Button grau und zeigt den Text "Reset". Ein Stylesheet kann die Farbe ändern und das Attribut value einen alternativen Text angeben.
• Die Größe kann durch CSS geändert werden.
• Das Attribut name ist nicht erforderlich, aber es ist gängige Praxis, jedem Eingabefeld eines Formulars einen Namen zu geben.

weitere Attribute bei type="reset"

accesskey, disabled, form, tabindex, value, onclick, onblur, onfocus

Damit immer noch nicht genug zu den verschiedenen input-Typen: Da wären noch Checkboxen und Radiobuttons: input type checkbox und type radio.

input – Attribute

name

Identifiziert das Feld in der Anwendung auf dem Server

value

Eingabewert des Benutzers

autocomplete

Auto-Vervollständigen, mögliche Werte sind on | off

disabled

außer Kraft gesetzt, Feld wird gezeigt, ist aber ausgegraut

list

Identifiziert das datalist-Element mit Vorschlägen für die Eingabe

minlength, maxlength

Min. / max. Zahl von Zeichen, die der Benutzer eingeben kann

min / max

in Feldern, die die Eingabe auf einen Bereich einschränken

multiple

Ob der Benutzer mehr als einen Wert eingeben darf (z.B. bei type="email")

pattern

Regulärer Ausdruck zur Prüfung der Benutzereingabe

placeholder

Platzhalter, wird von einem evt. Wert in value überschrieben

readonly

Nur lesender Zugriff

required

Feld als erforderlich kennzeichnen

size

Größe des Feldes

step

Schrittweite bei input type="range"

oninput, onfocus, onblur, onselect, onchange

Javascript-Aufrufe

<input type="text" 
       autocomplete="on"
       name="me" 
       pattern="[A-Z0-9]+"
       maxlength="8"
       placeholder="mein Feld"
       required 
       value="A200">

Das Feld akzeptiert nur Großbuchstaben von A bis Z und Ziffern (pattern), insgesamt max. 8 Zeichen. Eine falsche Eingabe wird dem Benutzer durch CSS input:invalid { border-color: red; } angezeigt.

Auf diese Validierung darf sich niemand verlassen, die Prüfung durch CSS ist nur eine Benutzerhilfe.