1. ホーム
  2. html

[解決済み] <option> タグの中で href リンクを使用する

2022-04-23 04:35:39

質問

以下のようなHTMLコードを持っています。

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

を作るにはどうしたらいいのでしょうか? ホーム , お問い合わせ先 サイトマップ の値をリンクにするのですか? 以下のコードを使ってみたのですが、案の定うまくいきませんでした。

<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>

どのように解決するのですか?

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

UPDATE(2015年11月)。 今の時代、ドロップメニューが欲しいなら、間違いなくたくさんある より良い方法で実装することができます。 この回答は直接的な質問に対する回答ですが、私は一般向けのWebサイトではこの方法を提唱していません。

UPDATE(2020年5月)。 コメントで、なぜ私がこの解決策を提唱しないのかと質問された方がいます。それは、セマンティックスの問題だと思います。私は、ユーザーが <a> とし <select> というのも、HTML要素には意味的な出会いがあり、目的があるからです。 anchors を移動させる。 <select> は、リストから何かを選び出すためのものです。

もしあなたが非伝統的なブラウザ(非グラフィカルブラウザやスクリーンリーダー、プログラムによるページへのアクセス、JavaScriptの無効化)でページを見ているとしたら、次のような意味や意図があるでしょうか。 <select> ナビゲーションに使用したのは?これは、「ページ名を選んでください」と言っているのであって、それ以外のこと、つまりナビゲーションに関することは何も言っていません。これに対する簡単な回答は well i know that my users will be using IE or whatever so shrug しかし、これでは、意味的な重要性を見失ってしまいます。

一方、適切なレイアウト要素(といくつかのjs)で構成されたファンキーなドロップダウンUI要素には、通常のアンカーがいくつか含まれており、レイアウト要素が失われたとしても、その意図は維持されます:「これらはたくさんのリンクです、1つを選択すればそこに移動します"。

に関する記事を紹介します。 の誤用と濫用は <select> .