18 表单与输入元素之提交与重置按钮

在上一章中,我们探讨了输入元素的各种类型及其用法。在本章中,我们将聚焦于表单中的“提交按钮”和“重置按钮”。这两个按钮是任何网页交互的核心部分,帮助用户提交他们填写的信息或重置表单内容。

提交按钮

提交按钮用于将表单数据发送到服务器。通常,这个按钮的类型设置为 submit。当用户点击该按钮时,浏览器将收集表单中所有输入元素的数据,并将其发送到指定的目标 URL。

基本示例

下面是一个简单的示例,展示了如何创建一个包含提交按钮的表单:

1
2
3
4
5
6
7
8
9
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>

<label for="email">电子邮箱:</label>
<input type="email" id="email" name="email" required>

<button type="submit">提交</button>
</form>

在这个例子中,<form> 元素包含了两个输入字段:用户名和电子邮箱。提交按钮使用了 <button> 元素,当用户点击时,表单数据将被发送到 /submitmethod 属性定义了数据发送的方式,这里使用的是 POST,意味着数据将包含在请求体中。

返回值

当表单提交成功后,用户将被重定向到一个新的页面,或者在同一页面上显示一条成功消息。处理这些数据的后端逻辑通常会涉及到数据验证和存储等操作。

重置按钮

重置按钮的作用是清空用户在表单中填写的所有数据。它的类型设置为 reset。点击重置按钮后,表单中所有输入元素都将恢复到它们的初始值。

基本示例

以下是一个包含重置按钮的表单示例:

1
2
3
4
5
6
7
8
9
10
<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>

<label for="email">电子邮箱:</label>
<input type="email" id="email" name="email" required>

<button type="submit">提交</button>
<button type="reset">重置</button>
</form>

在这个例子中,我们添加了一个重置按钮。当用户点击“重置”时,所有输入字段将清空,恢复为默认状态。

自定义按钮样式

在实际应用中,我们常常需要自定义按钮的样式。可以通过 CSS 来实现。如下面的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色字体 */
padding: 10px 15px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 5px; /* 圆角 */
}

button:hover {
background-color: #45a049; /* 悬停时的背景颜色 */
}
</style>

<form action="/submit" method="post">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>

<label for="email">电子邮箱:</label>
<input type="email" id="email" name="email" required>

<button type="submit">提交</button>
<button type="reset">重置</button>
</form>

在这个示例中,button 元素具有自定义的背景颜色、文本颜色、内边距、边框和圆角效果。悬停时的背景色也进行了更改,使得用户体验更佳。

总结

在本章中,我们学习了如何创建和使用表单中的提交和重置按钮。submit 按钮用于将表单数据发送至服务器,而 reset 按钮则用于清空表单。在实际开发中,我们通常还会使用 CSS 来美化这些按钮,以提供更友好的用户体验。

接下来,我们将进入第七章,探讨 CSS基础CSS简介,我们将学习如何使用 CSS 来增强网页的样式和布局。

18 表单与输入元素之提交与重置按钮

https://zglg.work/html-zero/18/

作者

IT教程网(郭震)

发布于

2024-08-10

更新于

2024-08-11

许可协议

分享转发

交流

更多教程加公众号

更多教程加公众号

加入星球获取PDF

加入星球获取PDF

打卡评论