a 和 button

像 button 的原始目的就是一个通用的按钮，点击后应该触发  JavaScript， 没有其它附带的隐含的附加效果；
<a> 标签的隐含附带效果就是跳转页面到其它地方，而提交表单时应该有一个隐含附带的让浏览器触发提交表单的效果，

它就与 button 默认的行为不一样了。所以我们根据这点来区分我们应该用 button 还是用 input 或 a 标签。

今天遇到一个难题，代码如下， 不管我怎么弄，点击“增加”按钮，都不会复制表单，准确的说是表单只是闪现一下，console却能得到想要的复制表单效果，最后试着把button改成a, 结果就出来了。。。。。

 <form class="form-horizontal">


              <div class="form-group">
                <label for="inputPassword3" class="col-sm-3 control-label">Membership Card:</label>
                <div class="col-sm-9 col-xs-12" id="big-box" style="padding-left: 0px;">
                <div class="col-sm-12 col-xs-12" id="small-box" style="padding-left: 0px;">
                <div class="col-sm-3 col-xs-7" style="padding-right: 0px;">
                  <select class="form-control" name="Cardss">
                    <option value="SingleCard">Single Card</option>
                    <option value="MonthCard">Month Card</option>
                    <option value="SeasonCard">Season Card</option>
                    <option value="HalfyearCard">Half year Card</option>
                    <option value="AnnualCard">Annual Card</option>
                  </select>
                </div>
                <div class="col-sm-4 col-xs-3" style="padding-left: 0px;">
                  <input type="text" class="form-control" id="inputDate" placeholder="" name="ActivityPrices">
                </div>
                <div  class="col-sm-1 col-xs-1 " style="padding:0px;margin-top:5px;margin-left:-12px;font-size:14px;font-weight: bold;">RMB</div>


                <div class="col-sm-1 col-xs-1" style="padding: 0px;margin-left: -20px;">
                  <a type="button" style="padding: 0px; background:#fff;border-radius:16px;border:2px solid #fff;"><img id="add" src="__PUBLIC__/Home/img/Add.png"><img id="delete" src="__PUBLIC__/Home/img/delete.png" style="display: none;"></a>
                </div>
              </div>
              </div>
             </div>




              <div class="form-group">
                <label for="inputNumber" class="col-sm-2 col-sm-offset-1 control-label"></label>
                <div class="col-sm-6 col-xs-6 col-sm-offset-2 col-xs-offset-4" style="margin-top:10px;">
                  <a type="button" class="btn btn-primary" id="Release" >Release </a>
                </div>
              </div>
               
     
            </form>

<script language="javascript"> 


       
       $(function(){ 
        
        $("#add").click(function(){ 
           $("#small-box").clone(true).appendTo("#big-box")
           .find("input").val("")
            .end().find("img").toggle();
       });
       




        $("#delete").click(function(){
          var self = $(this);
        self.closest("#small-box").remove();


        });
    
       $("#Release").click(function(){
            var dd = new Array();
            var cc = document.getElementsByName("Cardss");
            var aa = document.getElementsByName("ActivityPrices");
            for(var j=0;j<cc.length;j++){
                var mm = cc[j].value;
                var pp = aa[j].value;
                if(pp !=""){
                dd.push(mm);
           
                 }
               }
            
                  console.log(dd);
    
       });






    });
             


         


</script>