Jak sprawdzić poprawność przycisków radiowych na stronie internetowej
Zdefiniuj grupy przycisków opcji, skojarz tekst i zatwierdź wybór
Konfiguracja i walidacjaprzyciski radiowewydaje się byćpole formularzaco sprawia wielu webmasterom najwięcej trudności w konfiguracji. W rzeczywistości konfiguracja tych pól jest najprostsza ze wszystkich pól formularza do walidacji, ponieważ przyciski opcji ustawiają jedną wartość, którą należy przetestować tylko podczas przesyłania formularza.
Trudność z przyciskami opcji polega na tym, że w formularzu należy umieścić co najmniej dwa, a zwykle więcej pól, powiązane ze sobą i przetestowane jako jedna grupa. Pod warunkiem, że użyjesz poprawnych konwencji nazewnictwa i układu przycisków, nie będziesz miał żadnych problemów.
Skonfiguruj grupę przycisków radiowych
Pierwszą rzeczą, na którą należy zwrócić uwagę podczas używania przycisków radiowych w naszym formularzu, jest to, jak przyciski muszą być zakodowane, aby działały prawidłowo jako przyciski radiowe. Pożądanym zachowaniem, które chcemy, jest wybranie tylko jednego przycisku naraz; po wybraniu jednego przycisku dowolny wcześniej wybrany przycisk zostanie automatycznie odznaczony.
Rozwiązaniem jest nadanie wszystkim przyciskom opcji w grupie tej samej nazwy, ale różnych wartości. Oto kod użyty dla samego przycisku radiowego.
|_+_|Tworzenie wielu grup przycisków radiowych dla jednego formularza jest również proste. Wszystko, co musisz zrobić, to nadanie drugiej grupie przycisków opcji innej nazwy niż ta używana dla pierwszej grupy.
Pole nazwy określa, do której grupy należy dany przycisk. Wartość, która zostanie przekazana dla określonej grupy podczas przesyłania formularza, będzie wartością przycisku w grupie, która jest wybrana w momencie przesyłania formularza.
Opisz każdy przycisk
Aby osoba wypełniająca formularz zrozumiała, co robi każdy przycisk radiowy w naszej grupie, musimy podać opis każdego przycisku. Najprostszym sposobem, aby to zrobić, jest podanie opisu w postaci tekstu bezpośrednio po przycisku.
Istnieje jednak kilka problemów z samym używaniem zwykłego tekstu:
- Tekst może być wizualnie powiązany z przyciskiem opcji, ale może być niejasny dla na przykład dla niektórych użytkowników czytników ekranu.
- W większości interfejsy użytkownika za pomocą przycisków opcji tekst skojarzony z przyciskiem można kliknąć i można wybrać skojarzony z nim przycisk opcji. W naszym przypadku tekst nie będzie działał w ten sposób, chyba że tekst jest konkretnie powiązany z przyciskiem.
Kojarzenie tekstu z przyciskiem radiowym
Aby powiązać tekst z odpowiadającym mu przyciskiem radiowym, tak aby kliknięcie tekstu powodowało zaznaczenie tego przycisku, musimy dodać kolejny dodatek do kodu dla każdego przycisku, otaczając cały przycisk i powiązany z nim tekst w etykiecie.
Oto jak wyglądałby kompletny kod HTML jednego z przycisków:
|_+_|Jako przycisk radiowy z nazwą identyfikatora, o której mowa w dla parametr tagu etykiety jest w rzeczywistości zawarty w samym tagu, dla oraz ID parametry są zbędne w niektórych przeglądarkach. Jednak ich przeglądarki często nie są wystarczająco inteligentne, aby rozpoznać zagnieżdżenie, dlatego warto je wstawić, aby zmaksymalizować liczbę przeglądarek, w których będzie działał kod.
To kończy kodowanie samych przycisków radiowych. Ostatnim krokiem jest skonfigurowanie walidacji przycisku radiowego za pomocą JavaScript .
Konfiguracja weryfikacji przycisku radiowego
Walidacja grup przycisków radiowych może nie być oczywista, ale jest prosta, gdy wiesz, jak to zrobić.
Poniższa funkcja potwierdzi, że jeden z przycisków opcji w grupie został wybrany:
|_+_|Aby użyć powyższej funkcji, wywołaj ją z procedury sprawdzania poprawności formularza i przekaż jej nazwę grupy przycisków opcji. Zwróci wartość przycisku w wybranej grupie lub zwróci wartość pustą, jeśli żaden przycisk w grupie nie jest zaznaczony.
Na przykład, oto kod, który wykona walidację przycisku radiowego:
|_+_|Ten kod został włączony do funkcji wywoływanej przez an na kliknięcie zdarzenie dołączone do przycisku Zatwierdź (lub prześlij) w formularzu.
Odwołanie do całego formularza zostało przekazane jako parametr do funkcji, która używa argumentu „forma” do odwoływania się do kompletnego formularza. Aby sprawdzić poprawność grupy przycisków opcji o nazwie group1, przekazujemy form.group1 do funkcji valButton.
Wszystkie grupy przycisków radiowych, których kiedykolwiek będziesz potrzebować, można obsłużyć za pomocą kroków opisanych powyżej.