33 Stimmen

HTML-Formular mit Daten vorbelegen

Tutorial von Stefan Trost | Letztes Update am 13.05.2021 | Erstellt am 27.01.2015

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:

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.

AntwortenPositivNegativ

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.