例-1（Script依存、マウス依存）

HTMLソース

（JavaScript - すべての例に共通）

<script type="text/javascript">
function change(myURI){
 if(myURI !="default"){
  window.document.location.href=myURI;
 }
}
</script>

（HTML）

<form name="sampleForm1" id="sampleForm1">
 <p>
  <select name="selectMenu1"  id="selectMenu1"
    onchange="change(this.form.selectMenu1.value);">
   <option value="default">選んで下さい</option>
    <option value="03data/sample1.html">ページ選択1</option>
    <option value="03data/sample2.html">ページ選択2</option>
    <option value="03data/sample3.html">ページ選択3</option>
  </select>
 </p>
</form>

• 矢印キー（↑↓）で選択項目を変更すると即他のページへ移動してしまう。
• Scriptが動作しない環境では動かない。

例-2（キーボードアクセスを可能にする[1]）

HTMLソース

<form name="sampleForm2" id="sampleForm2">
 <p>
  <select name="selectMenu2" id="selectMenu2"
   onkeypress="change(this.form.selectMenu2.value);
   return false;">
    <option value="default">項目を選んでリターンキーを
    押して下さい</option>
    <option value="03data/sample1.html">ページ選択1</option>
    <option value="03data/sample2.html">ページ選択2</option>
    <option value="03data/sample3.html">ページ選択3</option>
  </select>
 </p>
</form>

• onchangeではなくonkeypress（キーのプレス）で移動するようにした。
• あまり見なれたインターフェイスとは言い難く、説明も冗長になる。
• Scriptが動く環境でなければ動作させることはできない。

例-3（キーボードアクセスを可能にする[2]）

HTMLソース

<form name="sampleForm3" id="sampleForm3">
 <p>
  <select name="selectMenu3" id="selectMenu3">
    <option value="default">選んで下さい</option>
    <option value="03data/sample1.html">ページ選択1</option>
    <option value="03data/sample2.html">ページ選択2</option>
    <option value="03data/sample3.html">ページ選択3</option>
  </select>
  <input type="submit" name="movingBtn3"
    id="movingBtn3" value="移動"
    onclick="change(this.form.selectMenu3.value);
        return false;"
    onkeypress="change(this.form.selectMenu3.value);
        return false;" />
 </p>
</form>

• 比較的良く見かけるインターフェイス。
• onclickを指定する時はあわせてonkeypressも指定する。
• Scriptが動く環境でなければ動作させることはできない。

例-4（Scriptが動かない環境へ代替手段を提供）

HTMLソース

（追加部分のみ）

<noscript>
    <div>→<a href="03data/sampleMenu.html">
        サイトマップへ
    </a></div>
</noscript>

• Scriptが動作しない環境では、動かないコントロールが表示されたままになる。
• 「サイトマップ」へのリンクでは、等価な代替テキストとはいえない。

例-5（Scriptが動かない環境下ではメニューを隠す）

HTMLソース

（JavaScript追加部分）

<script type="text/javascript">
  document.write ("<style type='text/css'>");
  document.write ("form#sampleForm5{display:block
                   !important}");
  document.write ("</style>");
</script>

（HTML - サンプルコードの1行目のみ）

<form name="sampleForm5" id="sampleForm5" 
      style="display:none">

• display:none でフォームを予め隠しておく
• Scriptが実行可能な場合のみ form#sampleForm5{display:block !important} で表示設定を上書きする。
• 「サイトマップ」へのリンクでは、等価な代替テキストとはいえない。

例-6（Scriptが動かない環境ではcgiにリダイレクト処理させる）

HTMLソース

<form name="sampleForm6"
        id="sampleForm6"
        action="http://alfasado.net/cgi-bin/sample.cgi">
 <p>
  <select name="selectMenu6" id="selectMenu6">
   <option value="default">選んで下さい</option>
   <option value="03data/sample1.html">ページ選択1</option>
   <option value="03data/sample2.html">ページ選択2</option>
   <option value="03data/sample3.html">ページ選択3</option>
  </select>
  <input type="submit" name="movingBtn6"
    id="movingBtn6" value="移動"
   onclick="change(this.form.selectMenu6.value);return false;"
   onkeypress="change(this.form.selectMenu6.value);return false;" />
 </p>
</form>

例-7（フォームのコントロールにaccesskeyを指定）

<form name="sampleForm7" id="sampleForm7"
            action="http://alfasado.net/cgi-bin/sample.cgi">
  <p>
  ※括弧内はアクセスキー
    <select name="selectMenu7" id="selectMenu7"
          accesskey="S">
      <option value="default">選んで下さい</option>
      <option value="03data/sample1.html">ページ選択1</option>
      <option value="03data/sample2.html">ページ選択2</option>
      <option value="03data/sample3.html">ページ選択3</option>
    </select>(S) 
    <input type="submit" name="movingBtn7"
      id="movingBtn7" value="移動"
      onclick="change(this.form.selectMenu7.value);return false;"
      onkeypress="change(this.form.selectMenu7.value);return false;"
      accesskey="G" />(G)
  </p>
</form>

• accesskey属性を指定することでキーボードショートカットでのアクセスが可能になる。

Tips

• [8] プルダウンメニューの選択でページを移動させない。
• [9] Scriptを重要なコントロールに使用している場合、必ずnoscript要素で代替手段を用意する。
• [10] Scriptが動かない環境のためにcgi等で代替手段を用意する。
• [11] フォームにアクセスしやすくするためにaccesskeyを指定する。