http://jendryschik.de / archiv / einfuehrung / formulare.html
Formulare begegnen Ihnen, wenn Sie direkt aus der Seite eine Mail schreiben wollen, wenn Sie sich irgendwo anmelden wollen, wenn Sie einen Fragebogen ausfüllen, wenn Sie eine Bestellung abgeben und bei vielen vielen Gelegenheiten mehr. Auf dieser Seite zeige ich Ihnen, wie Sie mit XHTML Formulare erstellen. Ich gehe dabei nicht auf alle Möglichkeiten ein, die XHTML Ihnen bietet. Lesen Sie dazu in den Spezifikationen des W3C oder in SelfHTML nach, wobei Sie beachten sollten, dass SelfHTML für HTML 4.0 geschrieben ist!
Ein Formular beginnt immer mit <form> und wird mit dem Tag </form> geschlossen. Das einleitende <form>-Tag enthält ein Attribut action, mit dem Sie angeben, was mit dem ausgefüllten Formular passieren soll. Mit dem Attribut method geben Sie die Übertragungsmethode an, dies kann post oder get sein. Bei get werden die Daten und Variablen an die URL angehängt und erscheinen in der Adresszeile, post leitet die Daten an den Server weiter, der sie dann weitersendet.
Das leere Element <input ... /> definiert ein einzeiliges Eingabefeld. Jedes Eingabefeld muss einen internen Bezeichnernamen erhalten, den sie mit dem Attribut name vergeben. Des weiteren bestimmen Sie die Zeichenlänge des Textfeldes mit dem Attribut length. Die Anzahl der möglichen Zeichen begrenzen Sie mit dem Attribut maxlegth. Der Wert, den Sie für das Attribut value festlegen, wird dann in dem Textfeld angezeigt. Das Attribut type schließlich gibt an, worum es sich bei dem Textfeld handelt; der Wert Text definiert ein Textfeld.
Hier sehen Sie ein Beispiel für den Quelltext eines einfachen Textfeldes:
<form action="http://send.beispiel.de/" method="post"> Name:<br /> <input type="text" name="Name" size="55" maxlength="55" /> </form>
Mehrzeilige Eingabefelder werden mit dem Tag <textarea> eingeleitet und mit dem Tag </textarea> geschlossen. Auch hier muss ein interner Benutzername vergeben werden. Die Breite und Höhe des Textfeldes in Zeilen und Anzahl der Zeichen pro Zeile bestimmen Sie mit <rows> und <cols>.
Auswahllisten sind Listen, aus denen sie einen Punkt oder mehrere Punkte per Anklicken auswählen können, etwa so:
<select>leidet eine Auswahlliste ein, </select> beendet das Element. Mit dem Attribut size bestimmen Sie, wie viele Einträge angezeigt werden sollen. Sind es mehr, als sie angeben, wird gescrollt. Eine Drop-Down-Liste erreichen Sie, wenn Sie size="1" definieren. Zwischen <option> und </option> stehen jeweils die einzelnen Listenpunkte.
Mit Hilfe von Radiobuttons oder Checkboxen kann der User einen oder mehrere Einträge markieren. Dabei unterscheiden sich diese beiden Buttonarten zunächst nur durch ihr Aussehen:
Beide Buttons werden durch das leere Element <input ... /> gebildet. Radiobuttons erhalten Sie durch type="radio", Checkboxen durch type="checkbox". Ihnen ist gemeinsam, dass sie einen internen Benutzernamen name und einen internen Bezeichnerwert value erhalten müssen. Radiobuttons können sie mit selected="selected" und Checkboxen mit checked="checked" vorselektieren.
Sie können mit dem leeren Element <input type="button" ... /> anklickbare Buttons definieren. Die Beschriftung des Buttons definieren Sie mit value. Es gibt auch noch weitere Button-Arten, je nachdem welchen type Sie angeben. Zum Beispiel type="reset" zum Zurücksetzen der Angaben, type="submit" zum Absenden der Angaben oder type="file", um eine Datei auszuwählen. In Verbindung mit Javascript können Sie zum Beispiel Buttons erstellen, die die Funktion des "Zurück"-Buttons des Browsers haben. In diesem Fall würde der Quelltext wie folgt aussehen:
<input type=button value="Zurück" onClick="history.back()">
Schauen Sie einfach in SelfHTML, welche Möglichkeiten Ihnen da noch geboten werden.
Was bedeutet eigentlich Styling?
| Letzte Änderung: 07. März 2001 |
