首页 > 代码库 > 表单提交的按钮总结

表单提交的按钮总结

2024-08-18 00:49:25   221人阅读

1.input标签提交

1.1>input[type=submit]

<form name=”form” method=”post” action=”#">
    <input type=”submit” name=”btn” value=http://www.mamicode.com/”提交">
</form>


input的type属性是submit，会引发表单提交。
作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>‘提交‘;

1.2>input[type=button]
input的type属性还可以是button，这时它只是一个按钮，不会引发表单提交。


<form name=”form” method=”post” action=”#">
    <input type=”button” name=”btn” value=http://www.mamicode.com/”提交">
</form>

2.button[type=submit]
type的默认值是submit，所以点击一个button,会引起表单提交
button[type]在IE中的默认值是button，这意味着它只是一个按钮而不会引发表单提交,请注意设置type=submit来兼容IE。
button可以设置name和value,提交表单时，value会被作为表单数据提交给服务器


<form>
     <input type="text" name=‘name‘>
     <button>提交</button>
</form>

 
 
用法举例
1.input[type=button]类型的js或者jquery提交
1.1>js方法提交
<form method="post"  name="form1" action="/Mz_report/excel_report">
<input  type=‘button‘ value=http://www.mamicode.com/‘填报‘ onclick="show_confirm()">
</form>
 
function show_confirm(){  
    var result = confirm(‘请仔细确认填报数据是否正确，上报后不能修改‘);  
    if(result){  
        document.form1.submit();
    }else{  
        return false;
    }  
}
1.2>jquery方法提交,同时补充url地址
 
以下可以通过jquery将form表单提交到不同的/控制器/方法
<form method="post"  name="form1" id="searchForm" >
<input  type=‘button‘ value=http://www.mamicode.com/‘填报‘ id="report">
</form>
 
$(‘#report‘).click(function(){
        $(‘#searchForm‘).attr(‘action‘,‘/Mz_report/excel_report‘);
})
 
 
2.button也可以设置type=reset，此时点击按钮会导致表单被重置（这还挺有用的）
 
<form action="form_action.asp" method="get">
　　First name: <input type="text" name="fname" />
　　Last name: <input type="text" name="lname" />
　　<button type="submit" value="http://www.mamicode.com/Submit">Submit</button>
　　<button type="reset" value="http://www.mamicode.com/Reset">Reset</button>
</form>

表单提交的按钮总结


联系
我们