INPUT - Formular Eingabefeld

Das INPUT-Element definiert eine Formular Kontrolle für den User um Eingaben zu machen. Auch wenn INPUT am nützlichsten innerhalb eines FORM-Elements ist, erlaubt HTML 4 INPUT in allen Block-Level- oder Inline-Elementen, anders als BUTTON. Wie auch immer, ältere Browser wie Netscape 4.x stellen jedoch keine INPUT-Elemente außerhalb von FORM dar.

Wenn ein Formular übertragen wurde, wird der aktuelle Wert jedes INPUT-Elements innerhalb von FORM als Name/Value-Paar an den Server gesendet. Das NAME-Attribut des INPUT-Elements bietet den zu verwendenden Namen. Der Wert, der versendet wird, hängt vom Typ der Formular Kontrolle und der Eingabe des Users ab.

Der Typ der Formular Kontrolle, der durch INPUT definiert ist, wird vom TYPE-Attribut bereitgestellt. Der Standardwert von TYPE ist text, wodurch ein einzeiliges Texteingabefeld erzeugt wird. Das VALUE-Attribut spezifiziert den Initialwert für das Textfeld. Die SIZE- und MAXLENGTH-Attribute bestimmen die Anzahl der Zeichen und die maximale Anzahl der Zeichen des Feldes.

Trotzdem das MAXLENGTH-Attribut eine effektive Führung für den User sein kann, sollten Autoren sich nicht auf die Einhaltung der maximalen Zeichenanzahl durch den Client verlassen. Ein User könnte z.B das HTML-Dokument kopieren, das MAXLENGTH-Attribut entfernen und das Formular verschicken. Die Autoren von Form Handlern sollten sicher gehen, dass alle notwendigen Eingabelängenüberprüfungen auf der Serverseite wiederholt werden.

Der Password-Eingabetyp ist eine Variante des Text-Typs. Der einzige Unterschied besteht darin, dass die Eingabezeichen maskiert werden, normalerweise durch eine Reihe von Sternchen, um vertrauliche Informationen vor Zuschauern zu schützen. Nehmen Sie zur Kenntnis, dass der aktuelle Wert an den Server als Klartext verschickt wird, somit bieten Passwortfelder keinen ausreichenden Schutz für Kreditkartennummern oder andere höchstvertrauliche Informationen.

Das folgende Beispiel verwendet Text und Password-Felder zusammen mit dem LABEL-Element um Kennzeichnungen an die INPUT-Elemente anzubringen:

<P><LABEL ACCESSKEY=U>Username: <INPUT TYPE=text NAME=username SIZE=8 MAXLENGTH=8></LABEL></P>
<P><LABEL ACCESSKEY=P>Passwort: <INPUT TYPE=password NAME=pw SIZE=12 MAXLENGTH=12></LABEL></P>

Die Radio- und Checkbox-Eingabetypen bieten Umschaltoptionen, die vom User aktiviert oder deaktiviert werden können. Die beiden Typen unterscheiden sich in soweit, dass Radio-Buttons gruppiert werden (indem man in jedem INPUT das gleiche NAME-Attribut verwendet), sodass immer nur ein Radio-Button einer Gruppe gleichzeitig ausgewählt werden kann. Checkboxen können auch ohne das Ändern anderer Checkboxen mit gleichem NAME-Attribut ausgwählt werden. Das VALUE-Attribut benötigen sowohl Radio-Buttons als auch Checkboxen, es gibt den Wert des Feldes an, wenn es ausgewählt ist. Das boolesche CHECKED-Attribut spezifiziert, dass das Feld schon von vornherein ausgewählt ist.

Einige Browser erwarten, dass immer ein Radio-Button in einer Gruppe ausgewählt ist. Um sicher zu stellen, dass eine geeignete Standardwahl vorgegeben ist, können Autoren eines der Radio-INPUT Elemente als CHECKED definieren.

Im folgenden Beispiel kann nur eine Zahlungsmethode vom User ausgewählt werden, da die Radio-Buttons das gleiche NAME-Attribut besitzen:

