HTML lernen (3): Formulare einbinden

Radiobuttons

∅ 3.2 / 5 Bewertungen

Radiobuttons

Auf dieser Seite

<input type="radio"> definiert einen Radiobutton.

Gültige Attribute

Radiobuttons sind ähnlich aufgebaut wie die Checkbuttons. Der Unterschied besteht darin, dass aus einer Gruppe von Radiobuttons nur ein Element ausgewählt werden kann, ähnlich den Stationstasten bei einem Radio. Eine Mehrfachauswahl ist nicht möglich.

Folgende Attribute stehen zur Verfügung:

  • type="radio"

    Definiert als Feldtyp einen Radiobutton.

  • name="computer"

    Weist dem Radiobutton einen Variablennamen zu. Es sind nur Buchstaben und Zahlen erlaubt, weder Leerzeichen noch Sonderzeichen dürfen verwendet werden. Bei einer Gruppe muss allen Radiobuttons der gleiche name zugewiesen werden.

  • value="cd"

    Ist ein Element ausgewählt, wird bei der Übertragung des Formulars der value-Wert übertragen. Ist das Element nicht ausgewählt, wird es bei der Übertragung übergegangen.

  • checked

    Diese Angabe ist optional. Ist das Attribut gesetzt, wählt der Browser das Element automatisch aus. Es wird zurückgesetzt, wenn der Benutzer einen anderen Radiobutton der gleichen Gruppe anklickt.

Beispiel: Radiobuttons

Klicken Sie hierAnzeigen, und sehen Sie eine Gruppe von Radiobuttons. Da es sich um eine Gruppe handelt, wird allen Radiobuttons im HTML-Code (siehe unten) der gleiche Name zugewiesen. Auch in diesem Beispiel ist wieder das erste Element voreingestellt. Das wird durch das eingesetzte Attribut checked erreicht.

Der HTML-Code sieht folgendermaßen aus:

<p><b>Welcher HTML-Editor gefällt Ihnen am besten?</b></p>

<form method="POST">
  <p><input type="radio" checked name="editor" value="homesite">Homesite</p>
  <p><input type="radio" name="editor" value="webedit">Webedit </p>
  <p><input type="radio" name="editor" value="frontpage">FrontPage</p>
  <p><input type="radio" name="editor" value="keiner">keiner</p>
</form>

Der dargestellte HTML-Code zeigt wieder den relevanten Teil des Beispiels, auf die Darstellung der Ihnen schon bekannten Tags wie <head>, <body>, <title> usw. haben wir verzichtet.