HTML-Formular mit Daten vorbelegen

In diesem Tutorial möchte ich euch zeigen, wie ihr die unterschiedlichen HTML-Eingabefelder und Optionsfelder mit Daten oder Default-Werten vorbelegen könnt.

Im Folgenden findet ihr Beispiele für die folgenden Eingabemöglichkeiten - jeweils mit und ohne Vorbelegung:

• Einzeiliges Texteingabefeld: Input Text
• Mehrzeiliges Texteingabefeld: Textarea
• Optionsschalter: Checkbox und Radiobutton
• Auswahlliste: Select

Sind die Default-Werte gesetzt, findet der Besucher eurer Seite bereits direkt nach dem Laden die Vorbelegung dieser Werte vor.

Input Text - Einzeiliges Texteingabefeld

Ein einzeiliges Texteingabefeld wird in HTML mit <input type="text"> definiert.

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

Die Textvorbelegung wird mit dem Attribut "value" definiert. Lässt man dieses Attribut komplett weg oder schreibt value="", also eine leere Zeichenkette, bleibt das Texteingabefeld leer.

<input name="it" type="text" value="Text im Eingabefeld.">

Definiert man eine Zeichenkette zwischen den beiden Anführungszeichen hinter "value", wird dieser Text als Vorbelegung des Eingabefeldes verwendet.

Textarea - Mehrzeiliges Texteingabefeld

Eine Textarea ist ein großes mehrzeiliges Feld für Texteingaben.

<textarea name="ta"></textarea> 

Ein leeres Textfeld wird definiert durch <textarea></textarea>.

<textarea name="ta">
Dieser Text erscheint im Textfeld.
</textarea> 

Eine Vorbelegung erreicht man, indem man den Default-Text einfach zwischen den einleitenden Tag <textarea> und den abschließenden Tag </textarea> schreibt.

Checkbox und Radiobutton - Optionsschalter

Checkboxen und Radiobuttons sind Optionsschalter, bei denen der Nutzer einen Haken machen kann. Der Unterschied zwischen einer Checkbox und einem Radiobutton liegt darin, dass die Checkboxen unabhängig voneinander auswählbar sind während immer nur ein Radiobutton aus einer Radiobutton-Gruppe aktiviert werden kann.

<input type="checkbox" name="cb1" value="cb1">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1">

Hier definieren wir zwei Checkboxen, die unabhängig voneinander ausführbar sind sowie vier Radiobuttons, von denen jeweils zwei zu einer Gruppe zusammengefasst sind. Die Gruppenzugehörigkeit wird bestimmt durch den gleichen Namen des Radiobuttons. Im Beispiel ist kein Haken gesetzt.

<input type="checkbox" name="cb1" value="cb1" checked="checked">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0" checked="checked">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1" checked="checked">

Um einen Haken zu setzen, fügen wir das Attribut "checked" mit dem Wert "checked", also checked="checked" hinzu. Im Beispiel haben wir so die erste Checkbox und jeweils einen Radiobutton aus jeder Gruppe aktiviert.

Select - Auswahlliste

Eine Auswahlliste definieren wir mit <select> .. </select> und darin enthaltenen Optionen, die jeweils mit <option> .. </option> umfasst sind. Das Attribut "size" definiert, wie viele Auswahloptionen gleichzeitig sichtbar sein sollen. Bei dem Wert 1 handelt es sich um eine Dropdown-Liste.

<select name="sel" size="1">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Falls wir die Liste so lassen, wie im Beispiel, wird automatisch das erste Element (hier also "A") selektiert.

<select name="sel" size="1">
  <option>A</option>
  <option selected="selected">B</option>
  <option>C</option>
</select>

Um ein beliebiges anderes Element aus der Liste vor-auszuwählen, benutzen wir das HTML-Attribut selected wie im obigen Beispiel. Dies würde uns das Element "B" vorauswählen.