浏览 55
扫码
重置按钮是HTML 5表单中的一种按钮,用于将表单中的所有字段重置为它们的初始值。在用户点击重置按钮时,表单中的所有输入字段将被清空,并且表单将返回到最初状态。
要在表单中添加重置按钮,您可以使用以下的HTML代码:
<form>
<!-- 表单字段 -->
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<!-- 重置按钮 -->
<input type="reset" value="重置">
</form>
在上面的示例中,我们在表单中添加了一个重置按钮,它的类型是"reset",并且显示的文本是"重置"。当用户点击这个按钮时,表单字段中的数据将被清空。
另外,您还可以通过CSS样式来美化重置按钮,例如改变按钮的颜色、大小、边框等等。以下是一个示例:
<style>
input[type="reset"] {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
通过上面的CSS代码,我们将重置按钮的背景颜色设为红色,文字颜色设为白色,设置了一些内边距、边框和圆角,还修改了鼠标指针样式,使其在悬停时变成手型。
总的来说,重置按钮是一个很方便的功能,可以允许用户在填写表单时有机会清空所有已填写的数据,返回到最初状态。您可以根据具体的设计需求来改变重置按钮的样式和行为。