html中form表单提交和阻止表单提交的细节
用户投稿 学习笔记 13阅读
如何阻止表单提交
HTML禁止表单提交方法
源代码如下：
form2.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表单提交知识点</title><link rel="stylesheet" type="text/css" href="../css/body.css" /><link rel="stylesheet" type="text/css" href="../css/mark.css" /><link rel="stylesheet" type="text/css" href="../css/input2.css" /><link rel="stylesheet" type="text/css" href="../css/console.css" /></head><body><h1>表单提交知识点</h1><form id="form1" action="/ajax/form"><input type="text" name="age" value="16" /><br /><br /><input id="submit22" type="submit" onclick="return fn();" value="提交表单" /><p>注意：在表单中写这种button标签，默认也是提交整个表单。</p><p>button标签的type属性有3个值：button和submit和reset。当不写type属性时，其type的默认值是submit，点击的话也会直接提交表单。</p><button type="submit">提交表单(button标签提交整个表单，效果和input标签的type="submit"一样)</button><br /><br /><p>以下这三种方式都能提交表单，效果一样</p><input type="submit" value="提交表单(方式1)"><button type="submit">提交表单(方式2)</button><button>提交表单(方式3)</button><br /><br /><button>提交表单(button标签的type属性不写时，其type属性的默认值是submit，即默认也是提交整个表单)</button></form><br /><br /><p>input标签设置type="submit"后直接可以提交表单，form标签的onsubmit属性通过函数的返回值来决定是否提交表单。(即可以在form中添加onsubmit属性，让提交的返回值为false或true，这样就能控制表单是否提交，如果onsubmit="return false;"表单不会提交，如果onsubmit="return true;"表单会提交。)</p><p>form标签上加了onsubmit属性，它会在"提交"按钮点击的时候被触发，该属性一定要有return返回值，如果返回值为false则不提交表单，如果为true则提交表单。</p><form id="form2" action="/ajax/form" onsubmit="return fn();"><input type="text" name="age" value="18" /><br /><br /><input id="submit23" type="submit" value="提交表单" /></form><br /><br /><p>form中添加onsubmit属性,onsubmit="return false;"表单不会提交。</p><form id="form3" action="/ajax/form" onsubmit="return false;"><input type="text" name="age" value="23" /><br /><br /><input id="submit24" type="submit" value="提交表单" /></form><br /><br /><p>form中添加onsubmit属性,onsubmit="return true;"表单会提交。</p><form id="form4" action="/ajax/form" onsubmit="return true;"><input type="text" name="age" value="25" /><br /><br /><input id="submit25" type="submit" value="提交表单" /></form><br /><br /><p>form中添加onsubmit属性,onsubmit=""表单会提交。</p><form id="form5" action="/ajax/form" onsubmit=""><input type="text" name="age" value="27" /><br /><br /><input id="submit26" type="submit" value="提交表单" /></form><br /><br /><p>form中的input标签的type="submit"，与此同时，该input标签绑定onclick事件，在onclick事件中返回false或true(返回false,不会提交表单，返回true，会提交表单).</p><form id="form6" action="/ajax/form"><input type="text" name="age" value="12" /><br /><br /><input id="submit666" type="submit" value="提交表单" /></form><br /><br /><p>form中的input标签的type="submit"，与此同时，设置该form的onsubmit=函数(非匿名函数)，在函数中返回false或true(返回false,不会提交表单，返回true，会提交表单).</p><form id="form7" action="/ajax/form"><input type="text" name="age" value="5" /><br /><br /><input id="submit888" type="submit" value="提交表单" /></form><br /><br /><p>form中的input标签的type="submit"，与此同时，设置该form的onsubmit=函数(匿名函数)，在函数中返回false或true(返回false,不会提交表单，返回true，会提交表单).</p><form id="form8" action="/ajax/form"><input type="text" name="age" value="36" /><br /><br /><input id="submit892" type="submit" value="提交表单" /></form><br /><br /><p>form表单提交(input标签的type="button"，如何才能提交表单?)给input标签的type='button'添加onclick事件，验证通过则调用submit()方法提交,没通过验证则返回false(即return false;)<br />input标签的type='button'并且绑定onclick事件</p><form id="form9" action="/ajax/form"><input type="text" name="age" value="9" /><br /><br /><input id="button999" type="button" value="input标签的type='button'(普通按钮如何提交表单)" /></form><br /><br /><p>form表单提交(input标签的type="button"，如何才能提交表单?)给input标签的type='button'添加onclick事件，验证通过则调用submit()方法提交,没通过验证则返回false(即return false;)<br />input标签的type='button'并且onclick="test();"</p><form id="form10" action="/ajax/form"><input type="text" name="age" value="68" /><br /><br /><input id="button1225" type="button" onclick="test();" value="input标签的type='button'(普通按钮如何提交表单)" /></form><br /><br /></body><script type="text/javascript">function fn() {alert('猜猜我会不会提交表单呢？');// return true;// 验证表单数据是否符合条件，不符合返回false，false就是禁止提交表单return false;}var submitObj = document.getElementById('submit666');submitObj.onclick = function() {alert('你们猜猜我会不会提交表单呢？哈哈......');// return true;return false;}var formobj = document.getElementById('form7');//formobj.onsubmit=非匿名函数formobj.onsubmit = function abc() {alert('大家猜猜我会不会提交表单呢？呵呵呵呵......');// return true;return false;}var formobj = document.getElementById('form8');//formobj.onsubmit=匿名函数formobj.onsubmit = function() {alert('你们猜一下，我会不会提交表单呢？嘻嘻嘻......');// return true;return false;}var buttonObj = document.getElementById('button999');//给input标签的type='button'添加onclick事件，验证通过则调用submit()方法提交buttonObj.onclick = function() {alert('大伙猜猜我会不会提交表单呢？啾啾啾啾啾啾啾啾......');// if(写你要判断的东西){// //不提交表单// return false;// }var formObj = document.getElementById('form9');formObj.submit();//提交表单}function test() {alert('猜猜我会不会提交表单呢？呦呦呦呦呦呦......');// if(写你要判断的东西){// //不提交表单// return false;// }var formElement = document.getElementById('form10');formElement.submit();//提交表单}</script></html>
标签：