♦ input ♦ <input> ♦ IE4+ M1 N4+ O5+ ♦ HTML 2.0, 3.2, 4.0

Das <input>-Tag erzeugt ein einzelnes Steuerfeld in einem Formular. Steuerfeld ist ein technischer Begriff, der die verschiedenen Elemente (Schaltflächen, Checkboxen, Radiobuttons, Textfelder usw.) beschreibt, die innerhalb eines Formulars Informationen sammeln.

Die vier Tags, die für den Aufbau eines Formulars benutzt werden können, sind:

button input select textarea

Es gibt zehn Arten von Steuerfeldern, die durch das <input>-Tag erzeugt werden. Dementsprechend muss das type-Attribut benutzt werden, um die Art des Steuerfeldes festzulegen. Die zehn Arten sind:

button checkbox file hidden image password radio reset submit text

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

Es gibt kein schließendes Tag.

Kernattribute	class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title
accept	Das Attribut accept wird zusammen mit der Steueranweisung type="file" benutzt, um festzulegen, welche Art von Dateien (inklusive des Pfades) an das Formular angehängt werden können. Das Attribut ist eine durch Kommas getrennte Liste. Beispiel accept="bilder/*.gif"
accesskey	Das Attribut 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.
align unerwünscht 4.0	Das Attribut align wird zusammen mit der Steueranweisung type="image" benutzt, um ein Bild in Hinsicht auf den umgebenden Text auszurichten. Die möglichen Werte sind bottom, left, middle, right und top. Das Attribut gilt effektiv seit Version 4.0 als unerwünscht. Dennoch wird es von den meisten Browsern erkannt. Stattdessen sollen jetzt Stylesheets benutzt werden.
alt	Das alt-Attribut stellt eine Textnachricht zur Verfügung, die anstelle des Bildes von Browsern gezeigt wird, die Bilder oder Grafiken nicht darstellen können.
checked	Das Attribut checked ist ein boolescher Wert. Wenn das Attribut vorhanden ist, kann eine Checkbox oder ein Radiobutton vorselektiert sein (und einen vorgegebenen Wert aufweisen).
disabled	Das Attribut disabled ist ein boolescher Wert. Wenn das Attribut vorhanden ist, ist das Steuerfeld ausgeschaltet und funktioniert nicht. In einigen Browsern erscheint das Feld ausgegraut.
ismap	Das Attribut ismap ist ein boolescher Wert. Wenn das Attribut vorhanden ist, handelt es sich bei dem Bild um eine klickbare serverseitige Image Map.
maxlength	Das Attribut maxlength bestimmt die maximale Anzahl von Zeichen, die in einer Zeile eines Textfensters eingegeben werden kann.
name	Das Attribut name ist eine Zeichenfolge, die ein Steuerfeld mit einem Namen belegt. Der Name muss im Dokument eindeutig sein und kann nicht wieder verwendet werden.
onblur	Das Attribut onblur initiiert die Ausführung eines JavaScripts, wenn ein Element den Fokus verliert (z.B. wenn die Maus in ein anderes Element geklickt wurde oder die Navigation mit der Tabulatortaste den Mauszeiger in ein anderes Element platziert).
onchange	Das Attribut onchange ist ein Ereignis, das die Ausführung eines JavaScripts initiiert, wenn ein Steuerfeld in einem Formular geändert wurde und aus dem Fokus gerät.
onfocus	Das Attribut onfocus erkennt, dass ein Element aktiviert wurde – in den Fokus kam – (zum Beispiel, wenn die Maus auf das Element geklickt wurde oder eine Navigation mit der Tabulatortaste den Mauszeiger auf das Element gesetzt hat), und initiiert ein JavaScript.
onselect	Das Attribut onselect erkennt, das ein Steuerfeld aktiviert wurde (z.B. wenn die Maus auf das Element geklickt wurde oder eine Navigation mit der Tabulatortaste den Mauszeiger auf das Element gesetzt hat), und initiiert ein JavaScript.
readonly	Das Attribut readonly spielt einen Wert in ein Steuerfeld ein, der vom Besucher nicht geändert werden kann.
size	Das Attribut size bestimmt die Breite einer Textzeile durch die Angabe der Anzahl von Zeichen, die in das Textfenster passt.
src	Das Attribut src ist die URL oder das Verzeichnis (Pfad/Name), in dem eine Datei gespeichert ist.
tabindex	Das Attribut 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.
type	Das Attribut type legt die Art des Steuerfeldes fest. Die verschiedenen Arten von Steuerfeldern können durch Stylesheets formatiert werden. Dennoch hängt die exakte Darstellung von Steuerfeldern vom Browser ab.
type="button"	Das Steuerfeld type="button" erzeugt eine viereckige Schaltfläche, die geklickt wird, damit eine gewünschte Aktion durchgeführt wird. Wenn das Formular zurückgesetzt oder abgeschickt werden soll, sollten die Steuerungen type="reset" und type="submit" angewendet werden. Ein Wert für das Attribut name ist zwingend erforderlich. Das value-Attribut (s. unten) stellt einen Text in der Schaltfläche dar. Der Text auf der Schaltfläche bestimmt die minimale Größe der Schaltfläche. Eine andere Größe kann durch ein Stylesheet festgelegt werden. Die Farbe der Schaltfläche ist per Vorgabe grau, kann aber durch ein Stylesheet geändert werden. Beispiel <input type="button" name="button1" value="Klick mich!">
type="checkbox"	Die Steuerung type="checkbox" erzeugt eine kleine, viereckige Schaltfläche, die vom Benutzer durch einen Klick der Maus ein- oder ausgeschaltet werden kann. Wenn die Schaltfläche eingeschaltet wird, erscheint eine kleine Kennzeichnung in der Box. Ein Wert für das Attribut name ist zwingend erforderlich. Das Attribut value weist der Checkbox einen Wert zu. Das Attribut checked führt eine Voreinstellung der Checkbox durch. Wenn die Checkbox eingeschaltet wurde, wird der Wert value als Teil der Formularinformationen gespeichert, die bei der Übermittlung des Formulars an die entsprechende Datei oder Datenbank geschickt werden. Der Wert für eine nicht eingeschaltete Checkbox wird nicht gespeichert oder übermittelt. Beispiel <input type="checkbox" name="ckbx1" value="true">
type="file"	Die Steueranweisung type="file" wird benutzt, um eine Datei an ein Formular anzuhängen. Wenn das Formular übertragen wird, wird die Datei zusammen mit dem restlichen Inhalt des Formulars hochgeladen. Diese Steueranweisung spielt ein Eingabefenster und eine Schaltfläche "Durchsuchen..." ein. Mit einem Klick auf die Schaltfläche "Durchsuchen..." kann der Benutzer durch die Verzeichnisse nach der gewünschten Datei suchen. Wenn die Datei gefunden wird, wird sie mit einem Doppelklick ausgewählt. Alternativ können Sie einen Pfad und den Namen der Datei in das Eingabefenster setzen. Der Wert für das Attribut name ist zwingend erforderlich. Das Attribut value wird nicht benutzt. Um type="file" nutzen zu können, müssen sowohl das enctype- als auch das method-Attribut des <form>-Tags, so wie unten angegeben, gesetzt werden. Beispiel <form method="post" enctype="multipart/form-data" action="next.php"> <input type="file" name="Durchsuchen...">
type="hidden"	Die Steuerung type="hidden" fügt Daten in ein Formular ein, die der Besucher nicht sehen und nicht ändern kann. Bei der Übermittlung des Formulars wird der versteckte Inhalt zusammen mit den anderen Daten des Formulars übertragen. 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. Beispiel <input type="hidden" name="Hausnummer" value="11e">
type="image"	Mit der Steuerung type="image" kann eine Grafik oder ein Pixelbild anstelle der type="submit"-Schaltfläche eingesetzt werden. Die Grafik kann z.B. ein eigenes "abschicken.gif" sein. Die Grafikschaltfläche funktioniert genauso wie die Schaltfläche "Abschicken". Die Steuerung type="image" kann auch eine maussensitive Image Map sein (der Browser muss in der Lage sein, die x-y-Koordinaten zu empfangen und auszuwerten). Das scr-Attribut gibt den Speicherplatz der Datei an. Das alt-Attribut kann benutzt werden, um einen alternativen Text einzuspielen, falls der Browser keine Bilder oder Grafiken darstellen kann. Einige Browser legen per Voreinstellung einen Rahmen um alle vier Seiten des Bildes. Beispiel <input type="image" border="0" name="los" src="bilder/los.gif" width="20" height="22" alt="Abschicken">
type="password"	Die Steueranweisung type="password" spielt ein einzeiliges Eingabefenster für die maskierte Eingabe eines Passwortes ein. Bei einem maskierten Text gibt der Benutzer ein Passwort ein, aber statt der eingegebenen Zeichen erscheinen Sterne oder gefüllte Kugeln (bullets) für jedes einzelne Zeichen. Um einen Benutzernamen zu erfragen, benutzen Sie die Steueranweisung type="text". Die vorgegebene Größe des Eingabefensters hängt vom jeweiligen Browser ab und beträgt typischerweise 20 bis 30 Zeichen in der Länge. Die Größe kann durch ein Stylesheet geändert werden. Mit dem Attribut maxlength wird die maximale Anzahl von Zeichen festgelegt, die vom Eingabefeld akzeptiert wird. Dieses Verfahren stellt nur eine semisichere 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. Beispiel <input type="password">
type="radio" Rot Blau Lila Gelb Grau	Die Steueranweisung type="radio" erzeugt einen kleinen runden Schalter mit einer weißen Mitte, der durch einen Klick mit der Maus ein- oder ausgeschaltet werden kann. Wenn der Radiobutton aktiviert wird, erscheint ein kleiner schwarzer Punkt in der Mitte. Der Radiobutton präsentiert dem Benutzer eine Liste von Wahlmöglichkeiten, in der er nur eine Wahl treffen kann, wie z.B. die Farbe eines T-Shirts aus fünf möglichen Farben auszuwählen. Eine zusammengehörende Gruppe von Radiobuttons muss denselben Namen aufweisen. Weiterhin muss jeder Radiobutton einer Gruppe einen anderen Wert value besitzen. Nur der Wert des ausgewählten Radiobuttons wird als Teil des Formularinhalts übertragen. Die Werte der nicht gewählten Radiobuttons werden nicht übertragen. Die Größe und die Farbe des Radiobuttons können nicht geändert werden. Das Attribut checked stellt einen der Radiobuttons mit einem kleinen schwarzen Punkt in der Mitte als vorselektiert dar. Beispiel <input type="radio" name="farbe" value="rot" checked> Rot <br> <input type="radio" name="farbe" value="blau"> Blau<br> <input type="radio" name="farbe" value="lila"> Lila <br> <input type="radio" name="farbe" value="gelb"> Gelb <br> <input type="radio" name="farbe" value="grau"> Grau <br>
type="reset"	Die Steueranweisung type="reset" erzeugt eine viereckige Schaltfläche, die bei einem Klick mit der Maus alle Felder des Formulars zurücksetzt. Das Formuar wird wieder in seiner Ausgangsform dargestellt. Per Vorgabe ist der Resetschalter grau und der Text "Reset" wird innerhalb der Schaltfläche eingespielt. Ein Stylesheet kann die Farbe ändern und das Attribut value kann einen alternativen Text angeben. Der Text innerhalb der Schaltfläche wird in der kleinsten Schriftart dargestellt. Die Schriftgröße kann durch das Attribut size oder durch ein Stylesheet geändert werden. Das Attribut name ist nicht erforderlich, aber es ist gängige Codierpraxis, jedem Steuerfeld eines Formulars einen Namen zu geben. Beispiel <input type="reset" value="Zurücksetzen" name="reset1">
type="submit"	Die Steueranweisung type="submit" erzeugt eine viereckige Schaltfläche, mit der ein Besucher den Inhalt eines Formulars für die Weiterverarbeitung abschickt. Ein Formular kann an die gleiche Seite oder zu einer anderen URL übertragen werden – das Ziel der Übertragung wird im <form>-Tag mittels des action-Attributs angegeben. Wenn es allerdings wichtig ist, dass bestimmte Eingaben des Formulars korrekt ausgefüllt worden sind, kann das onclick-Attribut in der Schaltfläche ein JavaScript aktivieren, das den Inhalt überprüft. Stattdessen kann auch ein Attribut onsubmit innerhalb des <form>-Tags die Übertragung an eine JavaScript-Funktion veranlassen. Diese Methode wird auch als "clientseitiger" Formularcheck bezeichnet. Per Vorgabe ist die Schaltfläche grau und enthält den Text "Submit". Die Farbe kann mittels eines Stylesheets geändert werden und das Attribut value kann benutzt werden, um den Text in der Schaltfläche zu ändern. Der Text, der innerhalb der Schaltfläche dargestellt wird, bestimmt die minimale Größe der Schaltfläche. Die Größe kann durch ein Stylesheet oder durch das size-Attribut geändert werden. Das Attribut name ist nicht erforderlich, aber es ist gängige Codierpraxis, jedem Steuerfeld des Formulars einen Namen zu geben. Wenn das Attribut value benutzt wird, wird der Wert von value zusammen mit dem Inhalt übermittelt. Beispiel <input type="submit" name="abschicken" value="Abschicken">
type="text" Eingabe:	Die Steueranweisung type="text" spielt ein einzeiliges Eingabefenster ein, in dem der Benutzer die geforderten Informationen (z.B. eine Telefonnummer oder eine Benutzerkennung) eingeben kann. Wenn für die Eingabe mehr als eine Zeile erforderlich ist, sollte anstelle des <input>-Tags mit dem Attribut type="text" das <textarea>-Tag benutzt werden. Die vorgegebene Fenstergröße hängt vom jeweiligen Browser ab und beträgt in der Regel 20 bis 30 Zeichen. Es wird empfohlen, die Größe explizit zu setzen, statt auf die Vorgabe zu bauen. Dazu kann ein Stylesheet oder das Attribut size eingesetzt werden . Das Attribut maxlength bestimmt die maximale Anzahl von Zeichen, die vom Steuerfeld akzeptiert wird. Das value-Attribut kann einen Text in das Eingabefenster setzen, aber seine Benutzung ist optional. Beispiel <p>Eingabe: <input type="text" name="Eingabefeld" value="Ihr Name" size="25" maxlength="40">
value	Das Attribut value weist einem Feld einen Anfangswert zu, z.B. einen Text oder eine Zahl. Der Anfangswert kann auch später durch ein Skript geändert werden.
usemap	Das Attribut usemap gibt den Namen einer Image Map an, die mit dem Element verknüpft werden soll, und legt fest, dass es sich hier um eine klickbare clientseitige Image Map handelt.

