版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/w390058785/article/details/83302996
前言：form标签的妙用你知道哪些？
一、妙用一
第一点不用多说，基本都知道，可以直接通过form标签的action，method属性来设置表单提交地址，跟提交方式。
<form action="register.php" method="get">
用户名：<input type="text" name="userName" value=""/><br />
密码：<input type="text" name="password"/><br />
确认密码：<input type="text" name="rPassword"/>
<button>提交</button>
</form>
<form action="register.php" method="post">
用户名：<input type="text" name="userName" value=""/><br />
密码：<input type="text" name="password"/><br />
确认密码：<input type="text" name="rPassword"/>
<button>提交</button>
</form>这里有个缺陷是没办法直接获取到表单提交后的回调
二、妙用二
form标签节点对象可以直接通过name属性来获取其内部表单元素对象。
<body>
<form id="form">
<input type="text" name="abc" value="默认值"/><br />
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br />
<select name="number">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>
</form>
<script>
var oForm = document.getElementById('form');
console.log(oForm.abc.value);
console.log(oForm.sex.value);
console.log(oForm.number.value);
oForm.abc.style.background = 'pink'
</script>
</body>运行结果
这里直接通过name属性的值来获取到表单元素的值和修改表单元素的样式。这里为什么要强调是表单元素，而不是所有元素，因为无法通过name属性获取到其他标签元素DOM节点对象。
<body>
<form id="form">
<input type="text" name="abc" value="默认值"/><br />
<div name="box">box</div>
</form>
<hr />
<div id="box">
<input type="text" name="abc" value="默认值"/><br />
<div name="box">box</div>
</div>
<script>
var oForm = document.getElementById('form');
console.log(oForm.abc.value);
console.log(oForm.box.innerHTML);
</script>
<script>
var oBox = document.getElementById('box');
console.log(oBox.abc.value);
console.log(oBox.box.innerHTML);
</script>
</body>运行结果
从上面例子可以看到，form标签中才能通过name属性进行获取元素的DOM节点对象，并且只能是表单元素。
三、妙用三
只要是在form标签里面的<button>，<input type="button">，<input type="submit">元素，不管有没有添加事件，都会触发表单提交，造成页面跳转或者页面刷新。(可以通过取消默认事件或者return false来取消默认表单提交)。
这是form标签的妙用，也是个易犯错的陷阱。
<body>
<form id="form">
用户名：<input type="text" name="userName" value=""/><br />
密码：<input type="text" name="password"/><br />
确认密码：<input type="text" name="rPassword"/>
<button>提交</button>
</form>
<script>
var oForm = document.getElementById('form');
oForm.onsubmit = function(){
if(this.userName.value === ''){
console.log('用户名不能为空');
return false;
}
if(this.password.value.length < 6){
console.log('密码长度不能少于6位');
return false;
}
if(this.password.value !== this.rPassword.value){
console.log('两次输入的密码不相同');
return false;
}
//ajax.............
return false;
};
</body>