HTML（十二）：表單標籤和label標籤

阿新 • • 發佈：2022-04-07

現實中的表單，例如，我們去銀行辦理信用卡填寫的單子。

網頁中的表單展示

為什麼需要表單

使用表單的目的是為了收集使用者資訊。

在我們網頁中，我們也需要跟使用者進行互動，收集使用者資料，此時我們就需要表單。

表單的組成

在HTML中，一個完整的表單通常由表單域、表單控制元件（也稱表單元素）和提示資訊3個部分組成。

表單域

表單域是一個包含表單元素的區域

在HTML標籤中，<form>標籤用於定義表單域，以實現使用者資訊的收集和傳遞。

<form>會把它範圍內的表單元素資訊提交給伺服器。

<form action="url地址" method="提交方式" name="表單域名稱">
    各種表單元素控制元件
</form>

在表單域中可以定義各種表單元素，這些表單元素就是允許使用者在表單中輸入或者選擇的內容控制元件。

input表單元素
select下拉表單元素
textarea文字域元素

屬性說明：

屬性	屬性值	作用
action	url地址	用於指定接收並處理表單資料的伺服器程式的URL地址。
method	get/post	用於設定表單資料的提交方式，其取值為get或post。
name	名稱	用於指定表單的名稱，以區分同意個頁面中的多個表單域。

p.s.：這裡我們暫時不用表單域提交資料，只需要寫上form標籤即可。

input表單元素

英文單詞input是輸入的意思，而在表單元素中<input>

標籤用於收集使用者資訊。

在<input>標籤中，必須包含一個type屬性，根據不同的type屬性值，輸入欄位擁有很多形式（可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕等）。

基本語法

<form action="url地址" method="提交方式" name="表單域名稱">
    <input type="屬性值">
</form>

<input>標籤為單標籤
type屬性設定不同的屬性值用來指定不同的控制元件型別

input標籤的屬性及描述

type屬性的屬性值及其描述如下：

屬性值	描述
button	定義點選按鈕（多數情況下，用於通過js啟動指令碼）。
checkbox	定義複選框。
file	定義輸入欄位和“瀏覽”按鈕，供檔案上傳。
hidden	定義隱藏的輸入欄位。
image	定義影象形式的提交按鈕。
password	定義密碼欄位，該欄位中的字元唄掩碼。
radio	定義單選按鈕。
reset	定義重置按鈕，重置按鈕會清除表單中的所有資料。
submit	定義提交按鈕。提交按鈕會把表單資料傳送到伺服器。
text	定義單行的輸入欄位，使用者可在其中輸入文字。預設寬度為20個字元。

除type屬性外，<input>標籤還有其他很多屬性，其常用屬性如下：

屬性	屬性值	描述
name	由使用者自定義	用於定義input元素的名稱。
value	由使用者自定義	用於定義input元素的值。
checked	checked	規定此input元素首次載入時應當被選中。
maxlength	正整數	規定輸入欄位中的字元的最大長度。

type屬性之文字框和密碼框

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文字框和密碼框</title>
    </head>
    <body>
        <form>
            <!-- text 文字框 使用者可以裡面輸入任何文字 -->
            使用者名稱: <input type="text">   <br> 
            <!-- password 密碼框 使用者看不見輸入的密碼 -->
            密碼: <input type="password">  <br> 
        </form>
    </body>
</html>

inputtype屬性之單選框和複選框

這裡你可以發現單選按鈕還是多選多的效果，別急往後看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>單選框和複選框</title>
</head>

<body>
    <form>
    <!-- radio 單選按鈕  可以實現多選一 --> 
    <!-- 這裡你可以發現單選按鈕還是多選多的效果，別急往後看 --> 
    性別: 男 <input type="radio"> 女 <input type="radio"> <br>
    <!-- checkbox 複選框  可以實現多選 -->
    愛好: 吃飯 <input type="checkbox"> 睡覺 <input type="checkbox"> 打豆豆 <input type="checkbox">
    </form>
</body>

</html>

input之name和value屬性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>input之name和value屬性</title>
</head>

<body>
    <form>
        <!-- radio 單選按鈕  可以實現多選一 -->
        <!-- name 是表單元素名字 這裡性別單選按鈕必須有相同的名字name 才可以實現多選1 -->
        性別: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女"> <br>
        <!-- checkbox 複選框  可以實現多選 -->
        愛好: 吃飯 <input type="checkbox" name="hobby" value="吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input
            type="checkbox" name="hobby">
    </form>
</body>

</html>

input之checked和maxlength屬性

單選按鈕和複選框可以設定checked 屬性, 當頁面開啟的時候就可以預設選中這個按鈕

maxlength屬性規定了輸入欄位中的字元的最大長度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>input之checked和maxlength屬性</title>
</head>

<body>
    <form>
        <!-- text 文字框 使用者可以裡面輸入任何文字 -->
        <!-- maxlength屬性規定了輸入欄位中的字元的最大長度 -->
        使用者名稱: <input type="text" name="username" value="請輸入使用者名稱" maxlength="6"> <br>
        <!-- password 密碼框 使用者看不見輸入的密碼 -->
        密碼: <input type="password" name="pwd"> <br>
        <!-- radio 單選按鈕  可以實現多選一 -->
        <!-- name 是表單元素名字 這裡性別單選按鈕必須有相同的名字name 才可以實現多選1 -->
        <!-- 單選按鈕和複選框可以設定checked 屬性, 當頁面開啟的時候就可以預設選中這個按鈕 -->
        性別: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
        <!-- checkbox 複選框  可以實現多選 -->
        愛好: 吃飯 <input type="checkbox" name="hobby" value="吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
    </form>
