表单的子元素可不在form标签内

表单是网页用于向服务器发送数据的元素。其用法类似下面：

<form method="POST" action="/login">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" value="提交" />
</form>

form标签对及其内部的所有子元素共同组成了表单。提交表单时，浏览器会将form标签对内所有具有name属性的标签的键值提交给服务器。

令人惊奇的是，一个表单子元素可不在form标签内，但是却从属于一个表单。要让一个form标签外的表单子元素从属于某一表单，只需要将该表单子元素的form属性设置为该表单form元素的id。其用法类似下面：

<form id="login-form" method="POST" action="/login"></form>
<input form="login-form" type="text" name="username" />
<input form="login-form" type="password" name="password" />
<input form="login-form" type="submit" value="提交" />

当点击提交按钮时，浏览器会把所有从属于表单且具有name属性的标签的键值对提交给服务器，在上面这个例子里会向浏览器提交username和password键值对。需要说明的是，如果提交按钮也有name属性，那么提交按钮的值也会被提交给浏览器；如果在form标签对外有多个提交按钮，那么只有被点击的按钮的值会被提交给服务器，未被点击的按钮的值不会被提交给服务器。

“从属于表单的控件可不在form标签内”这一特性有两种妙用。

第一，将提交按钮与form标签分离，放在行内元素中。form元素是块元素，它需要单独占据一行，所以form不能位于行内元素内（虽然浏览器的容错能力很强，能容忍这种错误）。但有时确实有将提交按钮放在行内元素内的需求，例如点赞、点踩、收藏按钮等。这时可将提交按钮与form标签分离，并放在行内元素内。如下是一个示例。

<span id="evaluate-article-button">
  <button form="praise-article" type="submit" name="operation" value="praise">赞</button>
  <button form="criticize-article" type="submit" name="operation" value="criticize">踩</button>
  <button form="collect-article" type="submit" name="operation" value="collect">收藏</button>
</span>
<div id="form">
  <form id="praise-article" method="POST" action="/article/1"></form>
  <form id="criticize-article" method="POST" action="/article/1"></form>
  <form id="collect-article" method="POST" action="/article/1"></form>
</div>

第二，多个提交按钮共用一个form元素，减少代码量。可以发现，上例所示的form标签的内容都是相同的，所以点赞、点踩、收藏三个按钮可共用一个form元素。示例如下。

<span id="evaluate-article-button">
  <button form="evaluate-article" type="submit" name="operation" value="praise">赞</button>
  <button form="evaluate-article" type="submit" name="operation" value="criticize">踩</button>
  <button form="evaluate-article" type="submit" name="operation" value="collect">收藏</button>
</span>
<div id="form">
  <form id="evaluate-article" method="POST" action="/article/1"></form>
</div>