18 表单与输入元素之提交与重置按钮
在上一章中,我们探讨了输入元素的各种类型及其用法。在本章中,我们将聚焦于表单中的“提交按钮”和“重置按钮”。这两个按钮是任何网页交互的核心部分,帮助用户提交他们填写的信息或重置表单内容。
提交按钮
提交按钮用于将表单数据发送到服务器。通常,这个按钮的类型设置为 submit
。当用户点击该按钮时,浏览器将收集表单中所有输入元素的数据,并将其发送到指定的目标 URL。
基本示例
下面是一个简单的示例,展示了如何创建一个包含提交按钮的表单:
1 | <form action="/submit" method="post"> |
在这个例子中,<form>
元素包含了两个输入字段:用户名和电子邮箱。提交按钮使用了 <button>
元素,当用户点击时,表单数据将被发送到 /submit
。method
属性定义了数据发送的方式,这里使用的是 POST
,意味着数据将包含在请求体中。
返回值
当表单提交成功后,用户将被重定向到一个新的页面,或者在同一页面上显示一条成功消息。处理这些数据的后端逻辑通常会涉及到数据验证和存储等操作。
重置按钮
重置按钮的作用是清空用户在表单中填写的所有数据。它的类型设置为 reset
。点击重置按钮后,表单中所有输入元素都将恢复到它们的初始值。
基本示例
以下是一个包含重置按钮的表单示例:
1 | <form action="/submit" method="post"> |
在这个例子中,我们添加了一个重置按钮。当用户点击“重置”时,所有输入字段将清空,恢复为默认状态。
自定义按钮样式
在实际应用中,我们常常需要自定义按钮的样式。可以通过 CSS 来实现。如下面的示例:
1 | <style> |
在这个示例中,button
元素具有自定义的背景颜色、文本颜色、内边距、边框和圆角效果。悬停时的背景色也进行了更改,使得用户体验更佳。
总结
在本章中,我们学习了如何创建和使用表单中的提交和重置按钮。submit
按钮用于将表单数据发送至服务器,而 reset
按钮则用于清空表单。在实际开发中,我们通常还会使用 CSS 来美化这些按钮,以提供更友好的用户体验。
接下来,我们将进入第七章,探讨 CSS基础 之 CSS简介,我们将学习如何使用 CSS 来增强网页的样式和布局。
18 表单与输入元素之提交与重置按钮