HTML input – Eingabefeld in einem Formular

HTML form input: Schaltflächen, Buttons, Radio-Buttons

input erzeugt Eingabefelder, Schaltflächen, Checkboxen und Radiobuttons in einem Formular. Funktion und Ausssehen des input-Tags werden durch das Attribut type gesteuert. Formularfelder können durch CSS formatiert werden – dennoch hängt die exakte Darstellung der Felder vom Browser ab.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

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

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

Eingabefelder für Text

  • type="color"
  • type="email"
  • type="number"
  • type="password"
  • type="range"
  • type="search"
  • type="tel"
  • type="text"
  • type="url"

Zeitangaben

  • type="time"
  • type="date"
  • type="week"
  • type="month"
  • type="datetime-local"

Auswahl

  • type="radio"
  • type="checkbox"
  • list="datalist"

Interaktiv

  • type="submit"
  • type="button"
  • type="image"
  • type="reset"

Eingabefelder für Dateien

Weitergabe von Daten

  • type="hidden"

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

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.