HTML 表單

Created: October-16, 2018

HTML 表單是文件的一部分，其中包含允許使用者向 Web 伺服器提交資訊的互動式控制元件。

什麼是 HTML 表單

HTML 表單需要收集不同型別的使用者輸入，例如姓名、電子郵件地址、電話號碼或信用卡資訊等詳細資訊等聯絡人詳細資訊。

表單包含稱為控制元件的特殊元素，如輸入框、核取方塊、單選按鈕、提交按鈕等。使用者通常通過修改其控制元件來完成表單，例如輸入文字、選擇專案等，並將此表單提交給 Web 伺服器進行處理。

<form> 標籤用於建立一個 HTML 表單。這是一個登入表單的簡單示例：

<form>
    <fieldset>
        <legend>Log In</legend>
        <label>Username: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Submit">
    </fieldset>
</form>

以下部分介紹了可以在表單中使用的不同型別的控制元件。

輸入元素

這是 HTML 表單中最常用的元素。

它允許你指定各種型別的使用者輸入欄位，具體取決於 type 屬性。輸入元素可以是文字欄位 、 核取方塊 、 密碼欄位 、 單選按鈕 、 提交按鈕 、 重置按鈕等型別，以及 HTML5 中引入的幾種新輸入型別。

最常用的輸入型別如下所述。

文字欄位

文字欄位是允許使用者輸入文字的一行區域。

使用 <input> 元素建立單行文字輸入控制元件，該元素的 type 屬性值為 text 。以下是用於獲取使用者名稱的單行文字輸入示例：

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

- 上面示例的輸出將如下所示：

HTML 文字輸入欄位

注意： <label> 是用於定義元素 <input> 標籤的標記。如果你希望使用者輸入多行，則應使用 <textarea>。

密碼欄位

密碼欄位類似於文字欄位。唯一的區別是; 密碼欄位中的字元被遮蔽，即顯示為星號或點。這是為了防止他人在螢幕上讀取密碼。這也是使用 <input> 元素的 type 屬性值為 password 的單行文字輸入控制元件。

以下是用於獲取使用者密碼的單行密碼輸入示例：

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

- 上面示例的輸出將如下所示：

HTML 密碼輸入欄位

單選按鈕

單選按鈕用於讓使用者從預定義的選項集中精確選擇一個選項。它是使用 <input> 元素的 type 屬性值設定為 radio 元素來建立的。

<form>
    <input type="radio" name="sex" id="male">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="female">
    <label for="female">Female</label>
</form>

- 上面示例的輸出將如下所示：

HTML 收音機按鈕

注意： 如果你希望允許使用者同時選擇多個選項，則應使用核取方塊。

核取方塊

核取方塊允許使用者從預定義的選項集中選擇一個或多個選項。它是使用 <input> 元素的 type 屬性值設定為 checkbox 來建立的。

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>

- 上面示例的輸出將如下所示：

HTML 核取方塊

檔案選擇框

檔案欄位允許使用者瀏覽本地檔案並將其作為表單資料的附件傳送。它通常呈現為帶有按鈕的文字框，使使用者可以瀏覽檔案。但是，使用者還可以在文字框中鍵入檔案的路徑和名稱。

這也是使用 <input> 元素建立的，其元素 type 值設定為 file 。

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>

- 上面示例的輸出將如下所示：

HTML 檔案選擇欄位

多行文字

Textarea 是一個多行文字輸入控制元件，允許使用者輸入多行文字。使用 <textarea> 元素建立多行文字輸入控制元件。

- 上面示例的輸出將如下所示：

HTML Textarea

選擇框

選擇框是一個選項下拉選單，允許使用者從下拉選單中選擇一個或多個選項。使用 <select> 元素和 <option> 元素建立選擇框。<select> 元素中的 option 元素定義每個列表項。

<form>
    <label for="city">City:</label>
    <select name="city" id="city">
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
    </select>
</form>

- 上面示例的輸出將如下所示：

HTML 選擇下拉選單

提交和重置按鈕

提交按鈕用於將表單資料傳送到 Web 伺服器。單擊提交按鈕時，表單資料將傳送到表單的 action 屬性中指定的檔案以處理提交的資料。重置按鈕將所有表單控制元件重置為預設值。

<form action="action.php" method="post" id="users">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

- 上面示例的輸出將如下所示：

HTML 提交和重置按鈕

在上面的文字欄位中鍵入你的姓名，然後單擊“提交”按鈕以檢視其實際操作。

注意： 你還可以使用 <button> 元素建立按鈕。使用 <button> 元素函式建立的按鈕就像使用 input 元素建立的按鈕一樣，但它們提供了更豐富的渲染可能性。

最常用的表單屬性是：

屬性	描述
`name`	表格的名稱。
`action`	處理通過表單提交的資訊的程式的 URL。
`method`	瀏覽器用於提交表單的 HTTP 方法。可能的值是 `get` 和 `post` 。
`target`	一個名稱或關鍵字，指示將顯示指令碼結果的目標頁面。保留的關鍵字 `_blank` ， `_self` ， `_parent` 和 `_top` 。

注意： name 包含該屬性是為了向後相容。你應該使用該 id 屬性來標識元素。