リッチなスマートフォン風フォームのインターフェイス

0

Font

Choose Animal

view source

JavaScript

$(function(){
  $('fieldset[data-name="boolean"]').each(function(){
    var handle = $(this).find('span.handle');
    var label = $(this).find('label');
    var input = $(this).find('input').hide();
    handle.draggable({
      containment : 'parent',
      axis : 'x',
      start : function(evt){
        handle.x = handle.position().left;
      },
      stop : function(evt){
        var width = handle.parent().width();
        var el = handle.position().left;
        var er = el + handle.width();
        var x = 0;
        if(el > width/4){
          x = 200;
          input.attr('checked', 'checked');
          label.addClass('checked');
        } else {
          x = 0;
          input.removeAttr('checked');
          label.removeClass('checked');
        }
        $(this).animate({
          left : x
        });
      }
    });


    $(this).find('label.bar').click(function(evt){
      var x = evt.clientX;
      var pw = $(this).width();
      var hx = x - handle.width()/2;
      input.removeAttr('checked');
      if(hx > pw/2){
        hx = pw - handle.width();
        input.attr('checked', 'checked');
      } else {
        hx = 0;
      }
      handle.animate({
        left : hx
      })
    });
  });




  $('fieldset[data-name="range"]').each(function(){
    var input = $(this).find('input').hide();
    var handle = $(this).find('span.handle');
    var bar = $(this).find('div.range_bar');
    var value = $(this).find('.value');
    handle.draggable({
      containment : 'parent',
      axis : 'x',
      drag : function(evt){

        var x = handle.position().left;
        var v = Math.floor(x / bar.width() * 100);
        input.val(v);
        value.text(v);
      }
    });
    bar.mousedown(function(evt){
      var x = evt.offsetX;
      handle.css({left : x});
      var v = Math.floor(x / bar.width() * 100);
      input.val(v);
      value.text(v);
    });
  });




  $('fieldset[data-name="checkbox"]').each(function(){
    var input = $(this).find('input').hide();

    input.each(function(){
      var is_check = $(this).attr('checked');
      if(is_check){
        $(this).parent().addClass('checked');
      } else {
        $(this).parent().removeClass('checked');
      }
    });
    input.change(function(){
      var is_check = $(this).attr('checked');
      if(is_check){
        $(this).parent().addClass('checked');
      } else {
        $(this).parent().removeClass('checked');
      }
    });
  });




  $('fieldset[data-name="radio"]').each(function(){
    var input = $(this).find('input').hide();
    input.each(function(){
      $(this).parent().prepend('<span class="icon"></span>');
      var is_check = $(this).attr('checked');
      if(is_check){
        $(this).parent().addClass('checked');
      } else {
        $(this).parent().removeClass('checked');
      }
    });
    input.change(function(){
      var is_check = $(this).attr('checked');
      input.parent().removeClass('checked');
      if(is_check){
        $(this).parent().addClass('checked');
      } else {
        $(this).parent().removeClass('checked');
      }
    });
  });



  $('fieldset[data-name="select"]').each(function(){
    var input = $(this).find('select');
    var label = $(this).find('label');
    $(this).prepend('<span class="icon"></span>');
    input.each(function(){
      label.text($(this).val());
    })
    input.change(function(){
      label.text($(this).val());
    });
    input.hover(function(){
      label.addClass('hover');
    }, function(){
      label.removeClass('hover');
    });
    input.mousedown(function(){
      label.addClass('active');
    });
    input.mouseup(function(){
      label.removeClass('active');
    });

  });
});

function checkLabel(){
  
}

CSS

form{
  padding:80px;
  background-color:rgb(85, 85, 85);
  background-image:-webkit-gradient(
    linear, 0% 0%, 100% 100%, from(rgb(85, 85, 85)), to(rgb(50,50,50))
  );
}


fieldset{
  position:relative;
  left:0;
  top:0;
  margin:20px;
}

