Die Einrichtung und Validierung von Radio Knöpfe scheint das zu sein Formularfeld Das gibt vielen Webmastern die größte Schwierigkeit beim Einrichten. Tatsächlich ist die Einrichtung dieser Felder das am einfachsten zu überprüfende aller Formularfelder, da Optionsfelder einen Wert festlegen, der nur beim Senden des Formulars getestet werden muss.
Die Schwierigkeit bei Optionsfeldern besteht darin, dass mindestens zwei und normalerweise mehr Felder auf dem Formular platziert, miteinander verknüpft und als eine Gruppe getestet werden müssen. Vorausgesetzt, Sie verwenden die richtigen Namenskonventionen und das richtige Layout für Ihre Schaltflächen, haben Sie keine Probleme.
Richten Sie die Optionsfeldgruppe ein
Das erste, was Sie bei der Verwendung von Optionsfeldern in unserem Formular beachten müssen, ist, wie die Schaltflächen codiert werden müssen, damit sie ordnungsgemäß als Optionsfelder funktionieren. Das gewünschte Verhalten besteht darin, jeweils nur eine Schaltfläche auszuwählen. Wenn eine Schaltfläche ausgewählt ist, wird jede zuvor ausgewählte Schaltfläche automatisch abgewählt.
Die Lösung besteht darin, allen Optionsfeldern innerhalb 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 der zweiten Gruppe von Optionsfeldern einen anderen Namen als dem der ersten Gruppe geben.
Das Namensfeld bestimmt, zu welcher Gruppe eine bestimmte Schaltfläche gehört. Der Wert, der beim Senden des Formulars für eine bestimmte Gruppe übergeben wird, ist der Wert der Schaltfläche innerhalb der Gruppe, die zum Zeitpunkt des Absendens des Formulars ausgewählt wurde.
Beschreiben Sie jede Schaltfläche
Damit die Person, die das Formular ausfüllt, versteht, was jedes Optionsfeld in unserer Gruppe tut, müssen wir Beschreibungen für jedes Optionsfeld bereitstellen. Der einfachste Weg, dies zu tun, besteht darin, eine Beschreibung als Text unmittelbar nach der Schaltfläche bereitzustellen.
Es gibt jedoch einige Probleme bei der Verwendung von einfachem Text:
- Der Text kann visuell mit dem Optionsfeld verknüpft sein, ist jedoch für einige Benutzer, die beispielsweise Bildschirmleseprogramme verwenden, möglicherweise nicht klar.
- In den meisten Benutzeroberflächen Mithilfe von Optionsfeldern kann der mit der Schaltfläche verknüpfte Text angeklickt werden und das zugehörige Optionsfeld auswählen. In unserem Fall funktioniert der Text auf diese Weise nur, wenn der Text speziell mit der Schaltfläche verknüpft ist.
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 wir dies tun Fügen Sie den Code für jede Schaltfläche weiter hinzu, indem Sie die gesamte Schaltfläche und den zugehörigen Text in a umgeben Etikette.
So würde der vollständige HTML-Code für eine der Schaltflächen aussehen:
Als Optionsfeld mit dem ID-Namen, auf den in der 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 intelligent 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 Optionsfeldvalidierung mit einzurichten JavaScript.
Einrichten der Optionsfeldüberprüfung
Die Validierung von Gruppen von Optionsfeldern ist möglicherweise nicht offensichtlich, aber sie ist unkompliziert, sobald Sie wissen, wie.
Die folgende Funktion überprüft, ob eines der Optionsfelder in einer Gruppe ausgewählt wurde:
// Optionsfeldüberprüfung
// Copyright Stephen Chapman, 15. November 2004, 14. September 2005
// Sie können diese Funktion kopieren, aber bitte behalten Sie den Copyright-Hinweis dabei
Funktion valButton (btn) {
var cnt = -1;
für (var i = btn.length-1; i> -1; ich--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
if (cnt> -1) gibt btn [cnt] .value zurück;
sonst return null;
}
Um die obige Funktion zu verwenden, rufen Sie sie in Ihrer Formularüberprüfungsroutine auf und übergeben Sie ihr den Namen der Optionsfeldgruppe. Es wird der Wert der Schaltfläche innerhalb der ausgewählten Gruppe zurückgegeben oder ein Nullwert, wenn keine Schaltfläche in der Gruppe ausgewählt ist.
Hier ist beispielsweise der Code, der die Optionsfeldüberprüfung durchführt:
var btn = valButton (form.group1);
if (btn == null) alert ('Kein Optionsfeld ausgewählt');
sonst alert ('Button value' + btn + 'selected');
Dieser Code wurde in die von a aufgerufene Funktion aufgenommen onClick Ereignis, das an die Schaltfläche zum Bestätigen (oder Senden) im Formular angehängt ist.
Ein Verweis auf das gesamte Formular wurde als Parameter an die Funktion übergeben, die das Argument "form" verwendet, um auf das vollständige Formular zu verweisen. Um die Optionsfeldgruppe mit dem Namen group1 zu validieren, übergeben wir daher form.group1 an die Funktion valButton.
Alle Optionsfeldgruppen, die Sie jemals benötigen werden, können mit den oben beschriebenen Schritten behandelt werden.