Formulare - Workshop am 12.11.99
Die Elemente im Einzelnen
Eingabefeld
Zusätzlich zu Name und Value kann ein Size-Attribut verwenden, das in der Form size="xx", angegeben wird. xx ist die Zahl der Zeichen, die sichtbar sein sollen. Auch in zu kurze Felder kann man mehr Text eingeben.
So erzeugt dieser Code
Vorname:
<input type="text"
name="Vorname"
size="40"
value="Ihr Vorname"
title="Geben Sie hier Ihren Vornamen ein">
Vorname:
Checkbox
Name und Title wie beim Eingabefeld. Das Value-Attribut steuert, welcher Text übertragen werden soll, wenn das Kästchen angeklickt wird. Typische Werte könnten sein: Ja, nein, links, rechts, oben, unten, etc. (kurzum alle Werte, die vom Sinn des Formulars abgeleitet werden).
Um in der Voreinstellung ein Kreuzchen zu setzen dient das checked Attribut.
Beispielcode
Extrabeilagen zur Pizza:
<input type="checkbox"
name="Beilage 1"
value="Champignon"
title="1,50 DM Aufpreis"
checked>
Champigon,
<input type="checkbox"
name="Beilage 2"
title="1,50 DM Aufpreis"
value="Pepperoni">
Pepperoni
Extrabeilagen zur Pizza: Champigon, Pepperoni
Radiobutton
Name und Title wie beim Eingabefeld. Das Value-Attribut wie bei Checkbox. Damit eine zusammengehörende Gruppe als solches erkannt werden kann, muss das Name-Attribut gleich sein. Um dennoch in der übertragenden Nachricht die Einstellung zu erkennen (welche der drei was nun ausgewählt) wird das Value-Attribut verwendet. Für die Voreinstellung dient wiederum das checked Attribut.
Beispielcode
Pizza
<input type="radio"
checked
name="Durchmesser"
value="gross"
title="54 cm Familienpizza">
gross
<input type="radio"
name="Durchmesser"
value="mittel"
title="32 cm für den großen Hunger">
mittel
<input type="radio"
name="Durchmesser"
value="klein"
title="18 cm Normalgrösse">
klein
Pizza gross mittel klein
Auswahlliste
Name wie beim Eingabefeld. Die Listeneinträge werden einzeln über je eine Option-Zeile eingetragen. Dafür sind drei Varianten gültig
- <option> ohne schließendes Tag (veraltet, sollte nicht mehr verwendet werden)
- mit schließendem Tag (hier im Beispiel verwendet)
- mit Value-Attribut, das einen abweichenden Wert angeben kann. Der Value wird letztlich übertragen. Der zwischen öffenden und schließendem Option-Tag stehende Text wird dem Benutzer der Seite angezeigt.
Um die Voreinstellung zu setzen dient das selected Attribut in einem Option-Tag. Per Size-Attribut kann die Liste auch länger gestaltet werden, so daß beispielsweise drei Zeilen angezeigt werden.
Beispielcode
Bitte wählen Sie
<select name="Pizzaauswahl"
Title="Bitte wählen Sie die Pizza aus"
size="1">
<option>Pizza Regina</option>
<option selected>Pizza Tonno</option>
<option>Lasagne</option>
</select>Option mit abweichendem Werten
<option value="27">Pizza Regina</option>
<option selected value="28">Pizza Tonno</option>
<option value="32">Lasagne</option>
Das Texteingabefeld (textarea)
Name wie beim Eingabefeld. Die Breite und Höhe des Felds wird über Row- (Zeile) und Column-Attribute (Spalte) eingestellt. Der Vorgabetext kommt zwischen das öffnende und schließende Tag.
Beispielcode:
Sonderwünsche<br>
<textarea name="Sonderwuensche"
rows="3"
cols="20"
title="Hier geben Sie Sonderwünsche ein">keine</textarea>
Sonderwünsche
Schaltfläche zum Senden
Der Name ist zumeist unwichtig und könnte auch weggelassen werden. Mit dem Value-Attribut wird der Text auf der Schaltfläche festgelegt. Wichtig ist noch der Typ als Submit (type="submit"), der für ein Senden an den Server (oder das lokale Mailprogramm sorgt.
Beispielcode:
<
input type="submit"
value="Abschicken"
name="Senden"
Title="auf geht's">
Formular löschen
Per Type Attribut mit dem Wert RESET wird das gesamte Formular auf die Ausgangswerte zurückgesetzt. In der Regel bedeutet dies Löschen aller Inhalte. Da man zu leicht auf diese Schaltfläche kommt und damit alle bereits gemachten Eingaben verlieren kann - und man zudem das Zurücksetzen eines Formulars in der Praxis selten braucht, kann es auch gleich weggelassen werden.
<
input type="reset"
value="Formular löschen"
Title="hoppala - bitte von vorne">
Eine Grafik anstelle der Schaltfläche
Der Typ IMAGE dient dazu eine Grafik (anstelle einer Schaltfläche) zum Absenden des Formulars zu verwenden. Im Attribut SRC wird die Grafikdatei angegeben. Befindet sich die Grafik in einem anderen Verzeichnis ergänzen Sie den Pfad genauso wie bei anderen Grafiklinks. Ansonsten können die üblichen Attribute einer Grafik verwendet werden. Bitte beachten Sie, Alt und Title sind zwei Paar Stiefel: das Alt-Attribut beschreibt den Text, der angezeigt wird, wenn Grafiken von Anwender ausgeschalten wurden bzw. noch nicht geladen sind. Der kleine Tooltip im Title-Attribut wird sofort und immer angezeigt (sofern es der Browser unterstützt).
<
input type="image"
src="senden.gif"
Width="97"
Height="43"
Alt="Senden"
Title="Urlaubsträume werdet wahr">
Das versteckte (hidden) Feld
Dient dazu Werte zu übergeben, die nicht angezeigt werden (müssen/brauchen). Als Beispiel lassen sich damit Suchmaschinen steuern. Oder ein Script kann Eintragungen vornehmen, wie etwa das aktuelle Datum eintragen.
<
input type="hidden"
name="xa"
value="1">
Nicht besprochen
Weitere Varianten des Input-Tags sind der FILE - Typ, der zum Hochladen von Dateien auf den Server dient. Dazu wird ein Programm, auf dem Server benötigt, das "weiß" wohin es die Datei packen soll, was damit genau getan werden soll, wer das Recht zum Hochladen hat, etc.
Sowie der Typ PASSWORD; ein normales Eingabefeld, das nur Sternchen anzeigt, wenn etwas eingegeben wird. Der Inhalt wird letztlich doch in Klartext über die Leitung geschickt.
Weiter zum Form-Tag
