表單是網頁用於向伺服器傳送資料的元素。其用法類似下面：

<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>