Mehrere Radiobutton-Gruppen in HTML hinzufügen

In diesem Artikel stellen wir eine Methode vor, um mehrere Gruppen von Optionsfeldern in einem HTML-Formular hinzuzufügen.

Verwenden Sie den unterschiedlichen Wert für das Attribut name für verschiedene Gruppen von Optionsfeldern in HTML

Bei der Arbeit mit Optionsfeldern in HTML müssen Sie möglicherweise manchmal mehrere Gruppen von Optionsfeldern in einem einzigen Formular verwenden. In einem solchen Fall kann das Auswählen der Optionsschaltfläche einer Gruppe die Optionsschaltfläche der anderen Gruppe abwählen.

Um dieses Problem zu beseitigen, muss der Wert des Attributs name im Button-Element der beiden Gruppen unterschiedlich sein. Das bedeutet, dass wir für die erste Gruppe von Optionsfeldern den gleichen Wert für das Attribut name in allen Optionsfeldern verwenden sollten.

Für die zweite Gruppe sollte sich der Wert des Attributs name von der ersten Gruppe unterscheiden, aber alle Optionsfelder in der zweiten Gruppe sollten denselben Wert haben.

Wir können auch das Element fieldset verwenden, um die beiden Gruppen visuell zu trennen. Das Tag <fieldset> gruppiert die zugehörigen Elemente in HTML.

Im folgenden Beispiel erstellen wir zwei Gruppen von Optionsfeldern. In der ersten Gruppe kann der Benutzer ein Motorrad auswählen, und in der zweiten Gruppe kann er ein Auto auswählen.

Erstellen Sie beispielsweise ein Formular mit dem Tag <form>. Verwenden Sie dann das Tag <fieldset> für die Gruppe der Optionsfelder für Motorräder.

Erstellen Sie ein Optionsfeld für Honda und setzen Sie für das Attribut name den Wert motorcycle. Erstellen Sie als nächstes ein weiteres Optionsfeld für Yamaha und setzen Sie den Wert des Attributs name erneut auf motorcycle.

Erstellen Sie nach dem Schließen des <fieldset>-Tags ein weiteres fieldset-Element für Autoradio-Buttons. Erstellen Sie im Auto Optionsfelder für Hyundai und Toyota.

Setzen Sie den Wert des Attributs name für beide Schaltflächen auf car. Das Codebeispiel ist unten gezeigt.

<form>
  Select a Motorcyle
  <fieldset id="motorcyle">
    <input type="radio" value="Honda" name="motorcycle">
    <label for="Honda">Honda</label><br>
    <input type="radio" value="Yamaha" name="motorcycle">
    <label for="Yamaha">Yamaha</label><br>
  </fieldset><br>

  Select a Car
  <fieldset id="car">
    <input type="radio" value="Hyundai" name="car">
    <label for="hyundai">Hyundai</label><br>
    <input type="radio" value="Toyota" name="car">
    <label for="toyota">Toyota</label><br>
  </fieldset>
</form>

Somit können wir jedes Motorrad und Auto aus den beiden Gruppen eines Radiobuttons auswählen. Das fieldset-Element erzeugt einen Rahmen um jede Gruppe.

Auf diese Weise können wir zwei Gruppen von Optionsfeldern in einem einzigen Formular in HTML hinzufügen.