にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2017/02/11. 21:16:37.

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

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

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

▼HTMLソース

■option要素の内容とvalue属性値が共に都道府県名の日本語(漢字)になっているHTMLソース:

■option要素の内容は日本語(漢字)の都道府県名で、value属性値は英字(ローマ字表記)の都道府県名になっているHTMLソース:

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

▼表示例

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

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

▼備考

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

<option value="大阪府" selected>大阪府</option>

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

<option value="未選択" selected>(選択してね)</option>

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

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

コメント

ありがとうございます。ソース使わせていただきます。作業効率上がります。

投稿者 井田 : 2010年04月29日 22:35

井田さん、どうもです。
お役に立てたようで何よりです。都道府県のHTMLソースを毎回自力で書くのは面倒ですよね。^^;

投稿者 にしし : 2010年04月30日 22:35

ありがとうございます。
私も使わせていただきます。
ところで、
「北海道」で北海道のサイトにリンクして、検索するには
どのようなタグを付け加えたらよいのでしょうか?

投稿者 増田 : 2010年08月26日 08:26

ソース使わせていただきました。
ありがとうございました

投稿者 ななし : 2012年06月24日 19:56

たやたやたや

投稿者 あい : 2013年02月12日 13:20

コピーさせていただきました!
ありがとうございます!

投稿者 アイリス : 2013年11月23日 13:47

大変助かりました。ありがとうございます。

投稿者 KA : 2015年10月08日 17:40

コメント数: 7件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---