Grundsätzliches zu Formularen

Formulare

Aufbau

Ein Textfeld wird eingefügt
Eine Textarea
Der Sinn von Auswahlfeldern
Radio-Buttons
Die Buttons mit den Sonderfunktionen
Einfache Buttons

Ein Textfeld wird eingefügt

Textfelder sind einzeilige Eingabefelder, in die eine Zeichenkette eigegeben werden kann. Logisch.
Sie können also z.B. den Besucher auffordern seinen Namen einzugeben oder irgendetwas anderes.

Mit dem zusätzlichen Attribut maxlength kann man die Eingabe clientseitig auf die zugewiesene Länge beschränken. Beachten Sie jedoch, dass dies nicht von allen Browser untersützt wird und somit keine 100%ig sichere Method darbietet, die Länge zu beschränken.
Um die sichtbare Größe/Länge des Feldes festzulegen, verwenden Sie das Attribut size, wenn Sie einen Text vorgeben wollen, verwenden Sie value.

Die Grundformel lautet:
`<input type="text" name="irgendetwas">`	ergibt

So könnte das in der Realität aussehen:
`<input type="text" name="nachname" value="" size="10" maxlength="5">`	ergibt

Eine Spezialform des Textfeldes ist das Kennwortfeld. Sie kennen es sicherlich von überall dort, wo Sie sich im Internet durch ein Passwort anmelden müssen: Die Eingaben sind unsichtbar, d.h. sie werden als Punkte o.ä. dargestellt.
Das Kennwortfeld ist im Prizip identisch zum Textfeld, wird jedoch über type="password" aufgerufen.

Schreiben Sie da mal was rein...

-->

Eine Textarea

Im Unterschied zum Textfeld, besteht eine Textarea aus mehreren Reihen (vertikal). Der Besucher kann hier also einen längeren, mehrzeiligen Text reinschreiben. Sie können ihn hier zum Beispiel nach seiner Meinung zu einem Thema fragen.

Eine Textarea:
Die Grundformel lautet:
`<textarea cols="10" rows="3"> </textarea>`	ergibt
Was zwischen `<textarea>` und `</textarea>` geschrieben wird, taucht von Anfang an in der Textarea auf. Diese Text kann aber von Hand gelöscht bzw. ersetzt werden.

So könnte da in der Realität aussehen:
<textarea cols="40" rows="5"> Wenn Sie nichts in das Feld schreiben wollen, lassen Sie diesen Text einfach stehen. </textarea>	ergibt	Wenn Sie nichts in das Feld schreiben wollen, lassen Sie diesen Text hier einfach stehen.

Der Sinn von Auswahlfeldern

Der Sinn von Auswahllisten: Nun, Auswahllisten sind dazu da, dass der Besucher sich (bei einzeiligen Auswahllisten) eine Antwort von mehreren möglichen, also vorgegebenen Antworten aussuchen kann. Z.B.: "Welche Seite meiner Homepage gefällt Ihnen am besten?". Genau dasselbe ist aber mit Radio-Buttons auch möglich. Bei mehrzeiligen Auswahllisten (mit multiple) können Sie den Besucher z.B. fragen, was seine Hobbys sind. Sie machen eine große Auswahlliste mit vielen verschiedenen Hobbys und der Besucher kann alle Einträge auswählen die auf ihn zutreffen. Er kann also mehrere Einträge auswählen.

Listenfeld einzelig:
Die Grundformel lautet:
<select> <option></option> <option></option> </select>	ergibt
Jeder Eintrag, welcher aus der Liste auswählbar sein soll, muss zwischen `<option>` und `</option>` stehen. So z.B. `<option>Möglichkeit1</option> <option>Möglichkeit2</option>`	ergibt
Man darf hier natürlich nicht vergessen mittels `<select name="[name]">` einen Namen für das Auswahlfeld festzulegen, da Sie die Daten `[Name des Auswahlfeldes] = [Was der Besucher ausgewählt hat]` übermittelt kriegen.