</body>

</html>

type屬性之提交和重置按鈕

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>提交和重置按鈕</title>
</head>

<body>
    <form action="xxx.html" method="get">
        <!-- text 文字框 使用者可以裡面輸入任何文字 -->
        使用者名稱: <input type="text" name="username" value="請輸入使用者名稱" maxlength="6"> <br>
        <!-- password 密碼框 使用者看不見輸入的密碼 -->
        密碼: <input type="password" name="pwd"> <br>
        <!-- radio 單選按鈕  可以實現多選一 -->
        <!-- name 是表單元素名字 這裡性別單選按鈕必須有相同的名字name 才可以實現多選1 -->
        <!-- 單選按鈕和複選框可以設定checked 屬性, 當頁面開啟的時候就可以預設選中這個按鈕 -->
        性別: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
        <!-- checkbox 複選框  可以實現多選 -->
        愛好: 吃飯 <input type="checkbox" name="hobby" value="吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
        <br>
        <!-- 點選了提交按鈕,可以把 表單域 form 裡面的表單元素 裡面的值 提交給後臺伺服器 -->
        <input type="submit" value="免費註冊">
        <!-- 重置按鈕可以還原表單元素初始的預設狀態 -->
        <input type="reset" value="重新填寫">
    </form>
</body>

</html>

type屬性之普通按鈕和檔案域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>input之checked和maxlength屬性</title>
</head>

<body>
    <form action="xxx.html" method="get">
        <!-- text 文字框 使用者可以裡面輸入任何文字 -->
        使用者名稱: <input type="text" name="username" value="請輸入使用者名稱" maxlength="6"> <br>
        <!-- password 密碼框 使用者看不見輸入的密碼 -->
        密碼: <input type="password" name="pwd"> <br>
        <!-- radio 單選按鈕  可以實現多選一 -->
        <!-- name 是表單元素名字 這裡性別單選按鈕必須有相同的名字name 才可以實現多選1 -->
        <!-- 單選按鈕和複選框可以設定checked 屬性, 當頁面開啟的時候就可以預設選中這個按鈕 -->
        性別: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
        <!-- checkbox 複選框  可以實現多選 -->
        愛好: 吃飯 <input type="checkbox" name="hobby" value="吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
        <br>
        <!-- 點選了提交按鈕,可以把 表單域 form 裡面的表單元素 裡面的值 提交給後臺伺服器 -->
        <input type="submit" value="免費註冊">
        <!-- 重置按鈕可以還原表單元素初始的預設狀態 -->
        <input type="reset" value="重新填寫">
        <!-- 普通按鈕 button  後期結合js 搭配使用-->
        <input type="button" value="獲取簡訊驗證碼"> <br>
        <!-- 檔案域 使用場景 上傳檔案使用的 -->
        上傳頭像: <input type="file">
    </form>
</body>

</html>

select表單元素

在頁面中，如果有多個選項讓使用者選擇，並且想要節約頁面的空間時，我們可以使用<select>標籤控制元件定義下拉列表。

例如：

基本語法

    <form>
        <select>
            <option>選項1</option>
            <option>選項2</option>
            <option>選項2</option>
            ...
        </select>
    </form>

<select>中至少包含一對<option>
在<option>中定義selected="selected",當前項即為預設選中項。

示例程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>select表單元素</title>
</head>

<body>
    <form>
        籍貫:
        <select>
            <option>山東</option>
            <option>北京</option>
            <option>天津</option>
            <option selected="selected">火星</option>
        </select>
    </form>
</body>

</html>

textarea文字域元素

當用戶輸入內容較多的情況下，我們就不能使用文字框表單了，此時我們可以使用<textarea>標籤。

在表單元素中，<textarea>標籤是用於定義多行為本輸入的控制元件。

使用多行文字輸入控制元件，可以輸入更多的文字，該控制元件常見於留言板，評論。

基本語法

    <form>
        <textarea cols="30" rows="10">
            文字內容
        </textarea>
    </form>

通過<textarea>標籤可以輕鬆的建立多行文字輸入框。
cols= "每行中的字元數"，rows="顯示的行數"。實際開發中並不會使用，都是用CSS來控制大小。

程式碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>textarea文字域元素</title>
</head>
    <body>
        <form>
            太難了：
            <textarea cols="50" rows="5">來都來了，不關注一波</textarea>
        </form>
    </body>
</html>

label標籤

<label>標籤為input元素定義標註（標籤）。

<label>標籤用於繫結一個表單元素，當點選<label>標籤內的文字時，瀏覽器就會自動將焦點（游標）轉到或者選擇對應的表單元素上，用來增加使用者體驗。

基本語法

<form>
    <label for="sex">男</label>
    <input type="redio" name="sex" id="sex">
</form>

核心：<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同

示例程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>label標籤</title>
</head>

<body>
    <form>
        <label for="text"> 使用者名稱:</label> <input type="text" id="text"><br>
        <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
        <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
    </form>
</body>

</html>