搜索表单格式

时间:2017-06-22 14:21:29

标签: html bootstrap-4

这里的新功能,尝试使用一些选项创建一个搜索表单,但它们的格式不是很好 - 任何帮助都会非常感激。还有,第一个 如果在提交后有意义,则不会清除多选。

提前感谢,新手。

我的代码如下,我试图将类别/第二类别组合在一起但根本不工作。

<div class = "panel panel-default">
 <div class = "panel-heading">
       <i class="fa fa-search fa-2x pull-left"></i> Module Search</h3>
      <small>Retrieve a list modules using the search criteris below.
    </small>
 </div> <!--end of panel title-->
<div class = "panel-body">
 <div class="row">
   <div class="col-sm-12">
      <form role="search" name="search_form" action="">
          <div class = "input-group">
                 <input type="text" class="form-control " style="postion: 
                  relative; display: inline-block;" id="search_id" 
                  name="KEYWORD"  placeholder="Enter your search">     
             <div class="input-group-addon">
             <button type="submit"><i class="fa fa-search"></i></button>
             </div>
          </div>
  </div>
 </div>   
<!--search -->
<div class="container">
  <div class="row" style="margin-top: 10px; padding-top: 15px;">              
      <div class="form-group">
          <div class="col-sm-2 col-md-6">
          <select name=SOURCE id="SOURCE" multiple="multiple"><option 
             value="X"></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>                  
           <label for = "SOURCE"SOURCE</label>                 
           <label for = "NAME">NAME</label>
            <select name=NAME id="NAME"><option value="X"></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>                                         
         Address only Only <input type="hidden" name="ADDRESS" value="X" /> 
                 <input type="checkbox" name="ADDRESS" value="ON">
          </div><!-- end of col -->
         </div> <!--end of form group --> 
       <div class="col-sm-2 col-md-6">
          <label for = "CATEGORY">  Category</label>
           <select name="CATEGORY" id ="CATEGORY">
            <option></option>
            <option value="MED">Medicine</option> 
            <option value="NUR">Nursing</option> 
           </select>                       
      </div> <!--end of col -->
 </div> <!-- end of row -->
 <div class="row">
     <div class="col-sm-6 col-sm-offset-6" >
              <label for = "Sub Category"> Category 2 </label>
              <select id="SUB" style="width: 200px;"></select>
      </div> <!--end of col-->     
   </div> <!-- end of row-->
</div> <!--end of container -->
 </form>
 </div><!--end of panel body-->
 </div> <!--end of panel-->

0 个答案:

没有答案