Erstellen von Formularfeldern mit dem Input-Element im HTML

Das <input>-Element und die Attribute

Es ist jetzt an der Zeit zu lernen, wie man die Elemente erstellt, die innerhalb eines Formulars Informationen sammeln. Das Input-Element ermöglicht Ihnen das Erstellen vieler verschiedener Formularfeld-Typen.

Formularfelder sind spezielle HTML-Elemente, die in einem Formular verwendet werden. Sie ermöglichen es einem Besucher Ihrer Web-Site Informationen einzugeben und diese an Sie zu senden. Die Informationen werden in einem Datensatz zusammengefasst, der dann an die im action-Attribut festgelegte Adresse gesendet wird, wenn das Formular übertragen wird.

Das <input>-Element besteht aus einem einleitendem Tag und Attributen. Es verfügt weder über Inhalt noch über ein abschließendes Tag.


<input attributes />

Der Schlüsselpunkt hier ist das Auswählen der richtigen Attribute, die das Formularfeld erstellen können, das Sie benötigen. Das wichtigste Attribut ist hier type, das den Formularfeldtyp definiert. Für alle Formularfelder außer Submit- und Reset-Schaltflächen, ist das name-Attribut erforderlich. Das name-Attribut bezeichnet das Formularfeld, sodass Daten dem Formularfeld zugewiesen werden können, wenn sie zum Server gesendet werden. Im Folgenden werden die verschiedenen Formularfeldtypen beschrieben, die Sie bei Verwendung des Input-Elements erstellen können.

Erstellen von Text-Formularfeldern

Text-Formularfelder ermöglichen Ihnen das Sammeln von Benutzerinformationen in geringer Menge. Es wird so ein einzeiliges Input-Feld erstellt, in das Benutzerinformationen eingeben werden können, wie zum Beispiel ihren Namen oder ein Suchbegriff. Im Gegensatz zu anderen Formularfeldern wie Optionsfelder (die nur zwei Zustände besitzen: on und off) oder Auswahllisten (in diesen können nur vorgegebene Werte ausgewählt werden), bieten Text-Formularfelder dem Besucher die Freiheit, alle gewünschten Texte einzugeben.

Formularfelder sind immer Teil eines Formulars. Entsprechend befinden sich <input>-Elemente immer zwischen dem öffnenden und dem schließenden <form>-Element. Beginnen Sie mit dem Erstellen eines Input-Elements und wählen Sie <text> als Wert für das type-Attribut. Gehen Sie sicher, dass Sie die Formularfelder mit einem Namen bezeichnen, damit das Server-Script den Wert verarbeiten kann. In Abbildung sehen Sie ein Text-Formularfeld, in dem ein hilfreicher Text angeboten wird. Dieser Text enthält eine Beschreibung eines Inhalts, den der Benutzer eingeben soll.


<p>
	Enter the name of your pet: <input type="text" name="petname" />
</p>

Sie können das Aussehen der Text-Formularfelder verändern, indem Sie das size-Attribut verwenden.

Die eingegebene Zahl bestimmt die Breite des Text-Formularfelds, wie Sie im folgenden Beispiel erkennen können:


<input type="text" name="petname" size="15" />

Erstellen von Formularfeldern mit dem Input-Element im HTML

Um die Buchstabenanzahl, die ein Benutzer eingeben kann, zu reduzieren, fügen Sie das maxlength-Attribut dem Texteingabefeld hinzu. So wird die maximale Buchstabenanzahl bestimmt, die der Besucher eingeben kann. Wenn ein Benutzer versucht, mehr Text einzugeben, wird ihr Web-Browser Inputs ab einer bestimmten Länge für dieses spezielle Formularfeld nicht mehr akzeptieren.


<input type="text" name="petname" size="15" maxlength="15" />

Um ein Textformularfeld mit Text vorzubelegen, der nach dem Laden des Dokuments angezeigt wird, verwenden Sie das value-Attribut. Das value-Attribut kann als Eingabeauffordeung oder als Hinweis dienen, und den Benutzer auf die Dateneingabe aufmerksam machen. Bitte sehen Sie sich dazu folgendes Beispiel an:


<input type="text" name="petname" size="15" maxlength="15" value="enter pet name" />

In diesem Fall erscheint Enter Pet Name auf dem Formularfeld, wenn das Formular zum Web-Browser übertragen wird. Diese Beschriftung ist für das Formularfeld festgelegt, solange der Benutzer sie nicht ändert.

Wenn Sie ein value-Attribut benutzen und einen Wert verwenden, der größer als das Text-Formularfeld ist, kann es zu Verwirrung beim Benutzer kommen, da der Text abgeschnitten erscheint. Versuchen Sie, wirklich nur mit den wichtigsten Informationen zu arbeiten. Vergewissern Sie sich, dass die Länge des Textes in value kleiner oder gleich der Buchstabenanzahl ist, die Sie in maxlength angegeben haben.

Um Nur-Lese-Formularfelder zu erstellen, fügen Sie das readonly-Attribut, wie im folgenden Beispiel hinzu:


<input type="text" name="year" value="1999" readonly />