Beispiel

<form method="post" enctype="multipart/form-data" action="html4/next.php">
<p>Schaltfl&auml;che 
	<input type="button" name="btn2" 
		value="Klick mich" style="background-color:yellow;">
<p>Kontrollk&auml;stchen (Checkbox)
	<input type="checkbox" name="kontrolle" value="true">
<p> Datei anh&auml;ngen f&uuml;r ein Upload 
		<input type="file" name="datei">
<p>Passwort<input type="password" name="password">
<p>Verstecktes Feld <input type="hidden" name="Hausnummer" value="11e">
<p> Erste Option <input type="radio" name="wahl1" value="Erste Wahl" checked>
<p>Zweite Option <input type="radio" name="wahl1" value="Zweite Wahl">
<p>Dritte Option <input type="radio" name="wahl1" value="Dritte Wahl">
<p>Vierte Option <input type="radio" name="wahl1" value="Vierte Wahl">
<p>Eingabefeld (lang) 
	<input type="text" name="textlang" size="50" value="einen langen Text eingeben">
<p>Eingabefeld (mittellang) <p>
	 <input type="text" name="textmittel" size="25" value="kurzer Text">
<p>Eingabefeld (kurz) 
	<input type="text" name="text4" size="2">
<p>Schaltfl&auml;che (Zur&uuml;cksetzen)
	<input type="reset" value="Formular zur&uuml;cksetzen" 
		name="reset2" style="color:white; background-color:blue;">
