CSS, HTML und Javascript mit {stil}

HTML input – Eingabefeld in einem Formular

HTML input023473Dein NameSpinSchlüssel

input erzeugt Eingabefelder, Schaltflächen, Checkboxen und Radiobuttons in einem Formular. Funktion und Ausssehen des input-Elements 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.

Aktivierte Eingabefelder werden mit einem blauen Rahmen markiert – der Rahmen kann mit dem CSS-Stil input:focus { outline: none; } unterdrückt werden.

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.

Das input-Tag ist leer.

<input type="text" name="spind" value="">
            ^          ^             ^ 
            |          |             + --- Angezeigter Wert
            |          |
            |          + --- identifiziert das Feld 
            |                in der Anwendung
            |
            + --- Art des Eingabefelds, 
                  z.B. Text oder radio-Button

Das name-Attribut identifiziert das Eingabefeld in der Anwendung. value ist leer, aber kann z.B. vorhandene Daten aus der Anwendung zeigen. Das Formular überträgt den Wert des name-Attributs und die Eingabe des Benutzers beim Absenden an die Anwendung.

Für die Verarbeitung von Formularen kann eine clientseitige Scriptsprache wie Javascript eingesetzt werden – aber wenn die Daten aus dem Formular gespeichert werden sollen, wird eine Anwendung auf dem Server benötigt.

HTML5-Attribute für Eingabefelder.

Input Attribute

