2008年7月11日(金) 16時00分00秒 [Web関連]

都道府県名選択フォームのサンプルHTML

都道府県名を選択するプルダウンメニューを作る際に、毎回すべての都道府県名を打ってチマチマとoption要素を47個も記述するのが面倒なので、以下に都道府県名選択フォームのサンプルHTMLを掲載しておきます。
都道府県名選択フォームを作りたいときには、以下のソースをコピーすれば簡単です。(^_^;;;

下記のサンプルソースにあるselect要素に含まれているoption要素の数は全部で47個です。「1都・1道・2府・43県」で合計47都道府県だから、抜けはないでしょう。(^_^;;; 一応、北海道から沖縄県まで「北から南」へ並んでいると思いますが、地方の境界あたりでは違うところもあります。順序は好きなように並べ替えて使って下さい。

▼HTMLソース

select要素のname属性値はどちらも「prefecture」になっています。各option要素のvalue属性値は、都道府県名が日本語(漢字)でそのまま入っているソースと、英字で入っているソースを用意しました。基本的には前者の漢字ソースが便利だと思いますが、多バイト文字を送信すると文字化けしちゃうようなシステムなら(^_^;)後者のアルファベット名称(ローマ字表記)版ソースを使えば良いでしょう。これらの英字表記は、もしかしたら地方自治体の公式表記とは異なるかも知れませんので注意して下さい。

▼表示例

このHTMLソースを表示すると、以下のような都道府県リストのプルダウンメニューになります。

上記の表示例だと、先頭の「北海道」が最初から表示(選択)されているはずです。

▼備考

デフォルトで特定の都道府県名を選択状態にしておきたいなら、該当する都道府県項目を作っているoptionタグに「selected」と追記しておきます。もしXHTMLで記述している場合は「selected="selected"」のように属性名を省略せずに書く必要があります。

また、デフォルトでは何も選択させたくない場合や、未回答でも構わない場合には、例えば次のソースのようなダミー項目を先頭にでも加えておけば良いでしょう。

未選択状態のまま送信されると困る場合には、無回答項目(ダミー項目)は用意しない方がいいかも知れません。とはいえ、先頭にダミー項目を用意しない場合は、ユーザが項目の選択を忘れて「北海道」の選択状態のままで誤送信してしまう可能性もありますが。(^_^;)

誤送信を防ぎたい場合は、JavaScriptを使って入力チェックを施しておくのが良いかもしれません。その方法はAll Aboutで記事にしていますので記事「フォームの入力内容をリアルタイムにチェックする方法」をぜひご参照下さい。