在HTML中，<input type="reset">是一个表单控件，它用于重置表单中的所有输入字段到它们的初始值，这个元素通常用于当用户点击“重置”按钮时，清空表单中的所有数据，下面我们详细介绍一下<input type="reset">的使用方法和相关属性。
使用方法
1、在HTML表单中添加<input type="reset">标签：
<form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <br> <label for="password">密码：</label> <input type="password" id="password" name="password"> <br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
2、<input type="reset">标签会自动应用默认样式，无需设置CSS样式，如果需要自定义样式，可以使用其他标签(如<button>)包裹<input type="reset">,并设置相应的样式。
相关属性
1、disabled属性：禁用或启用表单控件，默认情况下，<input type="reset">是启用的，如果需要禁用它，可以在<input>标签中添加disabled属性。
<input type="reset" disabled>
2、value属性：设置表单控件的提示文本，默认情况下，提示文本为空。
<input type="reset" value="点击此处重置表单">
3、style属性：设置表单控件的样式。
<input type="reset" style="width: 50px; height: 30px;">
相关问题与解答
1、如何使用JavaScript在点击“重置”按钮时清空表单数据？
答：可以使用以下JavaScript代码实现：
document.querySelector('form').addEventListener('reset', function() {
this.querySelectorAll('input').forEach(function(input) {
input.value = '';
});
});
这段代码会在表单被重置时遍历所有输入框，并将它们的值设置为空字符串。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/222772.html
微信扫一扫 