HTML 表單

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 方法。可能的值是 getpost
target 一個名稱或關鍵字,指示將顯示指令碼結果的目標頁面。保留的關鍵字 _blank_self_parent_top

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