px*blog | お問い合わせ住所欄のソースメモ

お問い合わせ住所欄のソースメモ

ご住所	〒 -

よくあるこういう↑の。都道府県のところに注目。（グループ化されてるプルダウン）

optgroupタグを使うとグループ化できるわけです。
・IEの装飾がイマイチだったり、（例：イタリックをノーマルにできない）
・MacのIEだとoptgroupのlabel属性（この例でいうと地方名の部分）が表示されなかったり…
と、少し不満は残るのですが、いずれにしても、機能的に使えなくなるブラウザがあるわけではないし、多くのユーザーが便利になり使いやすくなるはずなわけですから、私はおすすめと思っています。 MacIEも、ちゃんと都道府県は選べるわけで。

お問い合わせフォームなどでよく使いそうなので、下の↓ソースでは、tableタグ抜きにして、tr～/trまでコピペできるようにしてみました。
良かったらどうぞ。

<tr>
      <th>ご住所</th>
      <td>〒
        <input name="郵便番号上3桁" type="text" size="3" maxlength="3" />
        -
  <input name="郵便番号下4桁" type="text" size="4" maxlength="4" />
  <br />
  <select name="都道府県" class="selectmenu">
    <option value="" selected="selected">&raquo; 都道府県</option>
	<optgroup label="北海道・東北">
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    <option value="秋田県">秋田県</option>
    <option value="岩手県">岩手県</option>
    <option value="宮城県">宮城県</option>
    <option value="山形県">山形県</option>
    <option value="福島県">福島県</option>
	</optgroup>
	<optgroup label="北陸・甲信越">
    <option value="新潟県">新潟県</option>
    <option value="山梨県">山梨県</option>
    <option value="長野県">長野県</option>
    <option value="富山県">富山県</option>
    <option value="石川県">石川県</option>
    <option value="福井県">福井県</option>
	</optgroup>
	<optgroup label="関東">
    <option value="茨城県">茨城県</option>
    <option value="栃木県">栃木県</option>
    <option value="群馬県">群馬県</option>
    <option value="埼玉県">埼玉県</option>
    <option value="千葉県">千葉県</option>
    <option value="東京都">東京都</option>
    <option value="神奈川県">神奈川県</option>
	</optgroup>
	<optgroup label="東海">
    <option value="岐阜県">岐阜県</option>
    <option value="静岡県">静岡県</option>
    <option value="愛知県">愛知県</option>
    <option value="三重県">三重県</option>
	</optgroup>
	<optgroup label="関西">
    <option value="滋賀県">滋賀県</option>
    <option value="京都府">京都府</option>
    <option value="大阪府">大阪府</option>
    <option value="兵庫県">兵庫県</option>
    <option value="奈良県">奈良県</option>
    <option value="和歌山県">和歌山県</option>
	</optgroup>
	<optgroup label="中国・四国">
    <option value="鳥取県">鳥取県</option>
    <option value="島根県">島根県</option>
    <option value="岡山県">岡山県</option>
    <option value="広島県">広島県</option>
    <option value="山口県">山口県</option>
    <option value="徳島県">徳島県</option>
    <option value="香川県">香川県</option>
    <option value="愛媛県">愛媛県</option>
    <option value="高知県">高知県</option>
	</optgroup>
	<optgroup label="九州・沖縄">
    <option value="福岡県">福岡県</option>
    <option value="佐賀県">佐賀県</option>
    <option value="長崎県">長崎県</option>
    <option value="熊本県">熊本県</option>
    <option value="大分県">大分県</option>
    <option value="宮崎県">宮崎県</option>
    <option value="鹿児島県">鹿児島県</option>
    <option value="沖縄県">沖縄県</option>
	</optgroup>
  </select>
  <br />
  <input name="Address" type="text" size="45" /></td>
    </tr>

Comments

seo services vancouver | 2012/03/02 06:44 PM: I want to say that you really helped me to understand the subject of px*blog | お問い合わせ住所欄のソースメモ

web design vancouver | 2012/03/02 04:28 PM: I appreciate all the effort you put into writing this post about px*blog | お問い合わせ住所欄のソースメモ . I will post a backlink back to your blog on my website as I think some of my clients might find it interesting.

web development vancouver | 2012/02/26 10:17 PM: px*blog | お問い合わせ住所欄のソースメモ Is what I was looking for. Thank you for the information.

Trackbacks

Trackback URL：

Permalink URL：

Categories

photo (14) 1244045226
- snap (1) 1204457393
- lunch (2) 1239882124
coding (108) 1242106372
- googlemap (1) 1267148340
- jquery (4) 1269951521
- javascript (24) 1277447366
- Dreamweaver (19) 1276070207
- html/xhtml (26) 1275641882
- css (32) 1275616581
blog (96) 1223955507
- blog parts (3) 1225976170
- movable type (28) 1276680387
- serene bach (44) 1259751612
browser (23) 1274769072
useful (47) 1271380069
- php (2) 1278073670
- troubleshooting (8) 1276753582
- cgi (1) 1154237456
- ショートカット (5) 1247118119
web (25) 1248440274
できごと (4) 1279270870
ひとりごと (18) 1254270949

px*blog | お問い合わせ住所欄のソースメモ

Comments

Post

Trackbacks