ユーザーのためのインタラクティブフォーム

Question

私はフォームのロットを1つずつ順番に並べることを含むアプリケーションを作成しています。

ウィザードやフォームを作成するより良い方法を教えてもらえますか？私が現在使っているブートストラップ・モーダル以外のものはありますか？

このようなフォームが使用されるUIの例をいくつか教えてください。

Answer 1

HTML

<div class="container"> 
    <div class="row"> 
     <section> 
     <div class="wizard"> 
      <div class="wizard-inner"> 
       <div class="connecting-line"></div> 
       <ul class="nav nav-tabs" role="tablist"> 

        <li role="presentation" class="active"> 
         <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1"> 
          <span class="round-tab"> 
           <i class="glyphicon glyphicon-folder-open"></i> 
          </span> 
         </a> 
        </li> 

        <li role="presentation" class="disabled"> 
         <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2"> 
          <span class="round-tab"> 
           <i class="glyphicon glyphicon-pencil"></i> 
          </span> 
         </a> 
        </li> 
        <li role="presentation" class="disabled"> 
         <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3"> 
          <span class="round-tab"> 
           <i class="glyphicon glyphicon-picture"></i> 
          </span> 
         </a> 
        </li> 

        <li role="presentation" class="disabled"> 
         <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> 
          <span class="round-tab"> 
           <i class="glyphicon glyphicon-ok"></i> 
          </span> 
         </a> 
        </li> 
       </ul> 
      </div> 

      <form role="form"> 
       <div class="tab-content"> 
        <div class="tab-pane active" role="tabpanel" id="step1"> 
         <h3>Step 1</h3> 
         <p>This is step 1</p> 
         <ul class="list-inline pull-right"> 
          <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> 
         </ul> 
        </div> 
        <div class="tab-pane" role="tabpanel" id="step2"> 
         <h3>Step 2</h3> 
         <p>This is step 2</p> 
         <ul class="list-inline pull-right"> 
          <li><button type="button" class="btn btn-default prev-step">Previous</button></li> 
          <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> 
         </ul> 
        </div> 
        <div class="tab-pane" role="tabpanel" id="step3"> 
         <h3>Step 3</h3> 
         <p>This is step 3</p> 
         <ul class="list-inline pull-right"> 
          <li><button type="button" class="btn btn-default prev-step">Previous</button></li> 
          <li><button type="button" class="btn btn-default next-step">Skip</button></li> 
          <li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li> 
         </ul> 
        </div> 
        <div class="tab-pane" role="tabpanel" id="complete"> 
         <h3>Complete</h3> 
         <p>You have successfully completed all steps.</p> 
        </div> 
        <div class="clearfix"></div> 
       </div> 
      </form> 
     </div> 
    </section> 
    </div> 
</div> 




.wizard { 
    margin: 20px auto; 
    background: #fff; 
} 

    .wizard .nav-tabs { 
     position: relative; 
     margin: 40px auto; 
     margin-bottom: 0; 
     border-bottom-color: #e0e0e0; 
    } 

    .wizard > div.wizard-inner { 
     position: relative; 
    } 

.connecting-line { 
    height: 2px; 
    background: #e0e0e0; 
    position: absolute; 
    width: 80%; 
    margin: 0 auto; 
    left: 0; 
    right: 0; 
    top: 50%; 
    z-index: 1; 
} 

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus { 
    color: #555555; 
    cursor: default; 
    border: 0; 
    border-bottom-color: transparent; 
} 

span.round-tab { 
    width: 70px; 
    height: 70px; 
    line-height: 70px; 
    display: inline-block; 
    border-radius: 100px; 
    background: #fff; 
    border: 2px solid #e0e0e0; 
    z-index: 2; 
    position: absolute; 
    left: 0; 
    text-align: center; 
    font-size: 25px; 
} 
span.round-tab i{ 
    color:#555555; 
} 
.wizard li.active span.round-tab { 
    background: #fff; 
    border: 2px solid #5bc0de; 

} 
.wizard li.active span.round-tab i{ 
    color: #5bc0de; 
} 

span.round-tab:hover { 
    color: #333; 
    border: 2px solid #333; 
} 

.wizard .nav-tabs > li { 
    width: 25%; 
} 

.wizard li:after { 
    content: " "; 
    position: absolute; 
    left: 46%; 
    opacity: 0; 
    margin: 0 auto; 
    bottom: 0px; 
    border: 5px solid transparent; 
    border-bottom-color: #5bc0de; 
    transition: 0.1s ease-in-out; 
} 

.wizard li.active:after { 
    content: " "; 
    position: absolute; 
    left: 46%; 
    opacity: 1; 
    margin: 0 auto; 
    bottom: 0px; 
    border: 10px solid transparent; 
    border-bottom-color: #5bc0de; 
} 

.wizard .nav-tabs > li a { 
    width: 70px; 
    height: 70px; 
    margin: 20px auto; 
    border-radius: 100%; 
    padding: 0; 
} 

    .wizard .nav-tabs > li a:hover { 
     background: transparent; 
    } 

.wizard .tab-pane { 
    position: relative; 
    padding-top: 50px; 
} 

.wizard h3 { 
    margin-top: 0; 
} 

