Erstellen eines Optionsfelds in einem HTML5-Formular - dummies

Wenn Sie Optionsfelder auf Ihrer HTML5-Webseite einfügen, können Sie erkennen, was diese sind und wie Sie diese verwenden können. Auf der Oberfläche ähneln Radiobuttons in etwa den Checkboxen, unterscheiden sich jedoch in einigen wichtigen Punkten:

• Optionsfelder treten nur in Gruppen auf. Sie können ein Kontrollkästchen in einem Formular haben, aber Optionsfelder sind nur sinnvoll, wenn sie in Gruppen angeordnet sind.

• Es kann nur ein Element ausgewählt werden. Wenn Sie eine Optionsschaltfläche auswählen, wird die Auswahl der anderen aufgehoben. Es ist wie bei einem Autoradio, bei dem durch Klicken auf eine der voreingestellten Schaltflächen die anderen deaktiviert werden. (Es ist wirklich wie in den alten Autoradios, wo, wenn der Knopf für die gewählte Station physisch hineingedrückt wurde, die anderen Tasten herausspringen würden. Obwohl diese Art von Radio längst weg ist, lebt der Name weiter.)

• Die ID jeder Optionsschaltfläche ist eindeutig. Jede ID auf einer Webseite muss eindeutig sein und die ID-Elemente jeder Optionsschaltfläche müssen diesen Regeln entsprechen.

• Jedes Funkelement hat auch ein Name Attribut. Mit dem Attribut name wird die gesamte -Gruppe von Radio-Objekten angegeben.

• Alle Optionsfelder einer Gruppe haben den gleichen Namen. HTML verwendet das name-Attribut, um herauszufinden, in welcher Gruppe sich ein Optionsfeld befindet, und um sicherzustellen, dass nur eine Schaltfläche in einer Gruppe ausgewählt ist.

Diese Abbildung zeigt ein Formular, das eine Gruppe von Optionsfeldern für die Auswahl von Klein, Mittel oder Groß enthält:

Schlagen Sie im folgenden Code nach, um die Einrichtung für eine Webseite mit Schaltflächen zu sehen:

formDemo. html

Formular-Demo
Elemente auswählen
Optionsfelder klein mittel groß

Gehen Sie folgendermaßen vor, um eine Gruppe von Optionsfeldern zu erstellen:

1. Beginnen Sie damit, ein input -Element zu erstellen, das als Basis dient.

2. Stellen Sie den Typ auf Radio .

3. Geben Sie jedem Optionsfeld eine eindeutige ID .

4. Verwenden Sie das Namensattribut , um alle Schaltflächen in einer Gruppe zu identifizieren.

5. Betrachten Sie auch die visuelle Gruppierung.

   Der Benutzer kann nicht anhand der HTML-Formatierung erkennen, welche Schaltflächen Teil einer Gruppe sind. Mithilfe von Feldsätzen oder anderen Tricks zur Formatierung können Sie erkennen, welche Schaltflächen sich in welcher Gruppe befinden. Alle Tasten in einer Gruppe sollten sich physisch nahe beieinander befinden.

6. Stellen Sie eine der Schaltflächen standardmäßig aktiviert (ausgewählt) ein.

   Wenden Sie das checked = "checked" -Attribut (das von der Abteilung für Redundanzabteilung bereitgestellt wird) auf eines der Elemente an, damit es gestartet wird.

   Wenn Sie keinen Optionsschalter vorwählen, werden alle Programme, die mit Ihrem Formular verknüpft sind, verwirrt.