html表单重置设置

发表于 | 分类于 | 评论数： | 阅读次数：

背景

在表单设置中，一般会有一个重置按钮。可以通过以下两种方式实现，不过在使用上还是一定的区别。

通过type="reset"实现

实现代码：

1
2
3
4
5
6
7
<form id="searchForm" name="searchForm" action="/firewall/search" method="post" role="form">
	...
	<input type="text" class="form-control form-item" id="input" name="input" value=""/>
	...
	<button type="submit" class="btn btn-default">搜索</button>
	<button type="reset" class="btn btn-danger">重置</button>
</form>

注意：通过此方式仅能恢复到表单默认初始状态。若某个表单内容初始状态并非空值，那么重置后也不是空值。

通过onclick实现

实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form id="searchForm" name="searchForm" action="/firewall/search" method="post" role="form">
	...
	<input type="text" class="form-control form-item" id="input" name="input" value=""/>
	...
	<button type="submit" class="btn btn-default">搜索</button>
	<button type="button" class="btn btn-danger" onclick="formReset()">重置</button>
</form>

...

<script>
function formReset() {
	document.getElementById('input').value = ''
	...
}
</script>

通过该方式重置，可以对参数进行更多的配置，而非仅仅还原为初始状态。

如果同时配置reset和onclick呢？

通过设置type="reset"即可实现，如果设置了reset的type类型后，又设置了onclick。如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form id="searchForm" name="searchForm" action="/firewall/search" method="post" role="form">
	...
	<input type="text" class="form-control form-item" id="input" name="input" value=""/>
	...
	<button type="submit" class="btn btn-default">搜索</button>
	<button type="reset" class="btn btn-danger" onclick="formReset()">重置</button>
</form>


<script>
function formReset() {
	document.getElementById('input').value = ''
	...
}
</script>

那么会先执行onclick的内容，然后再进行reset，所以其实相当于仅仅进行了reset。

特殊场景

一般当一些搜索表单提交，提交后，后台会将表单参数返回保留在表单中，便于修改。

这样在提交后自动刷新的页面的初始表单参数并非全为空值。那么就建议通过使用onclick的方式进行重置。使用reset来设置的话，就会回到上次提交参数。

拓展

reset type介绍：http://www.w3school.com.cn/tags/att_button_type.asp