<p>Schaltfl&auml;che (Absenden)
	<input type="reset" value="Zur&uuml;cksetzen" name="reset2" style="color:white; 
		background-color:blue;"> <input type="submit" name="submit" 
		onClick="submitform()" value="Abschicken" 
		style="color:white; background-color:red;">
<p>Schaltfl&auml;che (Grafik)
	<input type="image" name="submitgif" src="go.gif" 
		onClick="submitform()" width="20" height="22" >
</form>
<script language="JavaScript">
function submitform()
{ alert("Danke, dass Sie unser kleines Formular so akkurat ausgef&uuml;llt haben!") }
</script>

Darstellung

Schaltfläche
Kontrollkästchen (Checkbox)
Datei anhängen für ein Upload
Passwort
Verstecktes Feld
Erste Option
Zweite Option
Dritte Option
Vierte Option
Eingabefeld (lang)
Eingabefeld (mittellang)
Eingabefeld (kurz)
Schaltfläche (Zurücksetzen)
Schaltfläche (Absenden)
Schaltfläche (Grafik)

↑

HTML-4.01-Kernattribute Die interessantesten Attribute der Neuzeit

Index Tabellarischer Überblick über alle Tags

!DOCTYPE Document Type Definition (DTD)

a anchor (Anker); ein Link

