Formular

Was sind Formulare

HTML-Guide Handout
Frames Aufgabenblatt 2

Ein Formular hat jeder schon einmal ausgefüllt. Ob auf Papier oder im Web.
Einsatzgebiete von Formularen im WWW sind häufig Feedback-Formulare, Kontakt-Formulare oder Umfragen.

So funktionieren Formulare

Der Ersteller einer Web-Seite hat mit Formularen die Möglichkeit, Infomationen vom Besucher gezielt abzufragen.
Dies geschieht z.B. mittels

Eingabefeldern (freier Text)
Radio-Buttons (Auswahl verschiedener Alternativen)
Ankreuzfelder (Ja/Nein)
Auswahllisten

Die Formular-Eingaben werden, sobald der Benutzer auf den "Absende-Knopf" drückt, an den Server (siehe Client/Server) übermittelt.
Das ist auch das Problem bei den Formularen. Es wird ein Programm auf dem Server benötigt (z.B. ein CGI-Skript), welches die Eingaben verarbeiten kann.
Solche Programme wurden füher in Programmiersprachen wie Perl, oder C erstellt und als Skripte auf dem Server ausgeführt. Heute werden dafür vor allem die Skriptsprachen PHP oder ASP verwendet.
Solche Sprachen sind für den Anfänger schwierig zu erlernen und setzen voraus, dass auf dem Server die entsprechende Skripte ausgeführt werden dürfen.

Lösung
Auf diese Problematik wollen wir aber gar nicht weiter eingeben, denn es gibt auch die Möglichkeit, sich die Ergebnisse per E-Mail zuschicken zu lassen.

Syntax

Das Formular wird durch den Anfangs- und Endtag FORM begrenzt.

<form action="mailto:mail@xy.de" method="post" enctype="text/plain">
<!-- Formularfelder -->
</form>

`action="mailto:deine@adresse.de"`	Es muss ein Attribut `action` geben. Es gibt an, was mit den Formulardaten geschieht: Versenden an eine E-Mail-Adresse.
`method="post"`	Es muss ein Attribut `method` geben. Es gibt an, wie die Formulardaten übermittelt werden: `get` oder `post`.
`enctype="text/plain"`	Es sollte ein Attribut `enctype` geben. Es gibt an, wie die Formulardaten kodiert werden. Ohne die Angabe `text/plain` werden die Daten nicht sehr lesefreundlich versendet.

Buttons zum Absenden und Zurücksetzen

<input type="submit" value="Absenden">

<input type="reset" value="Zurücksetzen">

Wenn der Button submit gedrückt wird, werden die Daten gemäß der Angaben (action="") weiterverarbeitet, z.B. an eine E-Mail-Adresse verschickt.
Durch reset werden alle Eingaben auf die Ursprungswerte zurückgesetzt.
Das Attribut value gibt die Beschriftung des Buttons an.

Einzeilige Eingabefelder

<input type="text" name="feldname" size="20" maxlength="10" value="Hallo!">

`type="text"`	Es muss ein Attribut `type` geben. Es gibt die Art des Eingabefeldes an.
`name="feldname"`	Es muss ein Attribut `name` geben. Der selbstgewählte Name ermöglicht die weitere Verarbeitung der eingegebenen Daten.
`size="20"`	Die Anzeigelänge des Eingabefeldes.
`maxlength="10"`	Die maximale Zeichenzahl, die eingegeben werden darf.
`value="Hallo!"`	Text, der beim Laden der Seite schon im Eingabefeld steht
`readonly`	Der Feldinhalt darf nicht verändert werden.

Mehrzeilige Eingabefelder

<textarea name="feldname" rows="5" cols="20" wrap="physical">Hallo!</textarea>

Wenn wir etwas zwischen die textarea-Tags schreiben, erscheint dies als Vorbelegung im Textfeld.

`name="feldname"`	Es muss ein Attribut `name` geben.
`rows="5"`	Die Höhe des Eingabefeldes.
`cols="20"`	Die Breite des Eingabefeldes.
`wrap="virtual"`	Dadurch erreichen wir einen Zeilenumbruch im Eingabefeld, der (z.B. in der E-Mail) nicht mit übertragen wird. Mit `wrap="physical"` erhalten wir einen tatsächlichen Zeilenumbruch.
`readonly`	Der Feldinhalt darf nicht verändert werden.

Radiobuttons/Checkboxen

<input type="radio" name="gruppenname" value="feldname1">
<input type="radio" name="gruppenname" value="feldname2" checked>
<input type="radio" name="gruppenname" value="feldname3">

<input type="checkbox" name="gruppenname" value="feldname1">

Mehrere Radiobuttons bzw. Checkboxen können den gleichen Namen haben (name="") und gehören so zusammen. Von den Radiobuttons einer Gruppe kann dann nur einer ausgewählt werden.

`type="radio"`	Es muss ein Attribut `type` geben. `type="radio"` ist ein Radiobutton, `type="checkbox"` eine Checkbox.
`name="gruppenname"`	Mehrere Radiobuttons/Checkboxen werden durch einen gleichen Wert des Attributs `name` zu einer Gruppe zusammengefasst.
`value="feldname"`	Es muss ein Attribut `value` geben.
`checked`	Die Option ist beim Laden der Seite schon ausgewählt.

Auswahllisten

<select name="feldname" size="1" multiple>
<option value="option1">1. Option</option>
<option value="option2" selected>2. Option</option>
<option value="option3">3. Option</option>
</select>

`name="feldname"`	Es muss ein Attribut `name` geben.
`size="3"`	Anzahl der angezeigten Optionen.
`multiple`	Es können mehrere Optionen ausgewählt werden.
`value="optionsname"`	Es muss ein Attribut `value` geben. Es wird als Ergebnis übermittelt, falls die Option ausgewählt wurde.
`selected`	Die Option ist beim Laden der Seite schon ausgewählt.

versteckte Felder

<input type="hidden" name="feldname" value="versteckter Wert">

Formulare und Formularelemente gestalten mit CSS

Siehe SelfHTML