Formular-Elemente 2

Mit dem „select“-Element können Auswahllisten erstellt werden. In der Standardform einer Auswahlliste kann eins von mehreren Optionen, in einer sich öffnenden Liste, ausgewählt werden. Mit dem „option“-Element werden die einzelnen Listenelemente erstellt.

Beispiel 1

HTML-Datei:

Ergebnis:

Personaldaten

Anrede:

Vorname:

Nachname:


Ergebnis im Browser:

Mit dem „selected“-Attribut in einem „option“-Element, kann dieses in der Liste vorselektiert werden. Mit dem „multiple“-Attribut im „select“-Element kann spezifiziert werden, dass mehrere Elemente in der Auswahlliste ausgewählt werden dürfen. Und mit dem „size“-Attribut im „select“-Element kann angegeben werden, wieviele Zeilen gleichzeitig in der Auswahlliste angezeigt werden sollen.

Beispiel 2

HTML-Datei:

Ergebnis:

Personaldaten

Anrede:

Vorname:

Nachname:


Ergebnis im Browser:

Mit dem „optgroup“-Element können die Elemente einer Auswahlliste gruppiert werden. Dies erhöht die Übersichtlichkeit, wenn eine Auswahlliste viele Elemente besitzt. Mit dem „label“-Attribut wird der Name einer Gruppe definiert.

Beispiel 3

HTML-Datei:

Ergebnis:

Fahrzeuge

Ergebnis im Browser:

Mit dem „label“-Element kann eine Beschriftung für Formular-Elemente erstellt werden. Beschriftungen für Formular-Elemente können prinzipiell zwar auch mit normalem Text oder Überschriften erstellt werden, aber die Verwendung des „label“-Elements hat bei vielen Formular-Elementen den Vorteil, dass auch die Beschriftung angeklickt werden kann, um das Element zu aktivieren bzw. zu deaktivieren. Die Verbindung zwischen Formular-Element und Beschriftung erfolgt mit dem „id“-Attribut im Formular-Element und mit dem „for“-Attribut im „label“-Element. Das „for“-Attribut im „label“-Element bekommt dabei den Wert des „id“-Attributs des zugehörigen Formular-Elements.

Beispiel 4

HTML-Datei:

Ergebnis:

Personaldaten









Regelmäßig verwendete Geräte:




Ergebnis im Browser:

Mit dem „fieldset“-Element kann ein Rahmen um einen Block von Formular-Elementen erstellt werden. Auf diese Weise können Formular-Elemente optisch gut erkennbar gruppiert werden. Verschiedene Rahmen können dabei auch ineinander verschachtelt werden. Mit dem „style“-Attribut kann die Breite des Rahmens definiert werden (z. B. style=“width:400;“). Wird keine Breite definiert, nimmt der Rahmen die ganze zur Verfügung stehende Breite im Browser-Fenster (mit Abstand zum Rand) ein. Mit dem „legend“-Element kann eine Bezeichnung für den Rahmen erstellt werden.

Beispiel 5

HTML-Datei:

Ergebnis:

Hinweis: „fieldset“-Elemente werden auf Jimdo-Seiten nicht dargestellt!

Ergebnis im Browser:

Anordnen von Formular-Elementen

Sollen Formular-Elemente nebeneinander dargestellt werden, kann das „table“-Element zur gleichmäßigen Anordnung der Elemente verwendet werden.

Beispiel 6 – ohne Tabellenelement

HTML-Datei:

Ergebnis im Browser:

Beispiel 7 – mit Tabellenelement

HTML-Datei:

Ergebnis im Browser:

Abschlussübung

Folgende Webseite soll als Abschlussübung erstellt werden:

Dabei sollen folgende Bedingungen erfüllt werden:

  • Die Formular-Elemente sollen mit Hilfe eines Tabellen-Elements angeordnet werden
  • Die Anrede soll mit einer Auswahlliste realisiert werden, welche die Listenelemente „Frau“ und „Herr“ enthält
  • Wird der Absende-Button angeklickt, erscheint eine Sendebestätigung

Wenn du die Seite erstellt hast, kannst du dir die Lösung mit folgenden Links herunterladen:

Download
Formularelemente16.html
HTML Dokument 1.0 KB
Download
Sendebestätigung.html
HTML Dokument 216 Bytes

Quellen