abbr Abkürzung

acronym Gleichwertige Bezeichnung

address Hervorhebung von Adressen

applet Java-Applet

area Clientseitige Image Map

b Fetter Schriftstil

base Basis-URI des Dokuments

basefont Basis-Schriftgröße

bdo Laufrichtung der Schrift

big Großer Schriftstil

blockquote Langes Zitat

body Body des Dokuments

br Erzwungener Zeilenumbruch

button button; Schaltfläche

caption Tabellenüberschrift

center Zentrierte Darstellung von Inhalten

cite Zitat

code Darstellung von Computercode

col Tabellenspalten

colgroup Tabellenspaltengruppe

dd Beschreibungsteil einer Definition

del Gelöschter Text

dfn Definition in einer Definitionsliste

dir Auflistung eines Verzeichnisses

div Generischer Behälter für Inhalte

dl Definitionsliste

dt Definitionselement

em Betonung

fieldset Formulargruppe

font Lokale Änderung der Schrift

form Interaktives Formular

frame Fenster innerhalb des Browserfensters

frameset Unterteilung des Browserfensters

h1, h2, h3, h4, h5, h6 Überschriften

head Header des Dokuments

hr Horizontale Linie

html Wurzelelement des Dokuments

i Kursiver Schriftstil

iframe Inlinefenster