@media(max-width : 585px) { 

    .wizard { 
     width: 90%; 
     height: auto !important; 
    } 

    span.round-tab { 
     font-size: 16px; 
     width: 50px; 
     height: 50px; 
     line-height: 50px; 
    } 

    .wizard .nav-tabs > li a { 
     width: 50px; 
     height: 50px; 
     line-height: 50px; 
    } 

    .wizard li.active:after { 
     content: " "; 
     position: absolute; 
     left: 35%; 
    } 
} 




$(document).ready(function() { 
    //Initialize tooltips 
    $('.nav-tabs > li a[title]').tooltip(); 

    //Wizard 
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 

     var $target = $(e.target); 

     if ($target.parent().hasClass('disabled')) { 
      return false; 
     } 
    }); 

    $(".next-step").click(function (e) { 

     var $active = $('.wizard .nav-tabs li.active'); 
     $active.next().removeClass('disabled'); 
     nextTab($active); 

    }); 
    $(".prev-step").click(function (e) { 

     var $active = $('.wizard .nav-tabs li.active'); 
     prevTab($active); 

    }); 
}); 

function nextTab(elem) { 
    $(elem).next().find('a[data-toggle="tab"]').click(); 
} 
function prevTab(elem) { 
    $(elem).prev().find('a[data-toggle="tab"]').click(); 
} 

コード：http://bootsnipp.com/snippets/featured/form-wizard-using-tabs

Answer 2

ここに完全なDEMOがあります。フォームの検証には、クリック機能で共通の検証スクリプトを作成する必要があります。これは、ブートストラップタブを使用しています。

$(document).ready(function(){ 
 
      $(".showMenu").on("click", function (e) { 
 

 
      var nextTabToShow = $(this).attr("data-nextbtn"); 
 
      $('a[href="#' + nextTabToShow + '"]').trigger('click') 
 

 

 
      }); 
 
      $('a[data-toggle="tab"]').on('hide.bs.tab', function (e) { 
 
      var $old_tab = $($(e.target).attr("href")); 
 
      var $new_tab = $($(e.relatedTarget).attr("href")); 
 

 
      if ($new_tab.index() < $old_tab.index()) { 
 
      $old_tab.css('position', 'relative').css("right", "0").show(); 
 
      $old_tab.animate({ "right": "-100%" }, 300, function() { 
 
       $old_tab.css("right", 0).removeAttr("style"); 
 
      }); 
 
     } 
 
     else { 
 
      $old_tab.css('position', 'relative').css("left", "0").show(); 
 
      $old_tab.animate({ "left": "-100%" }, 300, function() { 
 
       $old_tab.css("left", 0).removeAttr("style"); 
 
      }); 
 
     } 
 
    }).on('show.bs.tab', function (e) { 
 
     var $new_tab = $($(e.target).attr("href")); 
 
     var $old_tab = $($(e.relatedTarget).attr("href")); 
 

 
     if ($new_tab.index() > $old_tab.index()) { 
 
      $new_tab.css('position', 'relative').css("right", "-2500px"); 
 
      $new_tab.animate({ "right": "0" }, 500); 
 
     } 
 
     else { 
 
      $new_tab.css('position', 'relative').css("left", "-2500px"); 
 
      $new_tab.animate({ "left": "0" }, 500); 
 
     }   
 
    }); 
 

 
    })

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    <div class="container"> 
 
     <ul class="nav nav-tabs hidden" role="tablist"> 
 
     <li role="presentation" class="active"> 
 
      <a href="#1" aria-controls="1" role="tab" data-toggle="tab"></a> 
 
     </li> 
 
     <li role="presentation"> 
 
      <a href="#2" aria-controls="2" role="tab" data-toggle="tab"></a> 
 
     </li> 
 
     <li role="presentation"> 
 
      <a href="#3" aria-controls="3" role="tab" data-toggle="tab"></a> 
 
     </li> 
 
     </ul> 
 
     <div class="tab-content"> 
 
     <div role="tabpanel" class="tab-pane active" id="1"> 
 
      <h4>Step 1</h4> 
 
      <div class="text-center"> 
 
      <button type="button" class="btn continue showMenu" data-nextbtn="2"> 
 
       Continue <i class="fa fa-angle-right" aria-hidden="true"></i> 
 
      </button> 
 
      </div> 
 
     </div> 
 

 
     <div role="tabpanel" class="tab-pane" id="2"> 
 
      <h4>Step 2</h4> 
 
      <div class="text-center"> 
 
      <button type="button" class="btn continue showMenu" data-nextbtn="3"> 
 
       Continue <i class="fa fa-angle-right" aria-hidden="true"></i> 
 
      </button> 
 
      <button type="button" class="btn back showMenu" data-nextbtn="1"> 
 
       <i class="fa fa-angle-left" aria-hidden="true"></i> Back 
 
      </button> 
 
      </div> 
 
     </div> 
 

 
     <div role="tabpanel" class="tab-pane" id="3"> 
 
      <h4>Step 3</h4> 
 
      <div class="text-center"> 
 
      <button type="button" class="btn continue"> 
 
       Submit 
 
      </button> 
 
      <button type="button" class="btn back showMenu" data-nextbtn="2"> 
 
       <i class="fa fa-angle-left" aria-hidden="true"></i> Back 
 
      </button> 
 
      </div> 
 
     </div> 
 

 

 
     </div> 
 
    </div>