So können Benutzer keinen Text in die Text-Formularfelder eingeben. Es ist auch sehr nützlich, einen konstanten Standardwert für ein Text-Formularfeld zu erstellen, wenn das Formular übertragen wird.

Erstellen von Passwort-Formularfeldern

Das Passwort-Formularfeld gleicht dem Text-Formularfeld, in das Benutzer nur wenig Text für das Formular eingeben können, sehr stark. Es handelt sich hier jedoch um einen Sonderfall, da das Passwort-Formularfeld Sternchen verwendet, um Benutzereingaben zu maskieren.

Das <password>-Formularfeld dient nicht nur ausschließlich der Erstellung von Passwörtern. Sie können es für alles verwenden, was Ihrer Meinung nach versteckt werden soll, wenn der Benutzer die Information in das Formular eingibt.

Zur Erstellung eines password-Formularfelds, erstellen Sie ein <input>-Element und weisen Sie password dem type-Attribut als Wert zu. Um die Größe des Passwort-Formularfelds und die maximale Buchstabenzahl, die ein Benutzer eingeben kann, zu reduzieren, können Sie die length- und maxlength-Attribute, wie im folgenden Code verwenden:


<p>
	Enter your password: 
	<input type="password" name="userpassword" size="8" maxlength="8" />
</p>

Abbildung zeigt ein Passwort-Formularfeld mit hilfreichem Text, der dem Benutzer den Zweck des Formularfeldes erklärt.

Beachten Sie, dass Sie das value-Attribut nicht integrieren müssen, da der von Ihnen eingegebene Wert maskiert ist, wenn er zum Web-Browser übermittelt wird.

Jegliche Informationen, die von einem password-Formularfeld gesendet werden, sind nicht maskiert oder verschlüsselt; es handelt sich also um keine sichere Informationsübertragung. Der Benutzer kann zwar nicht lesen, was er eintippt, aber das war auch schon die einzige Sicherheitsmaßnahme des password-Formularfelds.

Erstellen von Submit-Schaltflächen

Submit-Schaltflächen dienen der Übertragung von Formulardaten, damit diese von einem Server-Script oder einem anderen Programm bearbeitet werden können. Das Eingeben von Submit als Formularfeldtyp kreiert eine Submit-Schaltfläche, die die Beschriftung SUBMIT trägt. Um den in der Schaltfläche angezeigten Text zu ändern, benutzen Sie das value-Attribut und geben Sie Ihren eigenen Text, wie im folgenden Beispiel, ein:


<input type="submit" value="send form data" />

Sie können mehr als eine Submit-Schaltfläche je Formular erstellen.

Erstellen von Reset-Schaltflächen

Reset Schaltflächen dienen der inhaltlichen Überarbeitung Ihres Formulars sowie der Einstellung aller Formularfelder nach dem Wert des Standard-Anfangswerts. In den meisten Fällen wird dieser Wert mittels des value-Attributs bei der Erstellung eines jeden Formularfeldes spezifiziert. Mit der Submit-Schaltfläche können Sie die Default-Überschrift von Reset nach Ihren Wünschen ändern, indem Sie das value-Attribut verwenden, wie es das folgende Beispiel zeigt:


<input type="reset" value="clear form" />

Erstellen von Checkboxen – Kontrollkästchen

Kontrollkästchen (Checkboxen) ermöglichen es dem Benutzer, einen Wert zu wählen bzw. die Auswahl zurückzunehmen (siehe Abbildung). Das Checkbox-Formularfeld kennt entsprechend zwei Zustände: ausgewählt und nicht ausgewählt. Diese werden durch die Werte on und off repräsentiert. Um eine Checkbox zu erstellen, verwenden Sie das Input-Element und geben Sie Checkbox als Formularfeldtyp ein. Vergessen Sie nicht, das name-Attribut einzugeben, damit das Script erkennen kann, mit welcher Checkbox die Dateien verbunden sind. Folgendes Beispiel zeigt dies:


<p>
	Check to receive SPAM e-mail 
	<input type="checkbox" name="spam" />
</p>

Um Checkboxen von vornherein als markiert anzuzeigen, fügen Sie das checked-Attribut wie im folgenden Beispiel hinzu:


<input type="checkbox" name="year" checked />

Sie können Checkboxen auch als Gruppe verwenden, indem Sie allen Checkboxen der Gruppe denselben Namen geben.

Dadurch können viele verschiedene Werte ausgewählt und eine gemeinsame Eigenschaft angewendet werden.


<p>
	Check all symptoms that you are experiencing:<br />
	Nausea 
	<input type="checkbox" name="symptoms" value="nausea" />
	<br />
	Light-headedness 
	<input type="checkbox" name="symptoms" value="lightheadedness" />
	<br />
	Fever 
	<input type="checkbox" name="symptoms" value="fever" />
	<br />
	Headache 
	<input type="checkbox" name="symptoms" value="headache" />
	<br />
</p>

Wenn dieses Formular zur Bearbeitung auf ein Script übertragen wird, gibt es für jede bearbeitete Checkbox einen Wert an, der mit dem Namen der Checkbox in Verbindung steht.

Erstellen von Optionsfeldern

