Mam następujący kod HTML:
<select name="forma">
<option value="Home">Home</option>
<option value="Contact">Contact</option>
<option value="Sitemap">Sitemap</option>
</select>
Jak ustawić wartości Strona główna , Kontakt i Mapa witryny jako łącza? Użyłem następującego kodu i zgodnie z oczekiwaniami nie zadziałał:
<select name="forma">
<option value="Home"><a href="home.php">Home</a></option>
<option value="Contact"><a href="contact.php">Contact</a></option>
<option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>
Odpowiedzi:
AKTUALIZACJA (listopad 2015): W dzisiejszych czasach, jeśli chcesz mieć menu rozwijane, istnieje wiele prawdopodobnie lepszych sposobów na jego wdrożenie. Ta odpowiedź jest bezpośrednią odpowiedzią na bezpośrednie pytanie, ale nie zalecam tej metody w przypadku publicznych witryn internetowych.
AKTUALIZACJA (maj 2020): Ktoś zapytał w komentarzach, dlaczego nie polecałbym tego rozwiązania. Myślę, że to kwestia semantyki. Wolałbym, aby moi użytkownicy nawigowali za pomocą
<a>
i pozostawali<select>
do wybierania formularzy, ponieważ elementy HTML mają spotkania semantyczne i mają cel,anchors
zabierają cię w miejsca,<select>
służą do wybierania rzeczy z list.Zastanów się, czy przeglądasz stronę w nietradycyjnej przeglądarce (przeglądarka niegraficzna lub czytnik ekranu, strona jest dostępna programowo lub JavaScript jest wyłączony), jakie
<select>
masz „znaczenie” lub „zamiar” tego używany do nawigacji? Mówi „proszę wybrać nazwę strony” i niewiele więcej, a na pewno nic o nawigacji. Prosta odpowiedź na to jest taka,well i know that my users will be using IE or whatever so shrug
że taki rodzaj pomija znaczenie semantyczne.Podczas gdy funky rozwijany element interfejsu użytkownika utworzony z odpowiednich elementów układu (i niektórych js) zawierający pewne zwykłe kotwice nadal zachowuje swoją intencję, nawet jeśli element układu zostanie utracony, „to jest kilka linków, wybierz jeden i będziemy tam nawigować” .
Oto artykuł na temat nadużyć i nadużyć
<select>
.źródło
<option value="#anchor_on_my_site">...</option>
celu utworzenia linku do kotwicy!location = this.value;
Nie możesz używać tagów href z tagami opcji. Aby to zrobić, będziesz potrzebować JavaScript.
źródło
Zamiast tego użyj prawdziwego menu rozwijanego: listy (
ul
,li
) i linków. Nigdy nie nadużywaj elementów formularza jako linków.Czytelnicy korzystający z czytników ekranu zwykle przeglądają wygenerowaną automagicznie listę linków - przegapią te ważne informacje. Wiele systemów nawigacji z klawiaturą (np. JAWS, Opera) oferuje różne skróty klawiaturowe dla łączy i elementów formularzy.
Jeśli nadal nie możesz porzucić pomysłu
select
, nie używajonchange
przynajmniej programu obsługi. Jest to prawdziwy ból dla użytkowników klawiatury, ponieważ trzeci element jest prawie niedostępny.źródło
Przyjęte rozwiązanie wygląda dobrze, ale jest jeden przypadek, z którym nie może sobie poradzić:
Zdarzenie „onchange” nie zostanie wyzwolone po ponownym wybraniu tej samej opcji. Tak więc wymyśliłem następujące ulepszenie:
HTML
jQuery
źródło
<option value=""> </option>
(Nie mam wystarczającej reputacji, aby skomentować odpowiedź toscho).
Nie mam doświadczenia z czytnikami ekranu i jestem pewien, że Twoje punkty są ważne.
Jednak jeśli chodzi o używanie klawiatury do manipulowania zaznaczeniami, wybranie dowolnej opcji za pomocą klawiatury jest trywialne:
TAB do kontrolki
SPACJA, aby otworzyć listę wyboru
Strzałki W GÓRĘ lub W DÓŁ służą do przewijania do żądanej pozycji listy
ENTER, aby wybrać żądaną pozycję
Dopiero po naciśnięciu klawisza ENTER zostanie uruchomione zdarzenie onchange lub (JQuery .change ()).
Chociaż osobiście nie użyłbym kontrolki formularza do prostych menu, istnieje wiele aplikacji internetowych, które używają kontrolek formularzy do zmiany prezentacji strony (np. Porządek sortowania). Mogą one zostać zaimplementowane przez AJAX, aby załadować nową zawartość do strony lub, w starszych implementacjach, przez wyzwalanie wczytywania nowej strony, co jest zasadniczo linkiem do strony.
IMHO to są prawidłowe zastosowania kontrolki formularza.
źródło
<select>
Tag tworzy listę rozwijaną. Nie możesz umieszczać linków HTML w menu rozwijanym.Istnieją jednak biblioteki JavaScript, które zapewniają podobną funkcjonalność. Oto jeden przykład: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
źródło
źródło
Wypróbuj ten kod
źródło