Der File-Eingabetyp erstellt ein Feld durch welches die User Dateien von ihrem lokalen Computer oder Netzwerk hochladen können. Das VALUE-Attribut spezifiziert einen Namen als Initialwert, der aber normalerweise von den Browsern als eine Vorsichtsmaßnahme ignoriert wird. Das ACCEPT-Attribut gibt eine durch Kommata-getrennte Liste mit akzeptierten Mediatypen an, welche den Browser unpassende Dateien herausfiltern lässt. Aktuelle Browser ignorieren das ACCEPT-Attribut generell.

Ein Formular, das ein File-INPUT-Feld besitzt, muss die Attribute METHOD=post und ENCTYPE="multipart/form-data" im <FORM>-Tag setzen. CGI Libraries, wie CGI.pm, ermöglichen eine einfache Handhabung solcher Formulare.

Das folgende Beispiel erlaubt dem User ein HTML-Dokument zur Gültigkeitsprüfung hochzuladen:

<FORM METHOD=post ACTION="/cgi-bin/validate.cgi" ENCTYPE="multipart/form-data">
<P>Select an HTML document to upload and validate. If your browser does not support form-based file upload, use one of our <A HREF="methods.html">alternate methods of validation</A>.</P>
<P><INPUT TYPE=file NAME="html_file" ACCEPT="text/html"></P>
<P><INPUT TYPE=submit VALUE="Validate it!"></P>
</FORM>

Das Hidden-Eingabefeld erlaubt den Autoren Daten in das Formular einzubinden ohne sie dem User zu zeigen. Das ist teilweise sehr nützlich in Formularanwendungen, die sich über mehrere HTML-Dokumente erstrecken; die Eingaben der User können so von Formular zu Formular über Hidden-Eingabefelder mit übertragen werden. Einige CGI-Scripts verwenden Hidden-Eingabefelder um Variablen für das Script zu definieren, wie im folgenden Beispiel, welches den Empfänger und den Betreff des E-Mailinhalts des Formulars festlegt:

<INPUT TYPE=hidden NAME=recipient VALUE="liam@htmlhelp.com">
<INPUT TYPE=hidden NAME=subject VALUE="Feedback on your HTML Reference">

Nehmen Sie zur Kenntnis, dass Felder, die das Attribut "hidden" haben nur nicht vom Browser angezeigt werden. Es kann trotzdem jeder den Quellcode des HTML-Dokuments einsehen um die "versteckten" Felder zu entdecken.

Der TYPE-Wert Reset definiert einen Button mit dem der User das Formular auf seine Initialwerte zurücksetzen kann. Das optionale VALUE-Attribut eines Reset-Buttons überschreibt den Standardtext eines Browsers für diesen Buttontyp.

Das Submit-Eingabefeld definiert einen Button um ein Formular zu verschicken. Wie auch bei Reset, verändert das optionale VALUE-Attribut den Text des Buttons. Das Vorhandensein des NAME-Attributs verursacht, dass der Browser für den Submit-Button ebenfalls ein Name/Value-Paar übermittelt, wenn er zum Verschicken des Formulars dient. Dies ermöglicht den Autoren verschiedene Submit-Buttons anzubieten, die bei dem Form Handler unterschiedliche Aktionen auslösen, je nach dem welcher Submit-Button betätigt wurde.

Das Image-Eingabefeld stellt einen grafischen Submit-Button zur Verfügung. Das SRC-Attribut muss angegeben werden um die URI des Bildes zu spezifizieren. Das ALT-Attribut sollte verwendet werden um einen Ersatztext anzugeben, falls die Bilder nicht geladen werden. ALT ist in HTML 4.0 neu hinzugekommen; einige Browser benutzen ebenfall das NAME- oder VALUE-Attribut als Alternativtext, daher sollten Autoren, wo es möglich ist, diese drei Attribute für den gleichen Zweck verwenden. Das Thema der grafischen Submit-Buttons für Text-User wird im Detail in dem Artikel INPUT TYPE=IMAGE for text users? diskutiert.

Wenn der grafische Submit-Button betätigt wird, werden die Koordinaten des Klicks mittles des Formularübertragung als name.x=x-value und name.y=y-value versendet, wobei name der Wert des NAME-Attributs ist, x-value die Pixel von der linken Seite des Bildes und y-value die Pixel der Oberseite des Bildes.

Das USEMAP-Attribut in Kombination mit TYPE=image definiert eine Client-seitige Image-Map, die zum Client-seitigen Scripting verwendet werden kann. Das USEMAP-Attribut gibt die URI der definierenden MAP an.

