フォームアーカイブ - CodingMania

フォームにある現在地を示すステップナビゲーション

yotigory — Mon, 05 Mar 2018 04:47:07 +0000

HTMl


  
    １．製品情報入力
    ２．問合せ情報入力
    ３．お客様情報入力
    ４．確認
    ５．送信完了

CSS

/* Stepnav
-----------------------------------------*/

.Stepnav ol {
  margin-top: 40px;
  display: table;
  table-layout: fixed;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border-left: solid 1px #cccccc;
  border-right: solid 1px #cccccc;
}

.Stepnav ol li {
  position: relative;
  display: table-cell;
  box-sizing: border-box;
  padding-left: 25px;
  text-align: center;
  vertical-align: middle;
  color: #2196f3;
  font-size: 14px;
  background-color: #f9f9f9;
  font-weight: bold;
  border-top: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
}

.Stepnav ol li:first-child {
  padding-left: 0;
}

@media screen and (max-width: 960px) {
  .Stepnav ol li {
    font-size: 12px;
  }
}

.Stepnav ol li.current {
  background-color: #2196f3;
  color: #FFF;
}

@media screen and (max-width: 960px) {
  .Stepnav ol li span {
    display: none;
  }
}

.Stepnav ol li:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -25px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 24px solid #cccccc;
  z-index: 99;
}

.Stepnav ol li:nth-child(5):before {
  display: none;
}

.Stepnav ol li:after {
  content: "";
  position: absolute;
  top: -1px;
  right: -24px;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 24px solid #f9f9f9;
  z-index: 99;
}

.Stepnav ol li:last-child:after {
  display: none;
}



.Stepnav ol li.current {
  border-top: solid 1px #2196f3;
  border-bottom: solid 1px #2196f3;
}

.Stepnav ol li.current:after {
  border-left: 24px solid #2196f3;
}

投稿フォームにある現在地を示すステップナビゲーションは 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 に最初に表示されました。

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

yotigory — Fri, 07 Mar 2014 05:24:03 +0000

JSを読み込みます

[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


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


名前 [必須]


フリガナ [必須]


性別


男性 
女性



都道府県 [必須]




メールアドレス [必須]


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

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


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







選択項目 [必須]




色


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



日付
 年

 月

 日


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


 チョコレート
 ビスケット
 ラムネ
 グミ
 ポテトチップス
 おかき
 ポップコーン
 わたあめ
 ケーキ
 まんじゅう
 ガム
 プリン
 シュークリーム
 昆布
 その他


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





お問い合わせ内容





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

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




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

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;
  /**/
}

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

フォーム アーカイブ - CodingMania

フォームにある現在地を示すステップナビゲーション

HTMl

CSS

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

JSを読み込みます

[main.js]JavaScript

HTMl

CSS

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

HTMl

CSS

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

JSを読み込みます

[main.js]JavaScript

HTMl

CSS

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

JSを読み込みます

[main.js]JavaScript

HTMl

CSS

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

HTMl

CSS

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

HTMl

CSS

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

JSを読み込みます

[form.js]JavaScript

HTMl

CSS

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

JSを読み込みます

[form.js]JavaScript

HTMl

CSS

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

JSを読み込みます

[form.js]JavaScript

HTMl

CSS

フォームアーカイブ - CodingMania