你的第一個表單
本系列的第一篇文章將為您提供建立 Web 表單的首次體驗，包括設計一個簡單的表單，使用正確的 HTML 表單控制元件和其他 HTML 元素來實現它，透過 CSS 新增一些非常簡單的樣式，並描述如何將資料傳送到伺服器。我們將在本模組的後面更詳細地擴充套件這些子主題。
| 預備知識 | 對 HTML 的基本理解。 |
|---|---|
| 目標 | 為了熟悉什麼是 Web 表單、它們的用途、如何考慮設計它們以及簡單情況下所需的 HTML 基本元素。 |
什麼是 Web 表單？
Web 表單是使用者與網站或應用程式互動的主要方式之一。表單允許使用者輸入資料，這些資料通常會發送到 Web 伺服器進行處理和儲存（請參閱本模組後面的傳送表單資料），或者在客戶端使用以某種方式立即更新介面（例如，向列表中新增另一個專案，或顯示/隱藏 UI 功能）。
Web 表單的 HTML 由一個或多個表單控制元件（有時稱為小部件）以及一些其他元素組成，以幫助構建整個表單——它們通常被稱為HTML 表單。這些控制元件可以是單行或多行文字欄位、下拉框、按鈕、複選框或單選按鈕，它們主要使用<input>元素建立，儘管還有其他一些元素需要學習。
表單控制元件也可以程式設計為強制輸入特定的格式或值（表單驗證），並與描述其用途的文字標籤配對，以供有視力和視障使用者使用。
設計您的表單
在開始編碼之前，最好退一步花時間思考您的表單。設計一個快速模型將幫助您定義想要使用者輸入的一組正確資料。從使用者體驗 (UX) 的角度來看，記住您的表單越大，您就越有可能讓使用者感到沮喪並失去使用者。保持簡單並專注於核心：只請求您絕對需要的資料。
在構建網站或應用程式時，設計表單是一個重要的步驟。本文的範圍不包括表單的使用者體驗，但如果您想深入研究該主題，您應該閱讀以下文章
- Smashing Magazine 有一些關於表單 UX 的好文章，包括一篇較舊但仍然相關的Web 表單可用性綜合指南。
- UXMatters 也是一個非常有思想的資源，提供了從基本最佳實踐到複雜問題（如多頁表單）的良好建議。
在本文中，我們將構建一個簡單的聯絡表單。讓我們做一個粗略的草圖。
我們的表單將包含三個文字欄位和一個按鈕。我們要求使用者輸入他們的姓名、電子郵件和他們想要傳送的訊息。點選按鈕將把他們的資料傳送到 Web 伺服器。
實現我們的表單 HTML
好的，讓我們嘗試為我們的表單建立 HTML。我們將使用以下 HTML 元素：<form>、<label>、<input>、<textarea> 和<button>。
在繼續之前，請製作我們簡單 HTML 模板的本地副本 — 您將在此處輸入您的表單 HTML。
<form> 元素
所有表單都以一個<form>元素開頭，如下所示
<form action="/my-handling-form-page" method="post">…</form>
此元素正式定義了一個表單。它是一個容器元素，就像<section>或<footer>元素，但專門用於包含表單；它還支援一些特定屬性來配置表單的行為方式。它的所有屬性都是可選的，但通常的做法是始終至少設定action和method屬性
action屬性定義了表單提交時收集的資料應傳送到的位置（URL）。method屬性定義了傳送資料的 HTTP 方法（通常是get或post）。
注意：我們將在後面的傳送表單資料文章中瞭解這些屬性的工作原理。
<label>、<input> 和 <textarea> 元素
我們的聯絡表單並不複雜：資料輸入部分包含三個文字欄位，每個欄位都有一個對應的<label>
- 用於姓名的輸入欄位是單行文字欄位。
- 用於電子郵件的輸入欄位是電子郵件型別的輸入：一個只接受電子郵件地址的單行文字欄位。
- 用於訊息的輸入欄位是
<textarea>；一個多行文字欄位。
在 HTML 程式碼方面，我們需要類似以下內容來實現這些表單小部件
<form action="/my-handling-form-page" method="post">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</p>
<p>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</p>
<p>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</p>
</form>
將您的表單程式碼更新為如上所示。
這裡的<p>元素是為了方便地構建我們的程式碼並使樣式更容易（參見文章後面）。為了可用性和可訪問性，我們為每個表單控制元件包含一個顯式標籤。請注意所有<label>元素上for屬性的使用，其值是與之關聯的表單控制元件的id——這就是您將表單控制元件與其標籤關聯起來的方式。
這樣做有很大的好處——它將標籤與表單控制元件關聯起來，使滑鼠、觸控板和觸控裝置使用者可以點選標籤來啟用相應的控制元件，它還為螢幕閱讀器提供了可訪問的名稱，以便向其使用者朗讀。您將在如何構建 Web 表單中找到有關表單標籤的更多詳細資訊。
在<input>元素上，最重要的屬性是type屬性。此屬性極其重要，因為它定義了<input>元素的顯示和行為方式。您將在後面的基本原生表單控制元件文章中找到更多相關資訊。
- 在我們的簡單示例中，我們為第一個輸入使用值text——這是此屬性的預設值。它代表一個基本的單行文字欄位，接受任何型別的文字輸入。
- 對於第二個輸入，我們使用值email，它定義了一個只接受格式正確的電子郵件地址的單行文字欄位。這會將基本文字欄位變成一種“智慧”欄位，它將對使用者鍵入的資料執行一些驗證檢查。它還導致在具有動態鍵盤的裝置（如智慧手機）上出現更適合輸入電子郵件地址的鍵盤佈局（例如，預設帶有@符號）。您將在後面的客戶端表單驗證文章中找到更多關於表單驗證的資訊。
最後但同樣重要的是，請注意<input>與<textarea></textarea>的語法。這是 HTML 的一個怪癖。<input>標籤是空元素，這意味著它不需要結束標籤。<textarea>不是空元素，這意味著它應該用正確的結束標籤關閉。這對錶單的一個特定功能有影響：您定義預設值的方式。要定義<input>元素的預設值，您必須使用value屬性，如下所示
<input type="text" value="by default this element is filled with this text" />
另一方面，如果您想為<textarea>定義預設值，則將其放在<textarea>元素的開始和結束標籤之間，如下所示
<textarea>
by default this element is filled with this text
</textarea>
<button> 元素
我們表單的標記幾乎完成了；我們只需要新增一個按鈕，以便使用者在填寫完表單後傳送或“提交”他們的資料。這可以透過使用<button>元素來完成；在結束的</form>標籤上方新增以下內容
<p class="button">
<button type="submit">Send your message</button>
</p>
<button>元素也接受一個type屬性——它接受三個值之一：submit、reset或button。
- 點選
submit按鈕（預設值）會將表單資料傳送到由<form>元素的action屬性定義的網頁。 - 點選
reset按鈕會立即將所有表單小部件重置為預設值。從使用者體驗的角度來看，這被認為是糟糕的做法，因此除非您確實有充分的理由包含此類按鈕，否則應避免使用它。 - 點選
button按鈕什麼也不會做！這聽起來很傻，但對於構建自定義按鈕來說卻非常有用——您可以使用 JavaScript 定義其選擇的功能。
基本表單樣式
現在您已經完成了表單的 HTML 程式碼編寫，嘗試儲存並在瀏覽器中檢視。目前，您會發現它看起來相當難看。
注意：如果您不認為自己的 HTML 程式碼正確，請嘗試將其與我們完成的示例進行比較——請參閱first-form.html（也可以線上檢視）。
表單以難以很好地進行樣式設定而聞名。本文的範圍不包括詳細教授您表單樣式，因此目前我們只會讓您新增一些 CSS 以使其看起來正常。
首先，在您的 HTML head 中，向您的頁面新增一個<style>元素。它應該如下所示
<style>
/* CSS goes here */
</style>
在style標籤內，新增以下 CSS
body {
/* Center the form on the page */
text-align: center;
}
form {
display: inline-block;
/* Form outline */
padding: 1em;
border: 1px solid #cccccc;
border-radius: 1em;
}
p + p {
margin-top: 1em;
}
label {
/* Uniform size & alignment */
display: inline-block;
min-width: 90px;
text-align: right;
}
input,
textarea {
/* To make sure that all text fields have the same font settings
By default, text areas have a monospace font */
font: 1em sans-serif;
/* Uniform text field size */
width: 300px;
box-sizing: border-box;
/* Match form field borders */
border: 1px solid #999999;
}
input:focus,
textarea:focus {
/* Set the outline width and style */
outline-style: solid;
/* To give a little highlight on active elements */
outline-color: black;
}
textarea {
/* Align multiline text fields with their labels */
vertical-align: top;
/* Provide space to type some text */
height: 5em;
}
.button {
/* Align buttons with the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra margin represent roughly the same space as the space
between the labels and their text fields */
margin-left: 0.5em;
}
儲存並重新載入，您會發現您的表單看起來不那麼難看了。
注意：您可以在 GitHub 上找到我們的版本，網址為first-form-styled.html（也可以線上檢視）。
將表單資料傳送到您的 Web 伺服器
最後一部分，也許也是最棘手的部分，是在伺服器端處理表單資料。<form>元素透過action和method屬性定義了資料的傳送位置和方式。
我們為每個表單控制元件提供了name屬性。名稱在客戶端和伺服器端都很重要；它們告訴瀏覽器每個資料段的名稱，在伺服器端，它們讓伺服器按名稱處理每個資料段。表單資料以名稱/值對的形式傳送到伺服器。
要在表單中命名資料，您需要在每個將收集特定資料段的表單小部件上使用name屬性。讓我們再次檢視一些表單程式碼
<form action="/my-handling-form-page" method="post">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</p>
<p>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" />
</p>
<p>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</p>
…
</form>
在我們的示例中，表單將傳送 3 個數據段，分別名為user_name、user_email和user_message。這些資料將使用HTTP POST方法傳送到 URL /my-handling-form-page。
在伺服器端，URL 為/my-handling-form-page的指令碼將接收 HTTP 請求中包含的 3 個鍵/值項列表形式的資料。此指令碼如何處理該資料取決於您。每種伺服器端語言（PHP、Python、Ruby、Java、C#等）都有其自己的處理表單資料的機制。深入探討這個主題超出了本教程的範圍，但如果您想了解更多資訊，我們已在後面的傳送表單資料文章中提供了一些示例。
總結
恭喜，您已經構建了您的第一個 Web 表單。它在線上看起來是這樣的
然而，這僅僅是個開始——現在是深入研究的時候了。表單的功能遠比我們在此處看到的要強大，本模組中的其他文章將幫助您掌握其餘內容。