fieldset:after{
  display:block;
  content:"";
  clear:both;
}


fieldset[data-name="textarea"] textarea{
  height:88px;
  width:400px;
  border-radius: 10px;
  padding:6px;
  background-color:rgb(50,50,50);
  color:rgb(255,255,255);
  border-style:none;
  box-sizing:border-box;
  -webkit-appearance: none;
  box-shadow: rgba(0, 0, 0, .5) 0px 4px 12px 0px inset;
}


fieldset[data-name="text"] input{
  border-radius: 10px;
  width:400px;
  height:44px;
  padding:6px;
  background-color:rgb(50,50,50);
  color:rgb(255,255,255);
  border-style:none;
  box-sizing:border-box;
  box-shadow: rgba(0, 0, 0, .5) 0px 4px 12px 0px inset;
}


input[type="number"]{
  border-radius: 10px;
  width:400px;
  height:44px;
  padding:6px;
  background-color:rgb(50,50,50);
  color:rgb(255,255,255);
  border-style:none;
  box-sizing:border-box;
  box-shadow: rgba(0, 0, 0, .5) 0px 4px 12px 0px inset;
}
input[type="number"]::-webkit-outer-spin-button{
}
input[type="number"]::-webkit-inner-spin-button{
  display:none;
}

fieldset[data-name="boolean"] label.bar{
  position:relative;
  left:0;
  top:0;
  width:400px;
  height:44px;
  border:1px solid #000000;
  border-radius: 22px;
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(85,85,85)), to(rgb(128, 128, 128))
  );
  color:#ffffff;
  font-size:18px;
  font-weight:bold;
  text-shadow: rgba(0, 0, 0, .5) 0px -1px 1px;
}
fieldset[data-name="boolean"] label.bar.checked{
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(83, 147, 197)), to(rgb(133, 186, 228))
  );
}

fieldset[data-name="boolean"] span.handle{
  position:absolute;
  left:-1px;
  top:-1px;
  display:block;
  width:200px;
  height:44px;
  border:1px solid #000000;
  border-radius: 22px;
}


fieldset[data-name="boolean"] span.switch_on,
fieldset[data-name="boolean"] span.switch_off{
  display:inline-block;
  width:200px;
  height:44px;
  line-height:44px;
  text-align:center;
}
fieldset[data-name="boolean"] span.switch_on{
  position:absolute;
  left:0;
  top:0;
}
fieldset[data-name="boolean"] span.switch_off{
  position:absolute;
  right:0;
  top:0;
}


fieldset[data-name="range"]{
  height:44px;
  margin:8px;
}

fieldset[data-name="range"] div.area{
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  width:402px;
  height:16px;
}
fieldset[data-name="range"] .value{
  display:inline-block;
  width:60px;
  height:44px;
  line-height:44px;
  text-align:center;
  border-radius: 10px;
  background-color:rgb(50,50,50);
  color:#ffffff;
  font-size:18px;
  font-weight:bold;
  text-shadow: rgba(0, 0, 0, .5) 0px -1px 1px;
   -webkit-user-select:text;
   -moz-user-select:text;
   user-select:text;
}
fieldset[data-name="range"] input,
fieldset[data-name="range"] div.range_bar{
  position:absolute;
  left:0px;
  top:0px;
  margin:0 22px;
  width:356px;
  height:16px;
  border:1px solid #000000;
  border-radius: 10px;
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(50,50,50)), to(rgb(85, 85, 85))
  );
}
fieldset[data-name="range"] span.handle{
  position:absolute;
  left:0px;
  top:-16px;
  display:block;
  width:44px;
  height:44px;
  border:1px solid #000000;
  border-radius: 50%;
}


fieldset[data-name="checkbox"]{
  display:block;
  contetn:"";
  clear:both;
}
fieldset[data-name="checkbox"] label{
  float:left;
  display:inline-block;
  width:44px;
  height:44px;
  line-height:44px;
  text-align:center;
  border:1px solid #000000;
  border-right-style:none;
}

