HTML 重置按钮

在浏览器中填写表单时，为用户提供在 Web 表单上执行多项操作的灵活性非常重要。一种称为重置的特殊类型按钮允许重置用户输入的表单中的值。该按钮为用户提供了执行重置操作的灵活性。该按钮基本上会清除用户在同一表单上输入的所有数据。重置后，表单将填充默认值。本文将介绍重置按钮在多种场景下的使用方法以及使用方法。

HTML 重置按钮的语法

重置操作可以在上定义标签或 标签。这些标签上使用 type 属性来定义它，并将值“reset”传递给它。

1.输入标签

语法：

<input type="reset">

这里，Input是用于定义Input元素的标签，type是用于定义输入元素类型的属性。重置值是可以传递给此属性的值之一。

2.按钮标签

语法：

<button type="reset"></button>

重置是可以传递给 Button 元素的 type 属性的值之一。如前所述，这将重置表单。该标签支持的另外两个值是“button”和“submit”。

实现 HTML 重置按钮的示例

以下是 HTML 重置按钮的示例：

示例 #1 – 使用输入标签的重置按钮

代码：

<title>
Reset button in HTML
</title>
<style>
.form-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.form {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.form li {
margin: 12px 0 0 0;
list-style: none;
}
.form label {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.form .field {
width: 80%;
height: 20px;
}
.form input[ type = submit], .form input[ type = reset] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.form input[type = submit]:hover, .form input[ type = reset]:hover {
background: #2173f3;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>


<div class="form-data">
<div class="heading">
<h2 id="HTML-Reset-Button"> HTML Reset Button </h2>
<p> Click on reset button to reset the form data. </p>
</div>
<div>
<form action="#">
<ul class="form">
<li>
<label> First Name <span class="required"> * </span></label>
<input type="text" name="firstName" placeholder=" First name" class="field">
</li>
<li>
<label> Last Name <span class="required"> * </span></label>
<input type="text" name="lastName" placeholder=" Last name" class="field">
</li>
<li>
<label> Email <span class="required"> * </span></label>
<input type="email" name="field3" class="field">
</li>
<li>
<label> Message </label>
<textarea name="message" id="message" class="field-message"></textarea>
</li>
<li>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</li>
</ul>
</form>
</div>
</div>
<script type="text/javascript">
</script>

输出：

尝试在输入框中键入内容，如果不刷新单击重置按钮，输入的数据将被擦除。请注意，为了进行重置，我们不需要刷新页面；数据将在同一加载页面上动态清除。

示例 #2 – 使用按钮标签重置按钮

代码：

<title>
Reset button in HTML
</title>
<style>
.form-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.form {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.form li {
margin: 12px 0 0 0;
list-style: none;
}
.form label {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.form .field {
width: 80%;
height: 20px;
}
.form button[ type = submit], .form button[ type = reset] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.form button[type = submit]:hover, .form button[ type = reset]:hover {
background: #2173f3;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>


<div class="form-data">
<div class="heading">
<h2 id="HTML-Reset-Button"> HTML Reset Button </h2>
<p> Click on reset button to reset the form data. </p>
</div>
<div>
<form action="#">
<ul class="form">
<li>
<label> First Name <span class="required"> * </span></label>
<input type="text" name="firstName" placeholder=" First name" class="field">
</li>
<li>
<label> Last Name <span class="required"> * </span></label>
<input type="text" name="lastName" placeholder=" Last name" class="field">
</li>
<li>
<label> Email <span class="required"> * </span></label>
<input type="email" name="field3" class="field">
</li>
<li>
<label> Message </label>
<textarea name="message" id="message" class="field-message"></textarea>
</li>
<li>
<button type="reset" value="Reset"> Reset </button>
<button type="submit" value="Submit"> Submit </button>
</li>
</ul>
</form>
</div>
</div>
<script type="text/javascript">
</script>

输出：

注意： 重置按钮在放置在表单元素内时会自动工作。该表单内的重置按钮会自动与其关联。只有放置在表单标签内部的重置按钮才适用于该表单，而不是外部的重置按钮。另外，一个表单内可以放置多个重置按钮，并且这些重置按钮都将正常工作。建议谨慎使用重置按钮，因为用户有可能错误地单击重置按钮，并且用户将丢失所有输入的数据。

结论

HTML重置按钮提供了强大的功能，可以自动重置表单中输入的数据，而无需刷新网页。重置按钮通常在表单元素内使用。

以上是HTML 重置按钮的详细内容。更多信息请关注PHP中文网其他相关文章！