So überprüfen Sie Optionsfelder auf einer Webseite

Das Einrichten und Überprüfen von Optionsfeldern scheint das Formularfeld zu sein, das vielen Webmastern die größte Schwierigkeit beim Einrichten bereitet. Tatsächlich ist das Einrichten dieser Felder das einfachste Formularfeld, das überprüft werden kann, wenn Optionsfelder einen Wert festlegen, der nur beim Senden des Formulars getestet werden muss.

Die Schwierigkeit bei Optionsfeldern besteht darin, dass mindestens zwei und in der Regel mehr Felder in das Formular eingefügt, miteinander verknüpft und als eine Gruppe getestet werden müssen. Vorausgesetzt, Sie verwenden die richtigen Benennungskonventionen und das richtige Layout für Ihre Schaltflächen, werden Sie keine Probleme haben.

Richten Sie die Optionsfeldgruppe ein

Bei der Verwendung von Optionsfeldern in unserem Formular ist zunächst zu beachten, wie die Schaltflächen codiert werden müssen, damit sie ordnungsgemäß als Optionsfelder funktionieren. Das gewünschte Verhalten ist, dass immer nur eine Schaltfläche ausgewählt ist. Wenn eine Schaltfläche ausgewählt ist, wird die Auswahl einer zuvor ausgewählten Schaltfläche automatisch aufgehoben.

Die Lösung besteht darin, allen Optionsfeldern in der Gruppe den gleichen Namen, aber unterschiedliche Werte zu geben. Hier ist der Code, der für das Optionsfeld selbst verwendet wird.

Das Erstellen mehrerer Gruppen von Optionsfeldern für ein Formular ist ebenfalls unkompliziert. Sie müssen lediglich die zweite Gruppe von Optionsfeldern mit einem anderen Namen versehen als die erste Gruppe.

Das Namensfeld bestimmt, zu welcher Gruppe eine bestimmte Schaltfläche gehört. Der Wert, der bei der Übermittlung des Formulars für eine bestimmte Gruppe übergeben wird, entspricht dem Wert der Schaltfläche in der Gruppe, die zum Zeitpunkt der Übermittlung des Formulars ausgewählt wurde.

Beschreiben Sie die einzelnen Schaltflächen

Damit die Person, die das Formular ausfüllt, versteht, was die einzelnen Optionsfelder in unserer Gruppe tun, müssen Beschreibungen für die einzelnen Schaltflächen angegeben werden. Der einfachste Weg, dies zu tun, besteht darin, eine Beschreibung als Text unmittelbar nach der Schaltfläche anzugeben.

Es gibt jedoch einige Probleme mit der Verwendung von einfachem Text:

1. Der Text kann visuell mit dem Optionsfeld verknüpft sein, für einige Benutzer von Bildschirmleseprogrammen ist dies jedoch möglicherweise nicht klar. 
2. In den meisten Benutzeroberflächen, in denen Optionsfelder verwendet werden, kann auf den der Schaltfläche zugeordneten Text geklickt werden und das zugehörige Optionsfeld ausgewählt werden. In unserem Fall funktioniert der Text nicht auf diese Weise, es sei denn, der Text ist speziell mit der Schaltfläche verknüpft.

Verknüpfen von Text mit einem Optionsfeld

Um den Text mit dem entsprechenden Optionsfeld zu verknüpfen, sodass durch Klicken auf den Text diese Schaltfläche ausgewählt wird, müssen Sie den Code für jede Schaltfläche weiter ergänzen, indem Sie die gesamte Schaltfläche und den zugehörigen Text in einer Beschriftung einschließen.

So würde der vollständige HTML-Code für eine der Schaltflächen aussehen:

 Knopf eins

Als Optionsfeld mit dem in der angegebenen ID-Namen zum Der Parameter des label-Tags ist tatsächlich im Tag selbst enthalten, dem zum und Ich würde Parameter sind in einigen Browsern redundant. Ihre Browser sind jedoch oft nicht schlau genug, um die Verschachtelung zu erkennen. Es lohnt sich daher, sie einzusetzen, um die Anzahl der Browser zu maximieren, in denen der Code funktioniert.

Damit ist die Codierung der Optionsfelder selbst abgeschlossen. Der letzte Schritt besteht darin, die Überprüfung der Optionsschaltflächen mit JavaScript einzurichten.