HTML 表单提交

<button> 元素为用户提供了触发表单提交过程的方式。

虽然 <input type="submit"> 元素也可以用于此目的，但 <button> 元素在按钮的外观和行为上提供了更大的灵活性和控制力。

1. 理解 <button> 元素

<button> 元素定义了 HTML 表单中的一个可点击按钮。它可以包含文本、图像，甚至其他 HTML 元素，与简单的 <input type="submit"> 相比，允许更丰富的按钮设计。

1.1 基本语法

<button> 元素的基本语法如下：

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

在这里，type="submit" 是最重要的属性。它指定了当点击按钮时应提交表单数据。如果没有这个属性，按钮的行为在不同浏览器中可能不一致（虽然通常默认为 submit），或者仅仅作为一个普通按钮而不触发提交（除非添加了自定义 JavaScript）。

2. 关键属性

1. type：指定按钮的类型。常用值包括：submit：将表单数据提交到服务器。这是表单提交最常见且最重要的类型。reset：将所有表单控件重置为其初始值。button：定义一个没有默认行为的通用按钮。这通常与 JavaScript 结合使用以实现自定义功能。
2. name：指定按钮的名称。如果表单中有多个按钮，这很重要，因为它可以识别哪个按钮被点击了。被点击按钮的 name-value 对将与其余表单数据一起提交。
3. value：指定按钮的值。当点击按钮时，此值将随表单数据一起提交。
4. form：指定按钮所属的一个或多个表单的 ID。这允许你将按钮与表单关联，即使按钮位于 <form> 元素外部。这对于复杂的布局非常有用。

2.1 示例：简单的提交按钮

<form action="/submit" method="post">
  <label for="name">姓名：</label><br>
  <input type="text" id="name" name="name"><br><br>
  <button type="submit">提交</button>
</form>

在这个例子中，点击“提交”按钮将使用 POST 方法将表单数据发送到 /submit URL。

2.2 示例：使用 name 和 value 属性（多按钮逻辑）

<form action="/submit" method="post">
  <label for="quantity">数量：</label><br>
  <input type="number" id="quantity" name="quantity" value="1"><br><br>
  
  <button type="submit" name="action" value="add">加入购物车</button>
  <button type="submit" name="action" value="remove">移出购物车</button>
</form>

在这种情况下，表单包含两个提交按钮。

• 如果点击“加入购物车”，提交的数据将包含 action=add。
• 如果点击“移出购物车”，提交的数据将包含 action=remove。
• 服务器端脚本可以利用此信息来确定执行哪个操作。

2.3 示例：使用 form 属性（外部按钮）

<form id="myForm" action="/submit" method="post">
  <label for="email">邮箱：</label><br>
  <input type="email" id="email" name="email"><br><br>
</form>

<button type="submit" form="myForm">订阅</button>

这里，按钮位于 <form> 元素之外，但通过 form="myForm" 属性与其关联。点击“订阅”按钮将提交 ID 为 "myForm" 的表单。

3. 设置 <button> 元素的样式

可以使用 CSS 对 <button> 元素进行样式设置，以匹配网站的整体设计。你可以控制诸如 background-color（背景色）、color（文字颜色）、padding（内边距）、border（边框）等属性。

示例：样式化提交按钮

<style>
  .submit-button {
    background-color: #4CAF50; /* 绿色背景 */
    border: none;
    color: white; /* 白色文字 */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer; /* 鼠标变为手型 */
    border-radius: 5px; /* 圆角 */
  }
</style>

<form action="/submit" method="post">
  <label for="message">留言：</label><br>
  <textarea id="message" name="message"></textarea><br><br>
  <button type="submit" class="submit-button">发送留言</button>
</form>

4. <button> vs. <input type="submit">

虽然 <button type="submit"> 和 <input type="submit"> 都可以用来提交表单，但它们有一些关键区别：

5. 使用 <button> 元素控制表单提交（高级属性）

<button> 元素不仅可以触发提交，还可以通过特定属性覆盖 <form> 元素的默认设置。这在同一个表单需要根据点击的按钮执行不同操作时非常有用。

5.1 formaction 属性

formaction 属性允许你为特定按钮覆盖 <form> 元素的 action 属性。这意味着你可以让不同的按钮将数据提交到不同的 URL。

<form action="/default-action" method="post">
  <label for="product">产品 ID：</label><br>
  <input type="text" id="product" name="product"><br><br>
  
  <button type="submit">加入购物车</button> 
  <button type="submit" formaction="/checkout">直接结账</button> 
</form>

5.2 formmethod 属性

formmethod 属性允许你为特定按钮覆盖 <form> 元素的 method 属性。这让你可以在同一个表单中对不同的按钮使用不同的 HTTP 方法（GET 或 POST）。

<form action="/process-form" method="post">
  <input type="text" id="search" name="search">
  
  <button type="submit">保存 (POST)</button>
  <button type="submit" formmethod="get">搜索 (GET)</button>
</form>

5.3 formenctype 属性

formenctype 属性指定提交表单数据时的编码方式，覆盖 <form> 的 enctype。这在处理文件上传时特别相关。

• application/x-www-form-urlencoded：默认值。
• multipart/form-data：用于文件上传。
• text/plain：用于纯文本。

<form action="/upload" method="post">
  <input type="file" id="file" name="file">
  <button type="submit" formenctype="multipart/form-data">上传文件</button>
</form>

5.4 formtarget 属性

formtarget 属性指定在何处显示提交后的响应，覆盖 <form> 的 target 属性。

• _self：在当前标签页打开（默认）。
• _blank：在新标签页打开。

<form action="/process-form" method="post">
  <button type="submit">提交</button> <button type="submit" formtarget="_blank">提交并打开新窗口</button>
</form>

6. 总结

在本章中，我们探索了 <button> 元素及其在提交 HTML 表单中的作用。

• 我们学习了控制按钮行为的关键属性：type、name、value。
• 我们掌握了高级覆盖属性：formaction、formmethod、formenctype 和 formtarget。
• 我们讨论了 <button> 相比 <input type="submit"> 的优势（主要是内容和样式的灵活性）。