In HTML 4.01 wurde das ISMAP-Attribut zum INPUT-Element für die Server-seitigen Image-Maps hinzugefügt. Wie auch immer, diese Spezifikation definiert jedoch nur wie ISMAP mit dem IMG-Element arbeitet, jedoch nicht mit INPUT.

Der Eingabetyp Button spezifiziert einen Button für Client-seitiges Scripting. Das VALUE-Attribut gibt die Aufschrift des Buttons an. Das ONCLICK-Attribut is normalerweise dazu da die Aktion zu definieren, wenn der Button betätigt wird. Ein Beispiel:

<INPUT TYPE=button VALUE="Hide non-strict attributes" ID=toggler ONCLICK="toggle()">

In diesem Beispiel wird die toggle()-Funktion, die schon vorher in einem SCRIPT-Element definiert wurde, ausgeführt wenn auf den Button geklickt wurde. Da der Button nur von Nutzen, wenn das Client-seitige Scripting aktiviert ist, sollten Autoren generell das <INPUT TYPE=button> -Tag zur Verwendung der Scripting Sprache anführen um einem Nichtfunktionieren des Buttons bei manchen Usern vorzubeugen. Eine ausführlichere Version des vorherigen Beispiels könnte folgendermaßen aussehen:

<SCRIPT TYPE="text/javascript">
<!--
  document.write("<INPUT TYPE=button VALUE=\"Hide non-strict attributes\""
                 + "ID=toggler ONCLICK=\"toggle()\">");
// -->
</script>

Das BUTTON-Element gestattet reichere Verzierungen des Submit-, Reset- und des Push-Buttons, jedoch wird INPUT besser unterstützt.

Das boolesche READONLY-Attribut, was neu in HTML 4.0 ist, hindert die User am Ändern der Eingabe, die Eingabe wird aber trotzdem mit dem Formular versendet. Das DISABLED-Attribut, ebenfalls neu in HTML 4.0, deaktiviert das Element. Deaktivierte Elemente sind read-only Elemente mit der Einschränkung, dass die Werte nicht mit dem Formular verschickt werden, diese Elemente können nicht fokussiert werden und sie werden beim Navigieren durch das Dokument in der Tabbing-Reihenfolge ausgelassen.

Die ACCESSKEY- und TABINDEX-Attribute treffen auf alle Eingabetypen außer hidden zu. ACCESSKEY legt ein einzelnes Unicode-Zeichen als Verknüpfungsschlüssel fest um auf das Element fokussieren zu können. Autoren können den Verknüpfungsschlüssel im INPUT-Element oder im mit ihm assoziierten LABEL-Element setzen. Entities (z.B. &eacute;) können als ACCESSKEY-Wert verwendet werden.

Das TABINDEX-Attribut spezifziert eine Nummer zwischen 0 und 32767 um die Position des Buttons in der Tabbing-Reihenfolge festzulegen. Ein BUTTON-Element mit TABINDEX=0 oder keinem TABINDEX-Attribut wird erst nach allen anderen Elementen mit positivem TABINDEX aufgerufen. Unter den positiven TABINDEX-Werten, erhält die niedrigere Zahl zuerst den Fokus. Im Fall einer Gleichheit, erhält das Element Vorrang, das zuerst im HTML-Dokument erscheint.

Das INPUT-Element nimmt ebenso eine weitere Anzahl von Attributen entgegen, die Client-seitige Scripting Actions für verschiedene Events spezifiziert. Zusätzlich zu den Kern-Events, wie die meisten Elemente auch, akzeptiert INPUT die folgenden Event-Attribute:

• ONFOCUS, wenn das Element den Fokus erhält;
• ONBLUR, wenn das Element den Fokus verliert;
• ONSELECT, wenn Text innerhalb eines Eingabefeldes des Typs text oder password ausgewählt wird;
• ONCHANGE, wenn das Element den Fokus verliert und sich sein Wert verändert hat, seitdem es den Fokus erhalten hat.

Weitere Informationen

• INPUT in der W3C HTML 4.01 Spezifikation
• INPUT in der W3C HTML 3.2 Spezifikation
• INPUT im HTML 2.0 Standard
• INPUT in der WDG HTML 3.2 Referenz
• INPUT in Learning HTML 3.2 by Examples
• RFC 1867: Formular-basierter File-Upload in HTML