Wie man ein Radio-Button in einem HTML5-Formular erstellen

Um Radio-Buttons auf Ihrer HTML5 Web-Seite, hilft es zu wissen, was sie sind und wie sie verwendet werden. An der Oberfläche scheinen Radiobuttons viel wie Kontrollkästchen, aber sie unterscheiden sich in einer Reihe von wichtigen Punkten:

  • Radiobuttons treten nur in Gruppen. Sie können ein Kontrollkästchen in einem Formular, aber Radio-Buttons machen nur dann Sinn, wenn sie in Gruppen angeordnet.

  • Es kann nur ein Element ausgewählt werden. ein Optionsfeld Auswahl wählt die anderen. Es ist wie ein Autoradio, in dem eine der Preset-Tasten klicken, die anderen abgewählt. (Es ist wirklich wie die alten Autoradios, wo, wenn Sie die Taste für die ausgewählte Station physisch geschoben wurde in die anderen Tasten herausspringen würde. Obwohl diese Art von Radio ist längst vorbei, der Name lebt weiter.)

  • Das Ich würde jeder Optionsfeld ist einzigartig. Jeder Ich würde auf einer Webseite muss eindeutig sein, und die Ich würde Elemente der einzelnen Radiobutton diese Regeln befolgen.

  • Jedes Funkelement hat auch eine Name Attribut. Das Name Attribut wird verwendet, um die gesamte angeben Gruppe von Radio-Objekten.

  • Alle Radio-Buttons in einer Gruppe haben den gleichen Namen. HTML verwendet die Name um herauszufinden Attribut welcher Gruppe ein Optionsfeld in ist, und um sicherzustellen, dass nur eine Taste in einer Gruppe ausgewählt ist.

Diese Abbildung zeigt eine Form einer Gruppe von Radiobuttons für die Wahl Small, Medium enthält, oder Groß:

bild0.jpg

Wenden Sie den folgenden Code um das Setup für eine Web-Seite mit den Tasten zu sehen:

formDemo.html

Formular Demo

Um eine Gruppe von Optionsfeldern bauen, gehen Sie folgendermaßen vor:

  1. Beginnen Sie damit, eine Schaffung Eingang Element als grundlegende Basis zu dienen.

  2. Stellen Sie den Art nach Radio.

  3. Geben Sie jedem Radiobutton eine einzigartige Ich würde.

  4. Verwenden Sie die Name Attribut alle Tasten in einer Gruppe zu identifizieren.

  5. Betrachten wir als auch visuelle Gruppierung.

    Der Benutzer kann nicht sagen, welche Tasten Teil einer Gruppe, die durch die HTML-Formatierung sind allein. Sie können Fieldset oder andere Formatierungen Tricks der Benutzer zu helfen wissen, welche Tasten sind in die Gruppe. Alle Tasten in einer Gruppe sollte in der Nähe von einander physisch sein.

  6. Stellen Sie eine der Tasten geprüft (ausgewählt) standardmäßig aktiviert.

    Tragen Sie die checked = "geprüft" Attribut (von der Abteilung der Redundanz-Abteilung zur Verfügung gestellt), um eines der Elemente, so dass es ausgecheckt wird gestartet.

    Wenn Sie Radioknopf nicht ein vorgewählt werden, alle Programme zu Ihrem Formular beigefügt werden verwirrt.

Menü