Dez 2007

HTML-Tag input – Eingabefeld in einem Formular

 
 

Das <input>-Tag erzeugt Eingabefelder, Schaltflächen, Checkboxen und Radiobuttons in einem Formular. Funktion und Ausssehen des input-Elements werden durch das type-Attribut gesteuert. Einige Eingabefelder des Formulars können durch Stylesheets formatiert werden – dennoch hängt die exakte Darstellung der Felder vom Browser ab.

Eine beliebige Anzahl von <input>-Tags kann zwischen den öffnenden und schließenden Klammern des form-Tags notiert werden.

Das <input />-Tag ist leer. Anstelle des schließenden Tags kann ein Schrägstrich das Ende des Elements anzeigen: <input ... />

Für die Verarbeitung von Formularen kann zwar 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.

Die wichtigesten 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.
value
weist einem Feld einen Anfangswert zu, z.B. einen Text oder eine Zahl. name und value bilden die Name-/Wert-Paare, die das Formular an die weiter verarbeitende Anwendung überträgt.

Die verschiedenen Typen von Eingabefeldern

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

<input type="text" name="" value="" />
 
<input type="password" … />
ist das Arbeitspferd unter den Formularfeldern und spielt ein einzeiliges Feld für Informationen wie Telefonnummern oder Benutzernamen ein.
  • Die Größe des Feldes hängt vom Browser ab und beträgt meist 20 bis 30 Zeichen. Die Größe wird über das size-Attribut und/oder durch eine CSS-Regel gesteuert.
  • maxlength bestimmt die maximale Anzahl von Zeichen, die das Steuerfeld akzeptiert.
  • Das value-Attribut kann einen Text in das Eingabefenster setzen, aber seine Benutzung ist optional.
  • Wenn mehr als eine Zeile erforderlich ist, soll anstelle des <input>-Tags mit type="text" das <textarea>-Tag benutzt werden.
 spielt ein einzeiliges Feld für die maskierte Eingabe eines Passwortes ein. Statt der eingegebenen Zeichen erscheinen Sterne oder Kugeln (bullets) für jedes Zeichen.
  • Die Größe des Feldes hängt vom Browser ab und beträgt meist 20 bis 30 Zeichen. Die Größe wird über das size-Attribut und/oder durch eine CSS-Regel gesteuert.
  • maxlength legt die maximale Anzahl von Zeichen fest, die das Eingabefeld akzeptiert, stellt aber 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.
accesskey, disabled="disabled", maxlength, name, readonly="readonly", size, tabindex, value
onfocus, onblur, onselect, onchange		 accesskey, disabled="disabled", maxlength, name, size, tabindex, value
onfocus, onblur, onselect, onchange		 
<input type="file" />
 
<input type="hidden" />
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.
 fügt Daten in ein Formular ein, die der Besucher nicht sehen und ändern kann. Bei der Übermittlung des Formulars wird der versteckte Inhalt zusammen mit den anderen Daten an die Anwendung übertragen. Auf diese Weise können z.B. Formulardaten über mehrere HTML-Seiten hinweg gesammelt und weiter gegeben werden.
  • Der versteckte 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.
accept, accesskey, name, tabindex
onfocus, onblur, onchange		 name, value 
<input type="checkbox" name="" checked="checked" value="" /> aktiv
<input type="checkbox" name="" value="" /> inaktiv
 
<input type="radio" name="color" value="grün" />
rot grün
Schaltfläche für simple Abfragen wie „Rückruf erwünscht". 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.
 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. Wird ein Radiobutton aktiviert, erscheint ein schwarzer Punkt in der Mitte.
  • checked="checked" führt eine Voreinstellung der Radiobutton-Liste durch.
  • Eine zusammengehörende Gruppe von Radiobuttons muss denselben Wert des name-Attributs 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.
