HTML 重置按钮-html教程-PHP中文网

HTML 重置按钮的语法

1.输入标签

2.按钮标签

实现 HTML 重置按钮的示例

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

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

结论

首页

web前端

html教程

HTML 重置按钮

王林

Sep 04, 2024 pm 04:42 PM

html html5 HTML Tutorial HTML Properties HTML tags

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

HTML 重置按钮的语法

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

1.输入标签

语法：

<input type = "reset">

登录后复制

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

2.按钮标签

语法：

<button type = "reset">

登录后复制

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

实现 HTML 重置按钮的示例

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

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

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "form-data">
<div class = "heading">
<h2> 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>
</body>
</html>

登录后复制

输出：

HTML 重置按钮

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

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

代码：

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "form-data">
<div class = "heading">
<h2> 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>
</body>
</html>

登录后复制

输出：

HTML 重置按钮

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