img Eingebettetes Bild

input Steuerfeld eines Formulars

ins Eingefügter Text

isindex Ausgabefeld in einer Zeile

kbd Text, der vom Benutzer einzugeben ist

label Überschrift zu einem Formularfeld

legend Beschreibung einer Formularfeldgruppe

li Listenelement

link Medienunabhängiger Link

map Clientseitige Image Map

menu Menüliste

meta Generische Metainformation

noframes Alternativer Inhalt für Browser ohne Unterstützung von Frames

noscript Alternativer Inhalt für Browser ohne Skriptunterstützung

object Generisches eingebettetes Element

ol Nummerierte Aufzählung

optgroup Optionsgruppe

option Wählbares Element

P paragraph; Absatz

param Parameterwert

pre Vorformatierter Text

q Kurzes Inlinezitat

s Durchgestrichener Schriftstil

sample Programmcode-Beispiel

script Skriptanweisungen

select Optionsselektor

small Kleiner Schriftstil

span Generischer Behälter für Inhalte

strike Durchgestrichener Stil

strong Starke Betonung

style Stilinformationen

sub Tiefgesetzt

sup Hochgesetzt

tableTabelle

tbody Tabellenkörper

td Tabellenzelle

textarea Textfeld mit mehreren Zeilen

tfoot Tabellenfuß

th Tabellenkopfzelle

thead Tabellenkopf

titleTitel des Dokuments

tr Tabellenzeile

tt Nichtproportionaler Schriftstil

u Unterstrichener Schriftstil

ul Ungeordnete Liste

var Instanz einer Variablen