accesskey, checked="checked", name, tabindex
onfocus, onblur, onchange		 accesskey, checked="checked", disabled="disabled", name, tabindex, value
onfocus, onblur, onchange		 
<input type="image" src="bild.png" />
 
<input type="submit" />
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.
 erzeugt die Schaltfläche zum Absenden der Formulardaten.
Per Vorgabe ist die Schaltfläche grau und zeigt den Text „Submit“. Die Farbe kann durch eine CSS-Regel 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 Steuerfeld des Formulars einen Namen zu geben.
  • Wenn das Attribut value benutzt wird, wird sein Wert zusammen mit dem Inhalt übermittelt.
accesskey, alt, height, ismap="ismap", usemap, name, src, tabindex, width
onfocus, onblur		 accesskey, disabled="disabled", name, tabindex, value
onfocus, onblur		 
<input type="reset" />
 
<input type="button" value="ABG zeigen" />
erzeugt eine Schaltfläche, die alle Felder des Formulars auf die Anfangswerte zurücksetzt.
  • Per Vorgabe ist der Resetschalter 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 Steuerfeld eines Formulars einen Namen zu geben.
 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 zwingend 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.
accesskey, disabled="disabled", tabindex, value
onclick, onblur, onfocus		 accesskey, disabled="disabled", name, tabindex, value
onfocus, onblur

Weitere Attribute für input-Elemente

accept
ist eine Komma-getrennte Liste, die zusammen mit type="file" benutzt wird, um die Typen der Dateien (inklusive des Pfades) festzulegen, die an das Formular angehängt werden können.
Beispiel
<input type="file" name="file" accept="text/" />
soll nur Dateiuploads mit dem Mimetyp "text" (.txt, .html, ... ) zulassen.
accesskey
bestimmt eine Taste auf der Tastatur, die zusammen mit der Alt-, Strg- oder Befehlstaste einen Link aktiviert. Das Attribut wird nicht von allen Browsern unterstützt und die meisten Werte werden bei einigen Browsern mit der Vorbelegung der Tastatur kollidieren.
Beispiel
<input type="text" name="textfield" accesskey="4" />
alt
setzt einen Text anstelle des Bildes, wenn der Browsern das Bild nicht anzeigen kann.
checked="checked"
Wenn das Attribut vorhanden ist, ist eine Checkbox oder ein Radiobutton vorselektiert und weist einen vorgegebenen Wert auf.
disabled
Wenn das Attribut vorhanden ist, ist das Steuerfeld ausgeschaltet und funktioniert nicht. In einigen Browsern erscheint das Feld ausgegraut.
Beispiel
<input type="text" name="textfield2" disabled="disabled" />
ismap
Wenn das Attribut vorhanden ist, handelt es sich bei dem Bild um eine klickbare serverseitige Image Map.
maxlength
bestimmt die maximale Anzahl von Zeichen, die in einer Zeile eines Textfensters eingegeben werden kann.
readonly
spielt einen Wert in ein Steuerfeld ein, der vom Besucher nicht geändert werden kann.
Beispiel
<input type="text" name="textfield5" value="Bleibt wie es ist" readonly="1" />
size
bestimmt die Breite einer Textzeile durch die Angabe der Anzahl von Zeichen, die in das Textfenster passt.
src
ist die URL oder das Verzeichnis (Pfad/Name), in dem eine Datei gespeichert ist.
tabindex
ist eine ganze Zahl, die den Rang innerhalb der Tabulatoraufrufe bei der Navigation mit der Tastatur festlegt. Das Attribut wird nur zögerlich unterstützt.
usemap
Namen einer Image Map, die mit dem Element verknüpft werden soll – legt fest, dass es sich hier um eine klickbare clientseitige Image Map handelt.

Kernattribute und Ereignisse für input-Elemente

KernattributeEreignisse
class, dir, id, lang, style, title

Zum Seitenanfang

   

Galileo Design

Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering Ulrike Häßler 50226 Frechen-Königsdorf • Impressum und Nutzungsbestimmungen