Optionsfelder sind mit Checkboxen fast identisch, aber sie erscheinen unterschiedlich im Web-Browser. Anstelle einer Box, die markiert oder unmarkiert sein kann, sieht man eine kleine runde Schaltfläche (auf manchen Plattformen gleicht diese Form auch einem Diamanten), auf der ein schwarzer Punkt erscheint, wenn der Benutzer sie anklickt (siehe Abbildung). Sie erstellen Optionsfelder in einem Input-Element, wenn Sie radio als Formularfeldtyp eingeben. Das obligatorische value-Attribut verbindet Daten mit dem Optionsfeld. Wenn das Formular übertragen wird, wird value zum Server gesendet. Dafür muss das Optionsfeld angeklickt sein.


<p>
	Do you agree? 
	<input type="radio" name="agree" value="yes" />
</p>

Wenn zwei oder mehr Optionsfelder denselben Formularfeld-Namen teilen, kann man hier von einer Gruppe sprechen, in der die verschiedenen Möglichkeiten einander ausschließen. Anders gesagt, es kann nur eine Radio-Schaltfläche markiert sein. Im folgenden Codeausschnitt haben beide Radio-Schaltflächen den Namen sex. Das bedeutet, dass der Benutzer nur eines der Felder auswählen kann. Wenn ein Benutzer male auswählen würde, dann aber erkennen würde, dass er sich geirrt hat und schließlich female auswählen würde, würde das Optionsfeld male automatisch deselektiert werden.


<input type="radio" name="sex" value="male" /> 
<input type="radio" name="sex" value="female" />

Erstellen von Grafik – Schaltflächen

Wenn Sie <image> als Eingabeformularfeld type verwenden, erhalten sie eine Submit-Schaltfläche, die mit dem Bild verziert ist, das sie mittels des src-Attributs, wie im folgenden Beispiel, auswählen:


<input type="image" src="submit.gif" name="submitformbtn" />

Zusätzlich zu den Formulardaten werden die x und y-Koordinaten des angeklickten Bereichs zum Server übermittelt. Die Daten werden in Form von name.x = coord und name.y = coord übertragen, wobei name der Formularfeld-Name ist. Wenn man nun den vorhergehenden Code verwendet, sieht das Ergebnis folgendermaßen aus:


submitoformbtn.x=150&submitformbtn.y=200

Wenn Sie möchten, können Sie den Namen auch weglassen. Wenn Sie das tun, sehen die zurückgesendeten Koordinaten folgendermaßen aus: x = und y =

Erstellen von benutzerdefinierten Schaltflächen

Außer Submit-, Reset- und Image-Schaltflächen können Sie auch benutzerdefinierte Schaltflächen erstellen. Diese Schaltflächen haben standardmäßig keine Funktion. Sie können Sie aber mit Scripts verbinden. Ein solches Script wird dann ausgeführt, wenn der Benutzer auf die Schaltfläche klickt. In Abbildung sehen Sie eine Schaltfläche, die das Besucher-Script aktiviert, wenn dies die Fähigkeit hat, aktiv zu werden.


<input type="button" name="verify" value="verify" onclick="verifydata()" />

In diesem Beispiel wird eine Schaltfläche erstellt, die bei Anklicken die Script-Funktion verifydata() startet. Geben Sie den Namen, der auf der Schaltfläche erscheint, im value-Attribut an. Für dieses Beispiel wäre das Verify Data.

Schaltflächen, die mit dieser Methode erzeugt werden, unterliegen größeren Einschränkungen, als solche, die über das <button>-Element erstellt wurden.

Versteckte Formularfelder

Versteckte Formularfelder sind spezielle Formularfelder, die vor dem Benutzer versteckt sind und von diesem auch nicht verändert werden können. Wenn der Benutzer das Formular übermittelt, wird der dem versteckten Formularfelder zugeteilte Wert mit den anderen Daten gesendet.


<input type="hidden" name="surveynumber" value="1402" />

Meiner Erfahrung nach wird diese Technik meistens bei Umfragen verwendet, um die Daten zuzuordnen. Für das folgende Beispiel habe ich ein verstecktes Formularfeld erstellt. Es hat den Namen surveynumber und den Wert 1402. Wenn das Formular zur Verarbeitung übermittelt wird, kann ich es mit Hilfe dieser Information identifizieren. Wenn ich morgen die Umfrage ändern wollte, könnte ich für value eine neue Zahl eingeben.

Laden von Dateien mit dem Dateiauswahldialog

Ein Dateiauswahldialog erlaubt es dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit dem Formular hochzuladen.

Abbildung zeigt ein Dateiauswahldialog.


<p>
	Please select a file for upload: 
	<input type="file" name="fileupload" />
</p>

Benutzer können einen Dateinamen eingeben (mit dem Pfad) oder sie können auch den Inhalt ihres Festplattenlaufwerks browsen, um die betreffende Datei zu finden. Wenn Sie das value-Attribut verwenden, können Sie theoretisch einen Ausgangsdateinamen spezifizieren, sodass dieser angezeigt wird.


<p>
	Please select a file for upload: 
	<input type="file" name="fileupload" />
</p>