[携帯]フォームで使うパーツまとめ

携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるというか心が折れるというか眠くなるというか。
そんなフォームページを簡単にやっつけるべく、コピペでペタペタはっていけるようにまとめてみました。

フォームサンプル画面
こんなフォームページがちょちょいのちょいと。

Dreamweaverなどを使っている場合はスニペットに登録しておくとかなり作業効率がアップしますよ？
ただ、Dreamweaverを使わずに秀丸とかでコーディングする時もあるので、そういう時の自分の為に。

メニュー

さくっとコピペできるように、html用とxhtml用で分けています。

・html用のフォームパーツ
・xhtml用のフォームパーツ

数字とか値は適当に入っているので、コピペしたら直してくださいませ。

html用のフォームパーツ

基本パーツ

formタグ
<form action="#" method="post">

</form>
一行テキスト
<input type="text" value="" size="27">
プルダウン
<select name="hoge">
<option selected> </option>
<option value="hoge1">サンプル</option>
<option value="hoge2">サンプル</option>
</select>
ラジオボタン
hoge<input type="radio" value="hoge1" name="hoge"> hoge<input type="radio" value="hoge2" name="hoge">
チェックボックス
hoge<input type="checkbox" value="hoge1" name="hoge"> hoge<input type="checkbox" value="hoge2" name="hoge">
テキストボックス
<textarea name="hoge" cols="27" rows="5">
だみーです。
</textarea>
ボタン
<input type="submit" value="ボタン">

割とそのまま使えるパーツ

名前
お名前<br>
<input type="text" value="" size="27" name="name">

姓<br>
<input type="text" value="" size="27" name="sei">

名<br>
<input type="text" value="" size="27" name="mei">

姓(カナ)<br>
<input type="text" value="" size="27" name="sei">

名(カナ)<br>
<input type="text" value="" size="27" name="mei">
住所
〒<input type="text" value="" size="4" name="postcode1">-<input type="text" value="" size="6" name="postcode2"><br>
住所<br>
<input type="text" value="" size="27" name="address">

都道府県<br>
<select name="都道府県">
	<option selected> </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>
	<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>
	<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>
	<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>
	<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>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</select>
生年月日
生年月日<br>
<input type="text" value="" size="5" name="year"> 年 <input type="text" value="" size="3" name="month"> 月 <input type="text" value="" size="3" name="day"> 日

生年月日<br>
<select name="year">
<option selected> </option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>年

<select name="month">
<option selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>月

<select name="day">
<option selected> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>日
性別
性別<br>
女<input type="radio" value="woman" name="sex"> 男<input type="radio" value="man" name="sex">
同意規約
同意規約<br>
<input type="checkbox" value="yes" name="agreement"> 同意する
ボタン
<input type="submit" value="確認する">

<input type="submit" value="確認画面へ">

<input type="submit" value="送信">

<input type="reset" value="リセットする">

xhtml用のフォームパーツ

基本パーツ

formタグ
<form action="#" method="post">

</form>
一行テキスト
<input type="text" value="" style="width:95%;" size="27" name="hoge" />
プルダウン
<select name="hoge">
<option selected="selected"> </option>
<option value="hoge1">サンプル</option>
<option value="hoge2">サンプル</option>
</select>
ラジオボタン
hoge<input type="radio" value="hoge1" name="hoge" /> hoge<input type="radio" value="hoge2" name="hoge" />
チェックボックス
hoge<input type="checkbox" value="hoge1" name="hoge" /> hoge<input type="checkbox" value="hoge2" name="hoge" />
テキストボックス
<textarea name="hoge" cols="27" rows="5">
だみーです。
</textarea>
ボタン
<input type="submit" value="ボタン" />

割とそのまま使えるパーツ

名前
お名前<br />
<input type="text" value="" style="width:95%;" size="27" name="name" />
姓<br />
<input type="text" value="" style="width:95%;" size="27" name="sei" />
名<br />
<input type="text" value="" style="width:95%;" size="27" name="mei" />
姓(カナ)<br />
<input type="text" value="" style="width:95%;" size="27" name="sei" />
名(カナ)<br />
<input type="text" value="" style="width:95%;" size="27" name="mei" />
住所
〒<input type="text" value="" style="width:40px;" size="4" name="postcode1" />-<input type="text" value="" style="width:60px;" size="6" name="postcode2" /><br />
住所<br>
<input type="text" value="" style="width:95%" size="27" name="address" />

都道府県<br />
<select name="都道府県">
	<option selected="selected"> </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>
	<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>
	<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>
	<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>
	<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>
	<option value="宮崎県">宮崎県</option>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</select>
生年月日
生年月日<br />
<input type="text" value="" style="width:60px;" size="5" name="year" /> 年 <input type="text" value="" style="width:40px;" size="3" name="month" /> 月 <input type="text" value="" style="width:40px;" size="3" name="day" /> 日

生年月日<br />
<select name="year">
<option selected="selected"> </option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>年

<select name="month">
<option selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>月

<select name="day">
<option selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>日
性別
性別<br />
女<input type="radio" value="man" name="sex" /> 男<input type="radio" value="woman" name="sex" />
同意規約
同意規約<br />
<input type="checkbox" value="yes" name="agreement" /> 同意する
ボタン
<input type="submit" value="確認する" />

<input type="submit" value="確認画面へ" />

<input type="submit" value="送信" />

<input type="reset" value="リセットする" />

補足

フォームパーツは、携帯で確認する場合は必ず
<form action="" method=""></form>
で囲われていないとdocomoのiモードブラウザ1.0で表示されません。値は空でいいです。

※methodが入っていなくてもフォームパーツは表示されますが、↑のサンプルでは一応いれてます。
※このエントリーは、今後必要に応じてパーツが追加される可能性があります。

トラックバックURL

コメント

ysm 2010年4月 9日 13:15

はじめまして。

フォームのサイズ指定についてですが、

のように、widthをパーセントで表示させると、
Softbankの824P、920Pなどの機種で挙動しなくなります。

サイズはsize="xx"での
指定にしたほうがいいと思います。

よろしくお願いいたします。

sakaki0214 2010年4月 9日 14:08

softbankは端末によって挙動がちょいちょい違うので中々厄介ですね…
情報ありがとうございます。
ちょっと調べてみたいと思います。

ysm 2010年4月 9日 14:41

すみません、さきほどの件ですが、

width="80%"
だったときに問題がおきました。

style="width:80%"
では大丈夫かもしれません。

すみません、一部勘違いしていました。

sakaki0214 2010年4月 9日 14:50

わざわざ訂正ありがとうございますー安心しました。

コメントする


匿名でも本名でもなんでも。


公開されません。


ブログやホームページなどありましたら。


コメントは承認制となっております。公開までしばらくお待ちくださいませ。

サイト内検索
月別アーカイブ
カテゴリー
モバイルサイト
これからゆっくり考L：QRコード

このページのトップへ