源代码如下：
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>