Topics / HTML / ID: 86

Formulare erstellen

Um ein Feedback - Formular zu erstellen oder irgendwelche anderen HTML-Seiten zu erstellen die Eingabefelder enthalten, werden Formulare benötigt. Die nachfolgenden Erläuterungen sollen Ihnen ein wenig die Bedeutung der einzelnen Elemente eines Formulars näher bringen.

Wie wird ein Formular definiert?

Prinzipiell ist es möglich ein Formular an jeder gewünschten Stelle innerhalb des Body Bereiches der Website zu definieren. Formulare beginnen immer mit dem einleitenden Tag <form> und werden mit dem abschließenden Tag </form> wieder beendet.

Innerhalb dieser Tags stehen dann die Elemente des Formulars wie Eingabefelder, Auswahllisten oder Buttons. Um die Elemente zu platzieren und zu beschriften, können Sie dazwischen auch andere HTML-Elemente notieren.

Beispiel:

1. <form action="mailto:infol@wicoh.de" method="post" enctype="text/plain">
2. <!-- hier folgen die Formularelemente -->
3. </form>

Das Attribut action ist die Aktion, mit welcher das Formular verschickt werden soll. In unserem Beispiel wird beispielsweise die Aktion "mailto=" verwendet. Mit mailto werden die ausgefüllten Formulardaten an die angegebene E-Mail-Adresse geschickt.

Mit method bestimmen Sie, mit welcher HTTP - Übertragungsmethode die Formulardaten an ihr Ziel gelangen sollen. Dabei gibt es zwei mögliche Werte, nämlich method="get" oder method="post".

method="get"

Hier werden die Daten des ausgefüllten Formulars als Parameter an die Aufrufadresse angehängt.

method="post"

Hier werden die Daten des ausgefüllten Formulars vom Webserver über den Standardeingabekanal zur Verfügung gestellt, und ein auswertendes CGI-Script muss die ankommenden Daten behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde (post = verschicken).

Bei einer Zuschickung des Formulars per e-mail, sollten Sie diese Variante nutzen und das enctype="text/plain" Attribut verwenden, welches das Formular für den Empfänger lesbar macht.

Welche Möglichkeiten habe ich bei der Gestaltung des Formulares?

Den grundlegenden Aufbau eines Formulares kennen sie nun, jedoch muss dieses nun noch entsprechend mit diversen Feldern gestaltet werden.

Eingabefelder:

1. <form action="input_text.htm">
2. <p>Vorname: <input name="vorname" type="text" size="30" maxlength="30" value="info">
3. </p>
4. <p>Nachname: <input name="nachname" type="text" size="30" maxlength="40" value="wicoh">
5. </p>
6. </form>

Erläuterung:
Um ein Eingabefeld zu setzen, wird der <input> Tag verwendet. Folgende Attribute werden am häfigsten verwendet:

name="email"
Name des Feldes (bei einer E-Mailversendung taucht name als Feldname wieder auf).

type="text"
Ist nicht zwingend notwendig, wird jedoch der Vollständigkeit wegen verwendet.

size="20"
Dieses Attribut wird zur Angabe der Anzeigelänge benötigt.

maxlength="30"
Gibt die interne maximale Feldlänge in Zeichen an.

value="info@"
Dieses Attribut dient dazu einen Text im Feld vorzubelegen.

Auswahllisten

Mit Auswahllisten können Sie dem Anwender eine Liste mit festen Einträgen anbieten, aus der er einen Eintrag auswählen kann.

Beispiel:

Auto fahren Computer Schwimmen Tischtennis Malen

1. <form action="select.htm">
2. <p>
3. <select name="Hobbys" size="3">
4. <option>Auto fahren</option>
5. <option>Computer</option>
6. <option>Schwimmen</option>
7. <option>Tischtennis</option>
8. <option>Malen</option>
9. </select>
10. </p>
11. </form>

Erklärung:
Eine Auswahlliste wird immer mit dem <select> Tag eingeleitet. Wie auch bei Eingabefeldern folgt daraufhin das Attribut name mit welchem Sie diese bezeichnen können. Mit dem Attribut size können Sie angeben wie viel viele Einträge angezeigt werden sollen. Sollte die Liste mehr Einträge enthalten als angezeigt werden, kann der Anwender in der Liste scrollen. Das multiple Attribut dient dazu eine Mehrfachauswahl zu genehmigen.

Mit <option>...</option> definieren Sie zwischen dem einleitenden <select>-Tag und dem Abschluss-Tag </select> jeweils einen Eintrag der Auswahlliste. Hinter <option> muss der Text des Listeneintrags stehen. Auch können Sie eine Auswahl schon im Voraus markieren, dazu setzen Sie einfach das selected Attribut in den entsprechenden einleitenden <option> Tag.

Radiobuttons

Radiobuttons sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann.

Beispiel:

Programmiersprachen:

HTML | PHP | CSS

1. <form action="radio.htm">
2. <p>Programmiersprachen:</p><p>
3. <input type="radio" name="sprache" value="html"> HTML <br>
4. <input type="radio" name="sprache" value="php"> PHP <br>
5. <input type="radio" name="sprache" value="css"> CSS </p>
6. </form>

Erklärung:
Ein Radiobutton wird immer mit <input type="radio" eingeleitet. Auch hier können Sie mithilfe des name Attributs die interne Bezeichnung bestimmen. Mit dem Attribut value= bestimmen Sie einen internen Bezeichnerwert für jeden Radiobutton (value = Wert).

Checkboxen

Checkboxen sind eine Gruppe von ankreuzbaren Quadraten, bei denen der Anwender keine, eins oder mehrere auswählen kann. Beispiel des Quellcodes:

Kreuzen Sie die gewünschten Zutaten an:

Salami | Pilze | Sardellen

1. <form action="input_checkbox.htm">
2. <p>Kreuzen Sie die gewünschten Zutaten an:</p>
3. <p><input type="checkbox" name="zutat" value="salami"> Salami<br>
4. <input type="checkbox" name="zutat" value="pilze"> Pilze<br>
5. <input type="checkbox" name="zutat" value="sardellen"> Sardellen</p>
6. </form>

Erklärung:
Im Prinzip funktioniert eine Checkbox genau wie ein Radiobutton, es wird jediglich das type= Attribut als type="checkbox" bestimmt.

Abschicken und Löschen

Wenn der Anwender das Formular ausgefüllt hat, muss er es logischerweise versenden. Dies geschieht mit sog. Buttons, es wird jedoch wieder der <input> Tag verwendet.
Quellcodebeispiel:

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

Erklärung:
Das type Attribut wird als type="submit" bestimmt. Mit dem value="" Attribut können Sie den Button beschriften. Wird dieser Button gedrückt, so wird das Formular (nach den von ihnen im <form>-Tag angegebenen Bestimmungen) versendet.

Eine Löschung des kompletten Formulars seitens des Anwenders ist ebenfalls möglich.
Quellcodebeispiel:

<input type="reset" value="Reset">

Erklärung:
Das Attribut type wird mit der Wertzuweisung reset bestimmt. Mit dem value="" Attribut können Sie den Button beschriften. Wird dieser Restebutton gedrückt, werden alle Eintragungen in diesem Formular gelöscht.

eingestellt am: 26.10.2005  (5524 mal gelesen)

 Druckansicht | Übersicht HTML | zurück