form アーカイブ - CodingMania

入力された日付を比べてメッセージを表示

yotigory — Wed, 15 Mar 2017 08:34:23 +0000

JSを読み込みます

[main.js]JavaScript

//日付のチェック
$(function(){
  $("#limitcheck").click(function(){
    var startday = parseInt($("#checkday").val());
    var startyear = parseInt($("#checkyear").val());
    var startmonth = parseInt($("#checkmonth").val());
    var endyear = parseInt($("#endyear").val());
    var endmonth = parseInt($("#endmonth").val());
    var endday = parseInt($("#endday").val());
    if ((jQuery.isNumeric(startday)==false)||(jQuery.isNumeric(startyear)==false)||(jQuery.isNumeric(startmonth)==false)||(jQuery.isNumeric(endyear)==false)||(jQuery.isNumeric(endmonth)==false)||(jQuery.isNumeric(endday)==false)){
      alert("日付をすべて入力してください。");
    } else {
      //var fromyear=endyear+5;
      //var tomonth = startmonth-1;
      to = new Date(startyear,startmonth,startday,0,0,0).getTime();
      from = new Date(endyear,endmonth,endday,0,0,0).getTime();
      //alert(to);
      //alert(from);
      if(to
HTMl



日付：【1】
 年

 月

 日




日付：【2】

 年

 月

 日











CSS
.Form dl{
  margin: 0 0 2px 0;
  display: block;
  box-sizing:border-box;
  line-height: 1.5;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl{
}
}
.Form dl dt{
  display: block;
  padding: 10px;
  font-size: 14px;
  background-color:#EEE;
  box-sizing:border-box;
  font-weight: bold;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dt{
}
}
.Form dl dd{
  display: block;
  margin: 0 0 40px 0;
  padding: 10px;
  font-size: 14px;
  box-sizing:border-box;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form dl dd{
  margin-bottom: 30px;
}
}

.Form select{
  width: 150px;
  margin: 0 3px 0 0;
  padding: 5px;
  box-sizing:border-box;
  border: solid 1px #999;
  border-radius: 4px;
}
@media only screen and (max-width:640px) and (max-device-width:1280px){
.Form select{
  width: 70%;
  margin-bottom: 20px;
}
.Form dd select:last-child{
  margin-bottom: 0px;
}
}

/* Form__checkbtn */
.Form__checkbtn button{
  margin: 0 auto;
  display: block;
  box-sizing:border-box;
  padding: 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
  border-radius: 4px;
  border:solid 1px #737373;
  box-shadow: 2px 2px 0 #CCC;
  cursor: pointer;
  text-align: center;
  width: 300px;
  font-weight: bold;
  font-size: 16px;
}

投稿 入力された日付を比べてメッセージを表示 は CodingMania に最初に表示されました。

アクセシビリティを考慮したラジオボタン

yotigory — Fri, 09 Dec 2016 04:40:54 +0000

HTMl



どちらの食べ物が好きですか？


りんご 
バナナ







もし自宅のリフォームを考えた場合、とりあえず自分でいろんなメーカーのショウルームをまわったりWebで情報を収集したりしてある程度決めてからリフォーム会社に相談しますか？

自分で情報を収集する前にリフォーム会社に相談する。

自分でWebで情報を集めて調べるが、メーカーのショウルームまでは行かず、リフォーム会社に相談する。

自分でWebで情報をあつめて、メーカーのショウルームにも行き、ある程度決めてからリフォーム会社に相談する。

CSS

/* Form
-----------------------------------------*/
.Form{
  margin: 10px 0 20px 0;
}
.Form label{
  display: inline-block;
  cursor: pointer;
}
.Form input{
  margin:0 5px 5px 0;
}

.Form dl dt{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
}
.Form dl dd{
  margin: 10px;
}
.Form legend{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
  line-height: 1.5;
}
.Form__radio{
  margin: 10px;
}
.Form__radio label{
  margin-top: 10px;
}

投稿アクセシビリティを考慮したラジオボタンは CodingMania に最初に表示されました。

指定のラジオボタンをチェックすると、さらに追加で項目を表示します

yotigory — Thu, 17 Nov 2016 08:25:38 +0000

JSを読み込みます

[main.js]JavaScript

//選択されたら表示
$(function(){
$(".Form__radio dd").each(function() {
//命令
  var Set = $(this);
  var selectlabel = $(this).find("label.select");
  var closelabel = $(this).find("label.close");
  var selectitem = $(this).find("label.select input");
  var morearea = $(this).find(".Inputmore");
  var moreinput = $(this).find(".Inputmore input");
  var moreinputselect = $(this).find(".Inputmore select");
  //初期化
  $(moreinput).attr("checked", false);
  $(morearea).css("display", "none");

    $([selectlabel[0] , closelabel[0]]).click(function(){
     if($(selectitem).prop('checked')){
     $(morearea).slideDown();
                }else{
      $(moreinput).attr("checked", false);
      $(morearea).slideUp();
      $(moreinputselect).val("選択");
        }
 });
});
});

HTMl




自分の部屋に窓はありますか？


有ります
無いです


有る場合は、下記も選択してください。

どんな色のカーテンを使っていますか？








自分の部屋にソファはありますか？


有ります
無いです


有る場合は、下記も選択してください。

どんな色のソファですか？

CSS

/* Form
-----------------------------------------*/
.Form{
  margin: 10px 0 20px 0;
}
.Form label{
  display: inline-block;
  cursor: pointer;
}
.Form>dl{
  margin: 0 0 40px 0;
}
.Form dl dt{
  background-color: #EBEBEC;
  padding: 10px;
  border-radius: 4px;
}
.Form dl dd{
  padding: 10px;
}
.Inputmore {
  margin: 10px 0 0 0;
}

投稿指定のラジオボタンをチェックすると、さらに追加で項目を表示しますは CodingMania に最初に表示されました。

[form:inputタグ]画像の上にcheckboxを重ねて表示する

yotigory — Wed, 13 Jan 2016 09:37:13 +0000

JSを読み込みます

[main.js]JavaScript

//searchimg
jQuery(function($){
  //allcheck allclear
  $(function () {
      $("#allcheck").click(function(){
          $(".mod_search_form input:checkbox").prop({'checked':true});
          $(".mod_search_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
          $(".mod_search_form_btn").addClass("validity");
      });
      $("#allclear").click(function(){
          $(".mod_search_form input:checkbox").prop({'checked':false});
          $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
          $(".mod_search_form_btn").removeClass("validity");
      });
  });
  //btn
  $(function(){
             //送信ボタンの無効、チェックボックスを外す
              $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
              $(".mod_search_form input:checkbox").attr('checked',false);
             //チェックボックスがクリックされると送信ボタン有効
              $(".mod_search_form label,.mod_search_form input").click(function(){
                  if($(".mod_search_form input:checkbox").is(':checked')){
                      $(".mod_search_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
                      $(".mod_search_form_btn").addClass("validity");
                  }else{
                       $(".mod_search_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
                       $(".mod_search_form_btn").removeClass("validity");
              }
          })
  });

  });

HTMl

CSS

/* mod_search
-----------------------------------------*/
.mod_search{
  margin: 40px 0 0 0;
  width:740px;
}

.mod_search ul.searchbtnlist{
 margin:20px 0 30px 0;
}
.mod_search ul.searchbtnlist li{
  display: inline-block;
  margin: 0 2px 0 2px;
}
.mod_search ul.searchbtnlist li button{
  background:none;
  border:none;
  cursor: pointer;
  min-width: 150px;
  box-sizing:border-box;
  padding: 7px 10px 6px 10px;
  line-height: 1;
  border: solid 1px #CCC;
    /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.mod_search ul.searchbtnlist li button:hover,
.mod_search ul.searchbtnlist li button:focus{
  text-decoration: none!important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+47,ffffff+100 */
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top,  #ededed 0%, #f6f6f6 47%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/* mod_search_form */
.mod_search_form{
}
.mod_search_form form ul{
  width: 750px;
  margin: 0 -10px 0 0;
  position: relative;
  overflow: hidden;
}
.mod_search_form form ul li{
  position: relative;
  float: left;
  margin: 0 10px 10px 0;
}
.mod_search_form form ul li label img{
  cursor: pointer;
}

/*CheckBox */
.mod_search_form form ul li label input{
  position: absolute;
  top:5px;
  left:3px;
  opacity: 0;
}
.mod_search_form form ul label input + span {
  position: absolute;
  top:5px;
  left:3px;
  display: block;
  width: 24px;
  height: 19px;
}
.mod_search_form form ul label input[type="checkbox"] + span {
}
.mod_search_form form ul label input[type="checkbox"]:checked + span {
  background:transparent url('../img/bg_check.png') no-repeat 5px 0px;
}
/* mod_search_form_btn */
.mod_search_form_btn{
  clear: both;
  text-align: center;
  margin:40px 0 0 0;
}
.mod_search_form_btn input.searchbtn{
  background:none;
  border:none;
  font-size: 115%;
  cursor: pointer;
  min-width: 210px;
  color: #262626!important;
  box-sizing:border-box;
  padding: 19px 17px 18px 0;
  line-height: 1;
  border: solid 1px #e6e6e6;
  /* border-radius */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  background:transparent url('../img/icon_search.png') no-repeat 140px 20px;
}
.mod_search_form_btn.validity input.searchbtn{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */
background: #ffffff; /* Old browsers */
background: url('../img/icon_search.png'),-moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6-15 */
background: url('../img/icon_search.png'),-webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
background: url('../img/icon_search.png'),linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
  background-repeat:no-repeat;
  background-position:140px 20px,0 0;
}
.mod_search_form_btn.validity input.searchbtn:hover{
  text-decoration: none!important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+47,ffffff+100 */
background: #ededed; /* Old browsers */
background: url('../img/icon_search.png'),-moz-linear-gradient(top,  #ededed 0%, #f6f6f6 47%, #ffffff 100%); /* FF3.6-15 */
background: url('../img/icon_search.png'),-webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: url('../img/icon_search.png'),linear-gradient(to bottom,  #ededed 0%,#f6f6f6 47%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  background-repeat:no-repeat;
  background-position:140px 20px,0 0;
}

投稿 [form:inputタグ]画像の上にcheckboxを重ねて表示するは CodingMania に最初に表示されました。

ボタンのアウトラインアニメーションでfocusを分りやすくします

yotigory — Fri, 08 May 2015 07:18:25 +0000

HTMl

CSS

/* .btn
-----------------------------------------*/
.btn{
 background-color:#003567;
 color:#FFF;
 cursor:pointer;
 border:none;
 line-height:50px;
 text-align:center;
 width:100px;
 height:50px;
 	/*border-radius*/
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 2px 0px #000;
	-moz-box-shadow:0px 2px 0px #000;
	box-shadow:0px 2px 0px #000;
 outline:2px solid transparent;
 outline-offset:50px;
 transition:0.5s all ease;
}
.btn:focus{
 outline:1px dotted #003567;
 outline-offset:0;
}
.btn:active{
 position:relative;
 top:2px;
 	/*box-shadow*/
	-webkit-box-shadow:0px 0px 0px #000;
	-moz-box-shadow:0px 0px 0px #000;
	box-shadow:0px 0px 0px #000;
}

投稿ボタンのアウトラインアニメーションでfocusを分りやすくしますは CodingMania に最初に表示されました。

formのselect要素をCSSでスタイル変更する

yotigory — Tue, 17 Feb 2015 10:44:09 +0000

HTMl

CSS

.mod_form{
 margin:0 auto;
 width:100%;
 font-size:16px;
}
.mod_form_select {
 overflow: hidden;
 width:100%;
 box-sizing:border-box;
 border-radius: 3px;
 padding:3px 0 3px 10px;
 margin: 0 0 10px 0;
 border: 1px solid #dfdfdf;
 vertical-align: middle;
 background: #efefef url(img/img-arrow-down.png) no-repeat 95% 50%;
}
.mod_form_select select {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 border-radius: 0;
 border: 0;
 margin: 0;
 padding:0;
 background: none transparent;
 vertical-align: middle;
 font-size: inherit;
 color: inherit;
 box-sizing: content-box;
 width: 130%;
 height:35px;
}

投稿 formのselect要素をCSSでスタイル変更するは CodingMania に最初に表示されました。

画像をクリックしてチェックボックスにチェックを入れます

yotigory — Tue, 17 Jun 2014 06:48:26 +0000

JSを読み込みます

[form.js]JavaScript

jQuery(function($){
//ユーザエージェント条件分岐
    var _ua = (function(){
    return {
    ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
    ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
    ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
    ltIE9:document.uniqueID && typeof window.matchMedia == "undefined",
    gtIE10:document.uniqueID && window.matchMedia,
    Trident:document.uniqueID,
    Gecko:'MozAppearance' in document.documentElement.style,
    Presto:window.opera,
    Blink:window.chrome,
    Webkit:typeof window.chrome == "undefined" && 'WebkitAppearance' in document.documentElement.style,
    Touch:typeof document.ontouchstart != "undefined",
    Mobile:typeof window.orientation != "undefined",
    ltAd4_4:typeof window.orientation != "undefined" && typeof(EventSource) == "undefined",
    Pointer:window.navigator.pointerEnabled,
    MSPoniter:window.navigator.msPointerEnabled
    }
    })();

if(_ua.ltIE8){
 var imgcheck = $(".imgcheck");
	imgcheck.click(function(){
	if($(this).next().prop('checked')){
		$(this).next().attr("checked", false);
	}else{
		$(this).next().attr("checked", true);}
	});
}
});

HTMl







好きな色は？




 赤



 オレンジ



 青



 緑



 紫



 黄

好きな色は？	赤オレンジ青緑紫黄

CSS

/* 
-----------------------------------------*/

.mod_form form {
  background-color: #FFFFFF;
  border-bottom: 1px solid #999999;
  border-top: 2px solid #999999;
}
.mod_form form label{
  cursor:pointer;
}
.mod_form form input{
  vertical-align:middle;
}
.mod_form form table {
  width: 100%;
}
.mod_form form table th,
.mod_form form table td{
  border-bottom: 1px solid #999999;
}
.mod_form form table th {
  padding: 20px;
  width:20%;
  font-weight:bold;
  color:#000;
  vertical-align: top;
}
.mod_form form table td {
  padding: 20px;
  width:80%;
  vertical-align: top;
}
.mod_form form table td.taste label {
    float: left;
    width: 108px;
}
.mod_form form table td.taste label img{
  margin:0 23px 0 0;
}

投稿画像をクリックしてチェックボックスにチェックを入れますは CodingMania に最初に表示されました。

特定のチェックボックスをチェックすると、さらに追加で項目を表示します

yotigory — Tue, 27 May 2014 06:00:26 +0000

JSを読み込みます

[form.js]JavaScript

//選択されたら表示
$(function(){
	var selectlabel = $("label.select");
	var selectitem = $("label.select input");
	var morearea = $(".mod_search_table_more");
	var moreinput = $(".mod_search_table_more input");
  //初期化
  $(moreinput).attr("checked", false);
  $(morearea).css("display", "none");


	$(selectlabel).click(function(){
	 if($(selectitem).prop('checked')){
     $(morearea).slideDown();
				}else{
 	  $(moreinput).attr("checked", false);
     $(morearea).slideUp();
		}
 });
});

HTMl







地域


 北海道・東北
 関東
 甲信越・北陸
 東海
 関西
 中国
 四国
 九州・沖縄







都道府県

 大阪
 京都
 兵庫
 奈良
 和歌山
 滋賀







カラー



 ホワイト
 ブラック
 ブルー
 レッド
 イエロー
 グリーン

地域	北海道・東北関東甲信越・北陸東海関西中国四国九州・沖縄

都道府県	大阪京都兵庫奈良和歌山滋賀

カラー	ホワイトブラックブルーレッドイエローグリーン

CSS

.mod_search form {
  margin: 0 0 100px 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid #999999;
  border-top: 2px solid #999999;
}
.mod_search form label{
  cursor:pointer;
}
.mod_search form input{
  vertical-align:middle;
}
.mod_search form table {
  width: 100%;
}
.mod_search form table th,
.mod_search form table td{
  border-bottom: 1px solid #999999;
}
.mod_search form table th {
  padding: 20px;
  width:20%;
  font-weight:bold;
  color:#000;
  vertical-align: top;
}
.mod_search form table td {
  padding: 20px;
  width:80%;
  vertical-align: top;
}

.mod_search form table td.area label {
    float: left;
    margin: 0 0 5px 0;
    width: 25%;
}
.mod_search form table td.color label {
  margin:0 20px 0 0;
}

/* mod_search_table_more */
.mod_search_table_more label{
  margin:0 20px 0 0;
}

投稿特定のチェックボックスをチェックすると、さらに追加で項目を表示しますは CodingMania に最初に表示されました。

擬似要素を使って長さに対応するボタンを作ります。

yotigory — Wed, 21 Aug 2013 03:48:59 +0000

HTMl

Click!!

CSS

p.ex_linkbtn {
  display: inline-block;
  height: 34px;
  font-size: 14px;
  font-weight: bold;
}
p.ex_linkbtn a {
  display:inline-block;
    margin: 0 25px 0 10px;
  background:transparent url('img/bg_middle.png') repeat-x left top;
  height: 34px;
  color: #EEE;
  text-decoration:none;
}
p.ex_linkbtn a span{
  display:inline-block;
  padding:0 10px 0 0;
}
p.ex_linkbtn a:before, .ex_linkbtn a:after {
  display: inline-block; 
  content: "";
  height: 34px;
  background-repeat: no-repeat;
  vertical-align: middle;
}
p.ex_linkbtn a:before {
  margin-left: -10px;
  width : 10px;
  height : 34px;
  background:transparent url('img/bg_left.png') no-repeat left top;
}
p.ex_linkbtn a:after {
  margin-right: -20px;
  width : 20px;
  height : 34px;
  background:transparent url('img/bg_right.png') no-repeat left top;
}
/* hover */
p.ex_linkbtn a:hover {
  background:transparent url('img/bg_middle_on.png') repeat-x left top;
}
p.ex_linkbtn a:hover:before {
  background:transparent url('img/bg_left_on.png') no-repeat left top;

}
p.ex_linkbtn a:hover:after {
  background:transparent url('img/bg_right_on.png') no-repeat left top;
}

投稿擬似要素を使って長さに対応するボタンを作ります。は CodingMania に最初に表示されました。

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

yotigory — Fri, 12 Aug 2011 06:14:45 +0000

JSを読み込みます

[formcheck.js]JavaScript

$(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").attr('checked')==true){
					$(".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


[必須]項目は必ずご入力ください。




お問い合わせ項目 [必須]



名前 [必須]




フリガナ [必須]



性別


男性 
女性





メールアドレス [必須]


例：info@gmai.com


メールアドレス確認 [必須]


確認のため再度ご記入ください



郵便番号


例：571-0212


都道府県 [必須]



市区町村・番地


例：神戸市北区花山南町5-2


マンション・アパート名


例：メゾン南000号


電話番号 [必須]


例：0728122800


品番


その他の品番は下記へご記入ください。





日付

 年

 月

 日




色


その他を選択された方はご記入ください。






好きなお菓子はなんですか？



 チョコレート

 ビスケット

 ラムネ

 グミ

 ポテトチップス

 おかき

 ポップコーン

 わたあめ


 ケーキ

 まんじゅう

 ガム

 プリン

 シュークリーム

 昆布

 その他





お問い合わせ内容






「個人情報保護方針」と「当社における個人情報の取扱について」
上記のお問い合わせフォームから情報を送信する前に、下記の「個人情報保護方針」と「当社における個人情報の取扱について」をご一読の上、「個人情報保護方針」にご同意頂ける場合は、「同意する」にチェックをお願いします。


会社名および個人情報保護管理者
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の利用目的

・箇条書き

・箇条書き
・箇条書き


個人情報の提供
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報の取扱いの委託について
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

個人情報を入力するにあたっての注意事項 


（1）文章が入ります。
（1）文章が入ります。
（1）文章が入ります。


本人が容易に認識できない方法による個人情報の取得
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。

開示対象個人情報の開示等および問合せ窓口について 
文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。







 個人情報保護方針に同意する

お問い合わせ項目 [必須]
名前 [必須]
フリガナ [必須]
性別	男性女性
メールアドレス [必須]	例：info@gmai.com
メールアドレス確認 [必須]	確認のため再度ご記入ください
郵便番号	例：571-0212
都道府県 [必須]
市区町村・番地	例：神戸市北区花山南町5-2
マンション・アパート名	例：メゾン南000号
電話番号 [必須]	例：0728122800
品番	その他の品番は下記へご記入ください。
日付	年月日
色	その他を選択された方はご記入ください。
好きなお菓子はなんですか？	チョコレートビスケットラムネグミポテトチップスおかきポップコーンわたあめケーキまんじゅうガムプリンシュークリーム昆布その他
お問い合わせ内容

CSS

/* 必須
-----------------------------------------*/
.ex_essential{
	color:#CC0000;
	font-weight:normal;
}
/* エラー
-----------------------------------------*/

/* 注釈
-----------------------------------------*/
.ex_comment{
	color:#666;
}
/* フォームレイアウト
-----------------------------------------*/
.mod_form{
	margin:0 auto;
	margin-bottom:20px;
	padding:20px;
	width: 700px;
	border:solid 5px #EEE;
}
.mod_form p.point{
	text-align:right;
}
.mod_form table{
	width:100%;
	border-collapse:separate;
	border-spacing:2px;
}
.mod_form table tr th{
	padding:10px;
	white-space: nowrap;
	font-weight:bold;
	vertical-align: top;
	border-bottom:solid 1px #C1D0E3;
	background-color:#EBF0F6;
}
.mod_form table tr td{
	width:70%;
	padding:10px;
	border-bottom:solid 1px #B6D1F5;
}

/* フォーム内2段組
-----------------------------------------*/
.mod_form_listbox{
	width:100%;
}
.mod_form_listbox_left{
	float:left;
	width:50%;
}
.mod_form_listbox_right{
	float:left;
	width:50%;
}

/* 入力パーツ
-----------------------------------------*/	
label {
  cursor: pointer;
}
select#item,
select#address01,
select#maker,
select#color{
	width:250px;
}
select#nengou,
select#year,
select#month,
select#day{
	width:60px;
}
input,
textarea{
	border:solid 1px #CCCCCC;
}
input#character_m,
input#character_w,
.mod_form_listbox input{
	border:none;
}

input#address02,
input#bill{
	width:350px;
	height:1.4em;
}
input#name,
input#kana,
input#email,
input#emailcheck,
input#maker_etc,
input#color_etc{
	width:250px;
	height:1.4em;
}
input#zipcode,
input#tel{
	width:150px;
	height:1.4em;
}
textarea{
	width:350px;
}
/* フォーカス・チェック
-----------------------------------------*/
input:focus,
textarea:focus{
	background-color:#FFFFCC;
}
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:#DDD;
}
.mod_form_importance h2{
	font-weight:bold;
}
.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_txt h3{
	margin:10px 0 5px 0;
	font-weight:bold;
	border-bottom:solid 1px #DDD;
}
.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;
  /**/
}

投稿 html5 入力フォームのテンプレート！[表型] は CodingMania に最初に表示されました。