Listenfeld mehrzeilig:
Die Grundformel lautet:
<select multiple> <option></option> <option></option> </select>	ergibt
<select size="5" multiple> <option>Möglichkeit1</option> <option>Möglichkeit2</option> <option>Möglichkeit3</option> <option>Möglichkeit4</option> <option>Möglichkeit5</option> </select>	ergibt
Drücken Sie auf Ihrer Tastatur die STRG Taste und halten Sie diese. Dann klicken Sie nacheinander auf die Einträge, die Sie auswählen möchten. Achten Sie darauf, dass Sie ihren Besucher darauf hinweisen sollten, dass er mehrere Einträge auswählen kann. Wenn Sie bei obigem Beispiel das Wort `multiple` weglassen, haben Sie ein Feld (man sieht alle Einträge auf einmal), aus dem Sie aber nur einen Eintrag auswählen können.

Radio-Buttons

Wie Sie im Absatz hier drüber gelesen haben, kann man bei Auswahlfeldern sagen, ob der Besucher eine oder mehrere Einträge der Liste auswählen darf.
Bei Radio - Buttons kann man immer nur einen Radio - Button von einer Optionsgruppe anklicken. Eine Optionsgruppe zeichnet sich dadurch aus, dass alle Radio - Buttons einer Optionsgruppe den gleichen Namen haben!

Die Grundformel:
<input type="radio" name="gruppe1">a <input type="radio" name="gruppe1">b <input type="radio" name="gruppe1">c	ergibt	a b c

Wenn man das jetzt so in das Formular tuen würde, würde da nicht viel bei rauskommen! Denn da in die Radio - Button ja nichts reingeschrieben werden kann, kriegt man lediglich `[Name der Gruppe] =` und nichts weiter zugeschickt. Deshalb muss man etwas vorgeben, was gesendet werden soll, wenn der Button angeklickt wurde:
<input type="radio" name="gruppe1" value="a">a <input type="radio" name="gruppe1" value="b">b <input type="radio" name="gruppe1" value="c">c	ergibt	a b c
Optisch ist hier von den Radio - Buttons her kein Unterschied, wenn allerdings jemand bei den unteren Buttons einen auswählt und das ein Formular abschicken würde, so würde man per Mail erhalten: `Gruppe1 = [Value des ausgewählten Buttons]`.

Sonderbuttons

Es gibt zwei Sonderbutton die für Formulare gebraucht werden. Der eine ist der "Submit" - Button, welcher zum Übermitteln der Daten, also zum Versenden des Formulars dient. Der andere Button ist der "Reset" - Button, mit ihm werden alle im Formular eingegebenen Daten gelöscht. Hier lernen Sie die Formeln zum Einfügen solcher Buttons in das Formular kennen.

Submit-Button:
Die Grundformel lautet:
`<input type="submit">`	ergibt
Durch `<input type="submit" value="Senden">`	ergibt sich
Mittels dem Value lässt sich also die Beschriftung des Buttons festlegen.

Reset-Buttons:
Die Grundformel lautet:
`<input type="reset">`	ergibt
Durch `<input type="reset" value="Löschen">`	ergibt sich

Natürlich lässt sich auch noch für jegliche Schaltflächen ein Name festlegen, welcher beim Übermitteln je nach verwendetem CGI - Script, dann mit ankommt, d.h. wenn Sie den Namen `name="Schaltfläche1"` festlegen, erhalten Sie die Mail auch noch mit aufgeführt.
Jetzt noch einmal die vollständige Version:
`<input type="submit" name="button1" value="Noch ein Button">`	ergibt

Standard Buttons

Bei den normalen Buttons gibt es zwei verschiedene Möglichkeiten:

1. Herkömmliche Version:
Die Grundformel lautet:
`<input type="button">`	ergibt
Natürlich muss hier mit Value eine Beschriftung festgelegt werden:
`<input type="button" value="Ein einfacher Button>`	ergibt

2. Moderne Version:
Die Grundformel lautet:
`<button>Hier die Beschriftung</button>`	ergibt
Bei dieser modernen Art des Button, kann man auf die Buttons auch z.B. Bilder stellen (wird im IE nur schlecht dargestellt) oder ganze Romane schreiben g
<button name="mybutton"> <img src="Bild-URL"<br> Und hier noch ein Text<br>Und eine neue Zeile!> </button>	ergibt