fieldset[data-name="checkbox"] label:first-child{
  border-radius:10px 0 0 10px;
}

fieldset[data-name="checkbox"] label:last-child{
  border-radius:0 10px 10px 0;
  border-right-style:solid;
}



fieldset[data-name="radio"] label{
  position:relative;
  left:0;
  top:0;
  display:block;
  width:200px;
  height:44px;
  line-height:44px;
  text-indent:32px;
  text-align:left;
  border:1px solid #000000;
}

fieldset[data-name="radio"] span.icon{
  position:absolute;
  left:0;
  top:0;
  display:inline-block;
  content:".";
  width:16px;
  height:16px;
  margin:12px 8px;
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, .8)), to(rgba(0,0,0,.2))
  );
  border-radius:50%;
}
fieldset[data-name="radio"] label.checked span.icon:before{
  position:absolute;
  left:0;
  top:0;
  display:inline-block;
  content:"";
  width:10px;
  height:10px;
  margin:2px;
  border:1px solid #000000;
  border-bottom-style:none;
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1)), to(rgba(255,255,255, .5))
  );
  border-radius:50%;
}

fieldset[data-name="radio"] label:first-child{
  border-radius:10px 10px 0 0;
}

fieldset[data-name="radio"] label:last-child{
  border-radius:0 0 10px 10px;
  border-bottom-style:solid;
}




fieldset[data-name="select"]{
  display:block;
  width:400px;
  height:44px;
}

fieldset[data-name="select"] label,
fieldset[data-name="select"] select{
  display:block;
  width:400px;
  height:44px;
  line-height:44px;
  text-indent:32px;
  border-radius: 22px;
  background-color:rgb(50,50,50);
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(85, 85, 85)), to(rgb(50,50,50))
  );
  -webkit-appearance: none;

}
fieldset[data-name="select"] select{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  z-index:2;
}


fieldset[data-name="select"] span.icon{
  position:absolute;
  right:0;
  top:0;
  display:inline-block;
  content:".";
  width:24px;
  height:24px;
  margin:10px 10px;
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, .8)), to(rgba(0,0,0,.2))
  );
  border-radius:50%;
}
fieldset[data-name="select"] span.icon:before{
  position:absolute;
  right:0;
  top:0;
  display:inline-block;
  content:">";
  font-size:18px;
  font-family:fantasy;
  font-weight:bold;
  text-shadow: rgba(0, 0, 0, .5) 0px -1px 1px;
  color:#ffffff;
  width:24px;
  height:24px;
  line-height:24px;
  text-align:center;
  -webkit-transform:rotate(90deg) scaleY(1.5);
}




select,
fieldset label,
fieldset .handle{
  display:block;
  border:1px solid #000000;
  background-color:rgb(50,50,50);
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(85, 85, 85)), to(rgb(50,50,50))
  );
  cursor:pointer;
  color:#ffffff;
  font-size:18px;
  font-weight:bold;
  box-shadow: rgba(255, 255, 255, .5) 0px 1px 1px 0px inset;
  text-shadow: rgba(0, 0, 0, .5) 0px -1px 1px;
}
fieldset label.hover,
fieldset label:hover,
fieldset .handle:hover{
  background-color:rgb(64,64,64);
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(128,128,128)), to(rgb(64,64,64))
  );
}
fieldset label.active,
fieldset label:active,
fieldset .handle:active{
  background-color:rgb(85, 85, 85);
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(50,50,50)), to(rgb(85, 85, 85))
  );
}

fieldset label.checked{
  background-color:rgb(83, 147, 197);
  background-image:-webkit-gradient(
    linear, 0% 0%, 0% 100%, from(rgb(133, 186, 228)), to(rgb(83, 147, 197))
  );
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-form/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。