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

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

提交按钮

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

基本示例

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

<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> 元素，当用户点击时，表单数据将被发送到 /submit。method 属性定义了数据发送的方式，这里使用的是 POST，意味着数据将包含在请求体中。

返回值

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

重置按钮

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

基本示例

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

<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 来实现。如下面的示例：

<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 来增强网页的样式和布局。