Formulare & Formularfelder

Ein Formular besteht aus mehreren Einzelteilen
Geöffnet und geschlossen wird ein Formular immer durch das <form>-Tag
Alles was zwischen diesen beiden Tags steht, gehört zum Formular.

<form>
...
< /form>

Im <form>-tag wird mit dem Attribut action="" angegeben, was der Webserver mit den eingegebenen Formulardaten weiter anstellen soll.
Beim action-Attribut kann z.B. eine E-Mailadresse angegeben werden, es kann aber auch ein externes Programm auf dem Server aufgerufen werden, das die Daten weiter verarbeitet.

 <form action="mailto:zudirselbst@wohinwohl.com">
...
< /form>

Im <form>-tag wird außerdem noch mit dem Attribut 'method=' angegeben, wie der Server die eingegebenen Formulardaten behandeln soll.
Meist ist das method-Attribut mit dem Wert "post" oder "get" versehen. Bei unserem Beispiel muss "post" verwendet werden.

 <form action="mailto:zudirselbst@wohinwohl.com" method="post">
...
< /form>

Wenn in dem Formular Text erfasst wird, der dann per E-Mail-Funktion versendet werden soll, muß das Attribut enctype mit dem Wert "text/plain" noch ergänzt werden.

 <form action="mailto:zudirselbst@wohinwohl.com" method="post" enctype="text/plain">
...
< /form>
Wenn Sie Formularfelder gruppieren wollen, können Sie das mit dem <fieldset>...</fieldset>-Tag bewerstelligen. Die Überschrift des Fieldsets kennzeichnen Sie mit <legend>...</legend> nach dem öffnenden <fieldset>.
Ihre Daten
Typ des Formularfeldes Tag Auswirkung
Die einzelnen Formularfelder werden durch verschiedene tags bestimmt. Einzeilige Textfelder und Checkboxen, sowie die Schaltflächen werden durch das tag <input> definiert, mehrzeilige Textfelder durch <textarea>, Auswahllisten durch das tag <select>.
Jedes Formularfeld braucht auch einen eindeutigen Namen. Dieser Name wird durch das Attribut "name" bestimmt, mit dem das jeweilige Formularfeld-Tag versehen wird.
Durch das Attribut <size> kann die Länge/Breite des Feldes bestimmt werden.
Einzeiliges Textfeld:
tag: <input>
Attribut: type
Wert: "text" (definiert ein Textfeld)

<input type="text" name="name">

Auswahlliste:
Eine Auswahlliste wird durch das
tag: <select> eingerahmt
Attribut: Name (benennt dieses Formularfeld)

Einzelner Listeneintrag:
tag: option
Attribut: value (definiert den angezeigten und den übergebenen Wert des jeweiligen Listeneintrages)
Wert: "enthält den übergebenen Listenwert"
Attribut: selected (definiert den vorausgewählten Wert)

<select name="Wert">
<option selected="selected" value="Wert 1">Wert 1</option>
<option value="Wert 2">Wert 2</option>
<option value="Wert 3">Wert 3</option>
</select>

Runde Checkboxen:
tag: <input>
Attribut: type
Wert: "radio" (definiert ein rundes Checkbox-Feld)
Attribut: name (definiert den Namen des Formularfeldes)
Attribut: value (definiert den Inhalt, der übergeben wird)
Attribut: checked (definiert das vorausgewählte Feld)

<input type="radio" value="1" name="wert" checked="checked">1<br>
<input type="radio" value="2" name="wert">2<br>
<input type="radio" value="3" name="wert">3
1
2
3

Checkboxen:
tag: <input>
Attribut: type
Wert: "checkbox" (definiert ein klassisches viereckiges Checkbox-Feld)
Attribut: name (definiert den Namen des Formularfeldes)
Attribut: value (definiert den Inhalt, der übergeben wird)
Attribut: checked (definiert das vorausgewählte Feld)

<input type="checkbox" value="1" name="wert1" checked="checked>1<br>
<input type="checkbox" value="2" name="wert2">2<br>
<input type="checkbox" value="3" name="wert3">3
1
2
3

Mehrzeiliges Textfeld:
tag: <textarea>
Attribut: name (definiert den Namen des Formularfeldes)
Attribut: rows (definiert die Anzahl der Zeilen)
Attribut: cols (definiert die Anzahl der Spalten)

<textarea name="wert">
Mit diesem Text wird das Eingabefeld vorbelegt.
</textarea>

Formularfeld zum Upload von Files
tag: <input>
Attribut: type
Wert: "file"

<input type="file">

Schaltfläche zum Verarbeiten des Formularinhalts:
tag: <input>
Attribut: type
Wert: submit

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

"Beschriften" von Formularfeldern:
Beschriftungen von Formularfelder können Sie mit <label for="feldname">Feldname</label> zuordnen.

<label for="vorname">Ihr Vorname</label>
<input type="text" id="vorname" name="vorname">

<h2>Ein Beispielformular</h2>

<form method="post" action="mailto:mail@adresse.de" enctype="text/plain">
<h2>Ihre Meinung zum heutigen Wetter</h2>

<fieldset>
<legend>Ihre Daten</legend>

<label for="name">Ihr Name:</label>
<input type="text" name="name" id="name"><br>

<label for="land">Wo wohnen Sie?</label>
<select name="land" id="land">
 <option selected="selected" value="Deutschland">Deutschland</option>
 <option value="Schweiz">Schweiz</option>
 <option value="Österreich">Österreich</option>
 <option value="Anderes Land">Anderes Land</option>
</select><br>
<label for="bewertung">Bewerten Sie das Wetter</label>

<input id="bewertung" type="radio" value="spitze" name="bewertung"  checked="checked">spitze
<input type="radio" value="naja"  name="bewertung">mittelmäßig
<input type="radio" value="mies" name="bewertung">schlecht
<br>

<label for="aenderungen">Was soll sich ändern?</label>
<textarea name="aenderungen" rows="5" cols="20" id="aenderungen">Mehr Regen? Sturm? 36 Grad? </textarea><br>

</fieldset>

<input type="submit" value="Per E-Mail abschicken">
</form>

Ein Beispielformular

Ihre Meinung zum heutigen Wetter

Ihre Daten

spitze mittelmäßig schlecht