Ein weiterer, wichtiger Bestandteil praktisch jeder Webseite sind Formulare, über die Besucher mit Ihnen in Kontakt treten können.
Grundsätzlich gibt es diese unterschiedlichen Formularfelder:
- Eingabefeld
- asswort-Eingabefeld
- Mehrzeiliges Eingabefeld
- Checkbox
- Radiobutton
- DropDown-Liste
- Dateiupload-Feld
- Submit-Button
- Reset-Button
Der folgende Quellcode zeigt ein Beispiel für die Verwendung dieser Feldtypen.
[html]
<html>
<head>
<title>Meine erste HTML-Seite</title>
</head>
<body>
<form action="formular-auswerten.html" method="post">
Name: <input name="Name" type="text"><br>
Passwort: <input name="Passwort" type="password"><br>
Beschreibung: <textarea cols="30" name="Beschreibung" rows="3"></textarea><br>
Newsletter: <input checked name="Newsletter" type="checkbox" value="ja"><br>
Geschlecht: <input checked name="Geschlecht" type="radio" value="m"> männlich <input name="Geschlecht" type="radio" value="w"> weiblich<br>
Land: <select name="Land" size="1"><option selected value="DE">Deutschland</option><option value="AT">Österreich</option><option value="CH">Schweiz</option></select><br>
Dateianhang: <input name="Dateianhang" type="file"><br>
<input type="reset" value="Löschen"> <input type="submit" value="Abschicken">
</form>
</body>
</html>
[/html]
Eingeleitet bzw. umschlossen wird das Formular vom Tag [html]<form>…</form>[/html]. Um eine Datei, die die Formulardaten auswerten soll, festzulegen, notieren Sie das Attribut action=”…”. Das Attribut method=”…” definiert die Übertragungsmethode der Daten (“GET” oder “POST”).
Der Name des Besuchers wird über ein einfaches Textfeld erfasst. Dabei werden dem Standalone-Tag
zwei Attribute übergeben: name=”…” legt für das Formularfeld einen eindeutigen Namen, der keine Sonder- oder Leerzeichen enthalten darf, fest; type=”text” definiert es als einfaches Textfeld.
Das Passworteingabefeld unterscheidet sich nur im Typ (“password”) vom Texteingabefeld. In der Praxis werden Eingaben in ein solches Feld meist mit Sternchen oder Punkten maskiert.
Um es dem Besucher möglich zu machen, einen mehrzeiligen Freitext zu formulieren, brauchen Sie das mehrzeilige Eingabefeld. Über die Attribute cols=”…” und rows=”…” werden die Anzahl der Spalten bzw. der Reihen festgelegt.
Mit Hilfe der Checkbox und des Radiobuttons können Sie vorgegebene Antworten oder Texte durch den Besucher abhaken lassen. Um eine Gruppe von Checkboxen oder Radiobuttons zu bilden, müssen Sie diesen den gleichen Namen geben. Bei Radiobuttons bewirkt dies, dass nur ein einziges Element ausgewählt werden kann. Um eine Checkbox oder einen Radiobutton von Beginn an bereits auszuwählen, notieren Sie das Attribut “checked”.
Ein weiteres mögliches Element eines Formulars ist die DropDown-Liste. Zwischen dem Tag [html]<select>…</select>[/html]können Sie beliebig viele Auswahlmöglichkeiten mit dem Tag [html]<option>…</option>[/html] notieren. Standardmäßig kann der Besucher einen davon auswählen, es sei denn Sie haben im SELECT-Tag das Attribut “multiple” notiert. Dann ist es dem Besucher möglich, Mehrfach-Auswahlen zu tätigen. Soll ein bestimmter Eintrag bereits zu Beginn ausgefüllt sein, müssen Sie dem entsprechenden Element das Attribut “selected” hinzufügen.
Das Dateiupload-Feld stellt ein besonderes Formularfeld dar. Es bietet dem Besucher die Möglichkeit, eine Datei von seinem Rechner über das Formular hochzuladen.
Jedes Formular benötigt einen Submit-Button, mit dem das ausgefüllte Formular an die im FORM-Tag angegebene Datei gesendet wird. Zusätzlich können Sie noch einen Reset-Buton notieren, mit dem sich das Formular zurücksetzen lässt. Beide Buttons lassen sich über das Attribut value=”…” mit einer individuellen Beschriftung versehen.
Auf die Auswertung der Formulardaten, die zumeist ein individuelles Script (z.B. PHP) erfordern, wird an dieser Stelle nicht näher eingegangen. Es sei vielmehr auf weitere Tutorials zu diesem Thema auf http://www.webmaster-resource.de verwiesen.