是一个常见的前端开发需求,可以通过以下几种方式实现:
value
属性将表单元素的值设置为空。示例代码:
document.getElementById("clearButton").addEventListener("click", function() {
document.getElementById("myForm").reset();
});
reset
按钮:HTML的reset
按钮可以直接将表单中的所有输入字段重置为默认值。只需要在表单中添加一个type="reset"
的按钮即可。示例代码:
<form id="myForm">
<!-- 表单字段 -->
<input type="text" name="name" value="John Doe">
<input type="email" name="email" value="johndoe@example.com">
<!-- 清除按钮 -->
<input type="reset" value="清除">
</form>
示例代码(使用Vue.js):
<template>
<form>
<!-- 表单字段 -->
<input type="text" v-model="name">
<input type="email" v-model="email">
<!-- 清除按钮 -->
<button @click="clearForm">清除</button>
</form>
</template>
<script>
export default {
data() {
return {
name: 'John Doe',
email: 'johndoe@example.com'
};
},
methods: {
clearForm() {
this.name = '';
this.email = '';
}
}
};
</script>
以上是清除表单中的值的几种常见方法。根据具体的开发需求和使用的技术栈,可以选择适合的方法来实现。
领取专属 10元无门槛券
手把手带您无忧上云