type
Art des input-Feldes fest – Texteingabe, Checkbox, Passwort usw.
name
Name eines Feldes. Der Name muss im Dokument eindeutig sein und kann nicht wieder verwendet werden. Das name-Attribut des input-Tags richtet sich an die Anwendung, die das Formular auf dem Server verarbeitet. Wenn es eine PHP-Anwendung ist, empfängt das PHP-Programm die Eingaben durch das Name-/Wert-Paar (name, value).
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.
accept
nur bei type="file"
Dateitypen, die vom Server akzeptiert werden (audio/*, video/*, image/*, MIME_type)
alt
nur bei type="image"
Alternativer Text für Bilder
autocomplete HTML5
Automatisches Vervollständigen
autofocus HTML5
Feld bekommt den Fokus, wenn die Seite geladen wurde
checked
nur bei type="checkbox" und type="radio"
Markiert ein Feld als vorgewählt
disabled
Feld ist nicht aktiviert
form HTML5
Ein oder mehrere Formulare, zu denen ein input-Element gehört, das nicht innerhalb des form-Tags liegt
formaction HTML5
URL der Anwendung, mit der die Eingabe beim Absenden des Formulars verarbeitet wird.
formenctype HTML5
nur type="submit" und type="image"
Encodierung der Daten beim Absenden (application/x-www-form-urlencoded, multipart/form-data, text/plain)
formmethod HTML5
nur type="submit" und type="image"
Methode für die Übermittlung der Formulardaten
formnovalidate HTML5
Formulardaten beim Absenden nicht validieren
formtarget HTML5
nur type="submit" und type="image"
Gibt an, wo die Antwort nach der Übermittlung angezeigt wird (_blank, _self, _parent, _top, framename)
height, width HTML5
nur type="image"
Höhe bzw. Breite des Bildes
list HTML5
datalist_id, ein datalist-Element mit optionalen Werten für das Eingabefeld
max, min HTML5
Maximaler bzw. minimaler Wert des Eingabefelds
maxlength
max. Zahl von Zeichen
multiple HTML5
Benutzer kann mehrere Eingaben als Wert angeben
pattern HTML5
Regulärer Ausdruck, der die Eingabe auf bestimmte Zeichen beschränkt
placeholder HTML5
Hinweis, was der Benutzer in das Eingabefeld eintragen soll
readonly
Das Eingabefeld kann Werte anzeigen, aber nicht vom Benutzer ausgefüllt werden
required HTML5
Das Eingabefeld muss ausgefüllt werden
size
Zahl der Zeichen, die das Eingabefeld akzeptiert
src
nur bei type="image"
URL des Bildes einem submit-Button
step HTML5
Schrittweite oder Intervall für ein Eingabefeld
type
Typ des Eingabefeldes

Input Types

Die Funktion des <input>-Tags wird durch das type-Attribut bestimmt:

type text

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

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.
weitere Attribute bei type="text"
accesskey, disabled, form, maxlength, name, readonly, size, tabindex, value, onfocus, onblur, onselect, onchange

type password

<input type="password" name="passwort" value="">

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 Attriubte bei type="password"
accesskey, disabled, maxlength, name, size, tabindex, value, onfocus, onblur, onselect, onchange

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.
  • Aus Sicherheitsgründen kann immer nur eine Datei pro Feld ausgewählt werden.
weitere Attribute bei type="file"
accept, accesskey, form, name, tabindex onfocus, onblur, onchange

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"
form, name, value

type checkbox

<input type="checkbox" name="cc" checked value=""> Kopie an meine Mailbox
<input type="checkbox" name="tel" value=""> Rückruf

Schaltfläche für simple Abfragen wie „Rückruf erwünscht" oder „Kopie an meine Mailbox". Wird die Schaltfläche aktiviert, erscheint ein Kennzeichen in der Box.

  • checked="checked" führt eine Voreinstellung der Checkbox durch.
  • Wenn die Checkbox aktiviert wurde, wird der Wert value bei der Übermittlung des Formulars an die Anwendung geschickt.
  • Der Wert einer inaktiven Checkbox wird nicht gespeichert oder übermittelt.
weitere Attribute bei type="checkbox"
accesskey, checked, form, name, tabindex, onfocus, onblur, onchange

type radio

<input type="radio" checked name="color" value="rot"> Rot
<input type="radio" name="color" value="grün"> Grün

Radiobuttons präsentieren dem Benutzer eine Liste, in der er nur eine Wahl treffen kann – z.B. die Farbe eines T-Shirts aus fünf Farben. Der Browser erzeugt dazu runde Schalter mit weißer Mitte. Größe und Farbe können nicht geändert werden. Der aktive Radiobutton zeigt einen schwarzer Punkt in der Mitte.

  • checked="checked" führt eine Voreinstellung der Radiobutton-Liste durch.
  • Eine zusammengehörende Gruppe von Radiobuttons muss dasselbe name-Attribut aufweisen, aber einen jeweils anderen Wert für value.
  • Nur der Wert des markierten Radiobuttons wird mit den Formulardaten übertragen, nicht aber die Werte nicht gewählter Radiobuttons.
weitere Attribute bei type="radio"
accesskey, checked, disabled, form, name, tabindex, value, onfocus, onblur, onclick

type image

<input type="image" src="bild.png" value="Senden">

funktioniert wie die submit-Schaltfläche, setzt aber eine Grafik anstelle der Browservorgabe ein.

  • Die Schaltfläche kann auch eine maussensitive Image Map sein. Beim Klick mit der Maus übergibt der Browser auch die xy-Koordinaten (in Pixel) an die Anwendung. Wenn diese Koordinaten von der Anwendung ausgewertet werden, empfiehlt das W3C die Benutzung mehrerer Grafikschaltflächen oder serverseitige Image Maps.
  • scr gibt den Speicherplatz der Datei an.
  • Das alt-Attribut kann einen alternativen Text zeigen, falls der Browser keine Bilder darstellen kann.
weitere Attribute bei type="image"
accesskey, alt, form, height, ismap, usemap, name, src, tabindex, width, onfocus, onblur

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.

  • 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 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.
weitere Attribute bei type="submit"
accesskey, disabled, form, name, tabindex, value, onfocus, onblur

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 ein Stylesheet 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

type button

<input type="button" value="ABG zeigen">

erzeugt eine Schaltfläche, die geklickt wird, damit ein Script eine Aktion durchgeführt – z.B. weitere Eingabefelder bereitstellt. Dabei werden aber keine Daten zur Anwendung übertragen.

  • Wenn das Formular zurückgesetzt oder abgeschickt werden soll, sollen type="reset" und type="submit" angewendet werden
  • Ein Wert für das Attribut name ist erforderlich.
  • Das value-Attribut stellt einen Text in der Schaltfläche dar. Der Text auf der Schaltfläche bestimmt die minimale Größe. Eine andere Größe und die Farbe können durch ein Stylesheet festgelegt werden.
weitere Attribute bei type="button"
accesskey, disabled, form, name, tabindex, value, onfocus, onblur