Definiert werden Formulare über das form-Element. Alle Elemente, die innerhalb von form stehen, gehören dann zu dem betreffenden Formular.
<form> … </form>
Im einleitenden <form> wird das action-Attribut erwartet. Hierüber gibt man letztendlich an, was mit den Formulardaten geschehen soll. Üblicherweise handelt es sich hierbei um eine PHP-Anwendung.
<form method="post" action="form.php"> … </form>
Achtet darauf, dass die angegebene Datei auch tatsächlich gefunden werden kann. Ihr müsst also den richtigen Pfad setzen.
Anstelle eines Skripts kann man übrigens auch eine E-Mail-Adresse angeben.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
In diesem Fall werden die Formulardaten per E-Mail verschickt. Elegant ist das aber freilich nicht, weswegen auch fast immer auf die Skriptvariante zurückgegriffen wird. Wer aber gerade kein Skript zur Hand hat, kann den Formularversand notfalls auch per E-Mail erledigen.
Ein weiteres wichtiges Attribut für das form-Element ist method. Hierüber legt man die HTTP-Übertragungsmethode für den Versand des Formularinhalts fest. Zwei verschiedene Varianten stehen dabei zur Verfügung.
• post = Die Formulardaten werden hier in zwei Schritten an die angegebene Adresse übermittelt. Zunächst wird die angegebene Adresse vom Browser kontaktiert. Ist das erfolgreich gewesen, werden die Formulardaten an das Skript übergeben.
• get = Bei dieser Methode werden die Formulardaten an das Ende der URL angehängt, die dem action-Attribut zugewiesen wurde. Die Formulardaten sind somit u.a. auch in der Adresszeile des Browsers zu sehen.
Stellt sich natürlich die Frage, welche dieser beiden Varianten man für den Versand der Formulardaten verwenden sollte. Prinzipiell könnt ihr beide einsetzen. Gerade aber wenn es um große Datenmengen und den Upload von Dateien auf den Server geht, solltet ihr allerdings zu post greifen.
Einfache Formularfelder
Bislang wurde lediglich das äußere Gerüst des Formulars definiert. Im Browser ist vom Formular selbst allerdings noch nichts zu sehen.
<form method="post" action="form.php"> … </form>
Jetzt geht es also darum, das Formular mit Inhalt/Leben zu füllen.
Der wohl am häufigsten benötigte Feldtyp ist ein einzeiliges Eingabefeld. Diese verwendet man beispielsweise, um Namen, Vornamen und die E-Mail-Adresse abzufragen. Definiert werden einzeilige Eingabefelder folgendermaßen:
<input type="text" name="vorname" />
Dem input-Element wird die Attribut-Wert-Kombination type="text" zugewiesen. Außerdem solltet ihr jedem Eingabefeld einen internen Bezeichner geben. Dieser Bezeichner muss im Dokument eindeutig sein. Interessant ist er vor allem dann, wenn es um die Verarbeitung der Formulardaten mittels Skript geht. Verwendet im Bezeichner keine Leer- und Sonderzeichen.
Wenn ihr euch das Ergebnis im Browser anseht, ergibt sich folgendes Bild:
Sonderlich spektakulär sieht das Ganze freilich noch nicht aus. Wenn ihr aber in das Textfeld klickt, werdet ihr feststellen, dass ihr dort bereits Eingaben machen könnt.
Damit die Besucher wissen, was sie in das Feld eintragen sollen, fehlt natürlich noch eine Beschriftung.
Vorname: <input type="text" name="vorname" />
Auch hier liefert ein Blick in den Browser wieder das gewünschte Ergebnis.
Über das Attribut size könnt ihr die Feldbreite bestimmen.
Vorname: <input type="text" name="vorname" size="30" /> <br /> Postleitzahl: <input type="text" name="plz" size="5" />
Dem size-Attribut weist man die gewünschte Feldbreite zu.
Dabei entspricht 5 exakt fünf Zeichen. In diesem Zusammenhang ist auch das Attribut maxlength interessant. Denn darüber wird die maximal zulässige Anzahl an Zeichen angegeben, die in das Feld eingetragen werden dürfen. Auch hierzu wieder ein Beispiel:
Vorname: <input type="text" name="vorname" size="30" maxlength="40" />
Ist der bei maxlength angegebene Wert größer als der bei size, dann wird bei längeren Eingaben automatisch im Feld gescrollt.
Über das Attribut value könnt ihr eine Feldvorbelegung erreichen.
Vorname: <input type="text" name="vorname" value="Dein Name" />
Der value zugewiesene Wert ist dabei als Feldvorbelegung zu sehen.
Anwender können diesen vorbelegten Wert löschen.
Ihr könnt übrigens verhindern, dass Werte aus Feldern gelöscht werden. Dabei definiert man ein Eingabefeld, was im eigentlichen Sinn gar kein Eingabefeld mehr ist. Tatsächlich werden solche Felder oftmals für Ausgaben genutzt. Interessant könnte das also beispielsweise sein, um per Skript ermittelte Werte anzuzeigen. Denkt hier beispielsweise an einen Taschenrechner. Ebenso kann man aber auch ein Feld manuell mit einem Text vorbelegen, der von den Besuchern nicht mehr verändert werden kann. (Hinweis: Das Euro-Zeichen wird in der PDF-Ansicht leider nicht korrekt wiedergegeben).
<input name="preis" type="text" value="€ 699.-" readonly />
Um ein Feld auf nur-lesen zu setzen, weist man ihm das Attribut readonly zu. Auch hier wieder ein Blick auf das Ergebnis:
Der vordefinierte Text ist direkt zu sehen. Löschen lässt sich dieser allerdings nicht.
Passwortfelder definieren
Ihr kennt natürlich Passwortfelder. Überall dort, wo ihr euch registriert, müsst ihr ein Passwort angeben. (Üblicherweise muss man es sogar zwei Mal eintragen).
Die in das Eingabefeld eingetragenen Daten sind dabei nicht sichtbar, sondern werden vom Browser automatisch durch Sterne/Punkte ersetzt. Vorteil dieser Variante: Personen, die euch vielleicht bei der Passworteingabe über die Schulter sehen, können das Passwort nicht entschlüsseln. Es ist allerdings ein Trugschluss, dass Passwortfelder automatisch sicher sind. Tatsächlich werden die Passwörter beim normalen HTTP im Klartext beim Absenden des Formulars übertragen.
Definiert werden Passwortfelder folgendermaßen:
<input type="password" name="passwort" />
Dem type-Attribut wird als Wert password zugewiesen. Auch hier wieder ein Blick auf das Ergebnis.
Wenn ihr dort etwas eintippt, wird das von den Browsern direkt während der Eingabe unkenntlich gemacht.
