HTML input – Eingabefeld in einem Formular

HTML Formulare: input Schaltflächen, Buttons, Radio

input erzeugt Eingabefelder, Schaltflächen, Checkboxen und Radiobuttons in einem Formular. Funktion und Ausssehen des input-Tags werden durch das Attribut type gesteuert.

Einige Eingabefelder des Formulars können durch CSS formatiert werden – dennoch hängt die exakte Darstellung der Felder vom Browser ab.

Zwischen die öffnende und schließende Klammer des HTML form-Tags können beliebig viele input-Felder gesetzt werden. In HTML5 muss das input-Tag nicht mehr innerhalb eines form-Elements liegen. Das form-Attribut erzeugt die Verbindung zum Formular.

Eingabefelder

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

<input type="text" name="spind" value="">
            ^          ^             ^ 
            |          |             + --- Angezeigter Wert
            |          |                   überträgt die Eingabe an den Server
            |          |
            |          + --- identifiziert das Feld 
            |                in der Anwendung
            |
            + --- Art des Eingabefelds, 
                  z.B. Text oder Checkbox

name- und value-Attribut melden die Daten des Eingabefeldes an die 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. unterbunden werden.

Neben type hat das input-Tag eine lange Liste von Attributen für verschiedene Typen von Eingabefeldern und die Benutzerführung:

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-Tag 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.
autocompleteAuto-Vervollständigen, mögliche Werte sind on | off
disabledaußer Kraft gesetzt, Feld wird gezeigt, ist aber ausgegraut
nameIdentifiziert das Feld in der Anwendung auf dem Server
maxlengthMax. Zahl von Zeichen, die der Benutzer eingeben kann
patternRegulärer Ausdruck zur Prüfung der Benutzereingabe
placeholderPlatzhalter, wird von einem evt. Wert in value überschrieben
readonlyNur lesender Zugriff
requiredErforderlich
sizeGröße des Feldes
valueEingabewert des Benutzers
oninput, onfocus, onblur, onselect, onchangeJavascript-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.

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

type file

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

type="file" hängt eine Datei an ein Formular, die bei der Übertragung auf den Server zusammen mit den Formulardaten geladen wird.

  • Die meisten Browser spielen ein Eingabefeld und eine Schaltfläche „Durchsuchen“ ein, damit der Benutzer die Datei in seinen lokalen Ordnern suchen kann. Alternativ können Sie Pfad und Namen der Datei in das Eingabefenster setzen.
  • Im <form>-Tag muss enctype="multipart/form-data" stehen.
  • Das Attribut value wird nicht benutzt.
weitere Attribute bei type="file"
accept, multiple, required

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="svg/img-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.

023473 Dein Name Spin Schlüssel