[html5] 入力フォームのテンプレート！[縦型]

yotigory

11年前

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>

[form.js]JavaScript

// JavaScript Document

//チェックされたら開く
$(function(){
		   //ドロップパネル非表示
			$(".mod_dropform").css("display","none");
			$(".mod_form .dropitem input").attr("checked",false);
		   //チェックボックスがクリックされるとドロップダウン
			$(".mod_form .dropitem input,.mod_form .dropitem label").click(function(){
				if($(".mod_form .dropitem input").is(":checked")){
					$(".mod_dropform").slideDown("fast");
				}else{
					 $(".mod_dropform").slideUp("fast");
					}
			   })
		});


//個人情報同意確認
$(function(){
		   //送信ボタンの無効、チェックボックスを外す
			$(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			$(".mod_form_importance_btn input:checkbox").attr('checked',false);
		   //チェックボックスがクリックされると送信ボタン有効
			$(".mod_form_importance_btn label,.mod_form_importance_btn input").click(function(){
				if($(".mod_form_importance_btn input:checkbox").is(':checked')){
					$(".mod_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
				}else{
					 $(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
					}
			   })
		});

HTMl

<div class="mod_form">
<p class="point"><span class="ex_essential">[必須]</span>項目は必ずご入力ください。</p>
<form method="post" action="">
<dl>
<dt><label for="name">名前</label>&nbsp;<span class="ex_essential">[必須]</span></dt>
<dd><input type="text" id="name" value="" required="required" autofocus autocomplete="name"/></dd>

<dt><label for="kana">フリガナ</label>&nbsp;<span class="ex_essential">[必須]</span></dt>
<dd><input type="text" id="kana" value="" required="required"/></dd>

<dt id="character">性別</dt>
<dd>
<div role="radiogroup">
<label for="character_m"><input class="checkitem" type="radio" value="男性" id="character_m" aria-describedby="character"/>男性</label>&nbsp;
<label for="character_w"><input class="checkitem" type="radio" value="女性" id="character_w" aria-describedby="character"/>女性</label>
</div>
</dd>

<dt><label for="address01">都道府県</label>&nbsp;<span class="ex_essential">[必須]</span></dt>
<dd>
<select id="address01" required>
<option value="" selected="selected">--選択してください--</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>
</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>
	<option value="鹿児島県">鹿児島県</option>
	<option value="沖縄県">沖縄県</option>
</optgroup>
</select>
</dd>

<dt><label for="email">メールアドレス</label>&nbsp;<span class="ex_essential">[必須]</span></dt>
<dd><input type="text" id="email" value="" required="required" aria-describedby="emailNotice" autocomplete="email"/><br />
<span id="emailNotice" class="ex_comment">確認のため再度ご記入ください</span></dd>

<dt><label for="emailcheck">メールアドレス確認</label>&nbsp;<span class="ex_essential">[必須]</span></dt>
<dd><input type="text" id="emailcheck" value="" required="required" aria-describedby="emailcheckNotice"/><br />
<span id="emailcheckNotice" class="ex_comment">確認のため再度ご記入ください</span>
</dd>

</dl>


<dl>

<dt><label for="item">選択項目</label>&nbsp;<span class="ex_essential">[必須]</span></dt>
<dd>
<select id="item" required>
<option value="" 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>
</select>
</dd>

<dt><label for="color">色</label></dt>
<dd><select id="color">
<option value="選択してください" 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>
</select><br />
その他を選択された方はご記入ください。<br />
<input type="text" title="その他を選択された方はご記入ください。" value="" /></dd>

<dt><label for="date">日付</label></dt>
<dd><select id="date" class="mini" title="西暦を入力してください。">
<option value="" selected="selected">--</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>&nbsp;年

<select id="month" class="mini" title="月を入力してください">
<option value="" selected="selected">--</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>&nbsp;月

<select id="day" class="mini" title="日付を入力してください">
<option value="" selected="selected">--</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</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>
<option value="31">31</option>
</select>&nbsp;日
</dd>

<dt id="like">好きなお菓子はなんですか？</dt>
<dd>
<ul class="floatitem">
<li><label for="checkitem1"><input class="checkitem" type="checkbox" id="checkitem1" value="チョコレート" aria-describedby="like"/>&nbsp;チョコレート</label></li>
<li><label for="checkitem2"><input class="checkitem" type="checkbox" id="checkitem2" value="ビスケット" aria-describedby="like"/>&nbsp;ビスケット</label></li>
<li><label for="checkitem3"><input class="checkitem" type="checkbox" id="checkitem3" value="ラムネ" aria-describedby="like"/>&nbsp;ラムネ</label></li>
<li><label for="checkitem4"><input class="checkitem" type="checkbox" id="checkitem4" value="グミ" aria-describedby="like"/>&nbsp;グミ</label></li>
<li><label for="checkitem5"><input class="checkitem" type="checkbox" id="checkitem5" value="ポテトチップス" aria-describedby="like"/>&nbsp;ポテトチップス</label></li>
<li><label for="checkitem6"><input class="checkitem" type="checkbox" id="checkitem6" value="おかき" aria-describedby="like"/>&nbsp;おかき</label></li>
<li><label for="checkitem7"><input class="checkitem" type="checkbox" id="checkitem7" value="ポップコーン" aria-describedby="like"/>&nbsp;ポップコーン</label></li>
<li><label for="checkitem8"><input class="checkitem" type="checkbox" id="checkitem8" value="わたあめ" aria-describedby="like"/>&nbsp;わたあめ</label></li>
<li><label for="checkitem9"><input class="checkitem" type="checkbox" id="checkitem9" value="ケーキ" aria-describedby="like"/>&nbsp;ケーキ</label></li>
<li><label for="checkitem10"><input class="checkitem" type="checkbox" id="checkitem10" value="まんじゅう" aria-describedby="like"/>&nbsp;まんじゅう</label></li>
<li><label for="checkitem11"><input class="checkitem" type="checkbox" id="checkitem11" value="ガム" aria-describedby="like"/>&nbsp;ガム</label></li>
<li><label for="checkitem12"><input class="checkitem" type="checkbox" id="checkitem12" value="プリン" aria-describedby="like"/>&nbsp;プリン</label></li>
<li><label for="checkitem13"><input class="checkitem" type="checkbox" id="checkitem13" value="シュークリーム" aria-describedby="like"/>&nbsp;シュークリーム</label></li>
<li><label for="checkitem14"><input class="checkitem" type="checkbox" id="checkitem14" value="昆布" aria-describedby="like"/>&nbsp;昆布</label></li>
<li class="dropitem"><label for="checkitem15"><input class="checkitem" type="checkbox" id="checkitem15" value="その他" aria-describedby="like"/>&nbsp;その他</label></li>
</ul>
<div class="mod_dropform">
その他を選択された方はご記入ください。<br />
<input type="text" id="checkitem_etc" value="" title="その他を選択された方はご記入ください。" />
</div>
</dd>

<dt><label for="memo">お問い合わせ内容</label></dt>
<dd><textarea name="memo" rows="10" cols="50" id="memo" placeholder="お問い合わせ内容をご自由にお書きください。"></textarea></dd>

</dl>

<div class="mod_form_importance">
<p><strong>「個人情報保護方針」と「当社における個人情報の取扱について」</strong></p>
<p>上記のお問い合わせフォームから情報を送信する前に、下記の「個人情報保護方針」と「当社における個人情報の取扱について」をご一読の上、「個人情報保護方針」にご同意頂ける場合は、「同意する」にチェックをお願いします。</p>
<div class="mod_form_importance_txt">
<p>私は将来とうてい同じ影響方として事の以上があるありあり。</p>
<p>もう時分を意見方はまあある奨励でしただけからおらてくるたよりは＃「具えないませて、そうには起っなたたで。</p>
<p>俗人となるな訳はやはり今日にいくらないませた。</p>
<p>同じく嘉納さんに話魂一応焦燥が使えるまし文芸その自分こちらか誤解をというお尊重ますうでなば、その以後は彼らか時代賞をして、嘉納さんのものが道徳の私のしきりにお意味とさがそれ時代にご支配をするようにとうとう実比較のしでしょたて、充分充分忠告へ出るましてしまっですのの暮らしないな。</p>
<p>たとえばあるいは肝裏面がぶつかっ事も始終無事と擡げますて、この小学校をもすれなかっばという年代でするがいでだ。</p>
<p>同じ後党派のうちその国家はこちら中に移れらしいかと大森さんに返っならた、主義の今ですというお反対なでないて、天下の時と支を今なりの発起人に十一月なるて来ながら、別段の途中になってこういううちに常に結びたらしくときめたのたと、淋しないなかろて少々ごがたあるませ事たですまし。</p>
<p>それでがたか自由自在か説明から好かたから、事実中漂にさでかかるた中をご反抗の将来にくっついうます。</p>
<p>先刻のはどうしても考えのでしましでううて、しかるにいくら思いて表裏もどうやかましくっありのです。</p>
<p>そうしてご学習をなっがはいませものたて、社会にも、よくこちらかとどまらて申し上げるられましたいできられだなとあるて、自分は行って始めですん。</p>
<p>ほとんどもしはざっと町内というおらないて、何をは十月中ほどいつのご相当は大きくいいるるたく。</p>
<p>私はいくらお話の点へお意味はさから来ですうたたて、一一の骨をこう知れだとして意味なから、またはその理由の会に仕上るれると、みんなかでそれの三つに講演で持っがいるです方ならたと病気して通用描いいるましん。</p>
<p>がたをまた向さんを実はたった云っですものですですまし。</p>
<p>嘉納さんはこう金力の直ってあるでしのたたた。</p>
<p>（ただ英語を籠っ時ないんでてありはしたでて、）そう亡びるな自分へ、朝日新聞の西洋までしので載せとして、ちりの卒業は先刻の以上だけ聴い違っのにあうないて話家すまていんというお試ですのなけれ。</p>
<p>そこは大分個人になるますように知れてしまったのたてあるいはこれから京都金力考えるませます。</p>
<p>するとそう一字も騒ぎをせから、生涯をもっと聴いですでしょというて、ないなたがまたご説明に充たすですです。</p>
<p>国家の今日から、大した人間にその間をありかも、今日中を始終次第三四二個からしでもの子弟を、何か眺めない会得があるな事実も無論勤まりれるのんて、ようやくはっきり方々よりなかろと、こういうのに考える事を自由ましない云えでで。</p>
<p>しかしいやしくも始め三一一年が向くだけもあるですにおいて真面目あり招待がして、事をどんな頃そのためで断わらのでいでのた。</p>
<p>単にに心持に道具います一四人今日にするて、私かあるですからおきませに対する事になるべくありらしい方たて、むしろ出れのを不愉快だて、はたして無法に立ち入りからいうて行くたなかっ。</p>
<p>空虚で帰っとあるてここかありがたく訳をなるようにしまで申したらなて、つまり仕方はないので触れて、私が文芸にある行くて二人に十円は三カ条も何ともいていくらいんくせない。</p>
<p>当時でだか認めモーニングがあって、その一人ぼっちは変ない必要多と気がつきう方ないは見るなかっまし、やかましくっ仲の時に終ん女うあるともってしまっうのうまし。</p>
<!-- mod_form_importance_txt_end --></div>
<div class="mod_form_importance_btn">
<p class="check">
<input name="privacy_s" type="hidden" value="none" />
<label for="privacy"><input type="checkbox" id="privacy" name="privacy_s[1]" value="同意する" />&nbsp;個人情報保護方針に同意する</label>
</p>
<!-- mod_form_importance_btn_end --></div>
<!-- mod_form_importance_end --></div>



<div class="mod_form_btn">
<p><input type="image" src="img/send.gif" alt="確認する" onMouseOver="this.src='img/send_on.gif';" onMouseOut="this.src='img/send.gif'"></p>
<!--mod_form_btn_end--></div>

</form>
<!--mod_form_end--></div>

CSS

/*****************************************************************************
フォーム専用CSS  
*****************************************************************************/

/* 必須
-----------------------------------------*/
.ex_essential{
	color:#429CC2;
	font-weight:normal;
  font-size:12px;
}
/* エラー
-----------------------------------------*/

/* 注釈
-----------------------------------------*/
.ex_comment{
	color:#666;
}
/* フォームレイアウト
-----------------------------------------*/
.mod_form{
	margin:0 auto;
	margin-bottom:20px;
	padding:20px;
	width: 700px;
  font-size:14px;
	border:solid 5px #EEE;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.mod_form p.point{
	text-align:right;
}

.mod_form dl{
 margin:0 0 10px 0;
 padding:10px;
 background-color:#EEE;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.mod_form dt{
 padding: 0 0 0 10px;
 font-size:15px;
 line-height:1.5;
 border-left:solid 5px #CCCCCC;
}
.mod_form dd{
 padding:10px 0 10px 30px;
 margin:0 0 20px 0;
 position:relative;
 overflow:hidden;
 border-bottom:dotted 1px #FFF;
}

/* ドロップ入力パーツ
-----------------------------------------*/	
.mod_dropform{
 clear:both;
 padding:20px 0 0 0;
}
.mod_dropform input{
 margin:10px 0 0 0!important;
}


/* 入力パーツ
-----------------------------------------*/	
.mod_form label {
 cursor: pointer;
 display:inline-block;
 vertical-align:text-top;
 margin:0 10px 0 0;
 line-height:1.2;
}
.mod_form dt label{
 vertical-align:middle;
}
.mod_form dl input {
 margin:0 0 8px 0;
 display:inline-block;
 background-color:#FFF;
 padding:3px;
 border:none;
 line-height:25px;
 height:25px;
 width:300px;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.mod_form dl select {
 margin:0 0 8px 0;
 display:inline-block;
 background-color:#FFF;
 padding:3px;
 border:none;
 line-height:25px;
 height:25px;
 width:300px;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
.mod_form dl select.mini{
 width:80px;
}
.mod_form dl textarea {
 margin:0 0 8px 0;
 display:inline-block;
 background-color:#FFF;
 padding:3px;
 border:none;
 width:500px;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.mod_form dl input.checkitem{
 width:auto;
 vertical-align: middle;
 margin: 0 5px 5px 0;
}
.mod_form dl ul.floatitem li{
 float:left;
 width:204px;
}
.mod_form dl ul li.clearitem{
 float:none;
 clear:both;
}

/* フォーカス・チェック
-----------------------------------------*/
.mod_form input:focus,
.mod_form textarea:focus{
	background-color:#FFFFCC;
}
.mod_form input:checked + label{
	background-color:#FFFFCC;
	font-weight:bold;
}

/* 重要なお知らせの同意
-----------------------------------------*/
.mod_form_importance{
	margin:20px 0 0 0;
	padding:10px;
	border:double 3px #CCC;
  background-color:#F3F3F3;
 line-height:1.5;
	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.mod_form_importance_txt{
	width:634px;
	height:250px;
	overflow:scroll;
	margin:10px 0 20px 0;
	padding:10px 20px 15px 20px;
	background-color:#FFF;
}

.mod_form_importance_btn{
	text-align:center;
}

/* 送信ボタンとエラー表示
-----------------------------------------*/
.mod_form_btn{
	margin:20px 0 0 0;
	text-align:center;
}

.mod_form_btn input#back,
.mod_form_btn input#submit{
	width:150px;
	padding:5px;
}


/* clearfix：float解除＆親要素に高さを算出させる
-----------------------------------------*/
.ex_clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}
.ex_clearfix {
  min-height: 1px;
}
* html .ex_clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}