表單標籤主要功用是用來收集使用者資料

常用情況 : 註冊頁面...

主要由 表單域、表單元素、提示文字 這三種內容組成

以MOMO註冊頁面為範例:

1.表單域

表單域標籤
<form action="url"地址 method="提交方式(分為get & post)" name="表單名稱">
各種表單元素以及提示文字(表單內容)
</form>

2.表單元素

主要分為三種表單元素:

<input> : 輸入類型表單元素
<select> : 下拉類型表單元素
<textarea> : 文本域表單元素

a. input 輸入類型表單元素

<input>標籤用於收集用戶信息

input標籤後面會包含一個type屬性

根據type屬性不同有不同種的形式

(文本字段,複選框,單選按鈕,按鈕等) (以上為單標籤)

type屬性:

button 定義可點擊按鈕
checkbox 定義複選框
file 定義上傳文件
hidden 定義隱藏的輸入字段
image 定義上傳圖片
password 定義密碼輸入字段(輸入的內容會被隱藏)
radio 定義單選按鈕
reset 定義重製按鈕 (點擊後清除表單中的數據)
submit 定義提交按鈕 (點擊後把表單數據送到服務器中)
text 定義單行的輸入字段 (默認寬度為20字符)

除了type屬性外，input標籤後常包含的其他屬性:

name 屬性 : 定義input元素的名稱
value 屬性 : 規定input元素的值
checked 屬性 : 規定input元素加載網頁時應被選中
maxlength 屬性 :  規定輸入字段的字符最大長度

備註 :
1.name 和 value 是美的表單元素都有的屬性值，主要給後端人員使用
2.name表單元素的名子，要求單選按鈕和複選框需要有相同的name值
3.單選框和複選框可以設置checked屬性，當頁面打開時就可以默認選中
ex: checked = checked

<label> 標籤

使用場景:

<label>標籤用於綁定一個表單元素 當點擊<label>標籤內文本時

瀏覽器就會自動轉到或選擇對應的表單元素以增加用戶體驗

<label for = "sex">男</label>
<input type="radio" name = "sex" id = "sex">
核心 : <label>標籤的for屬性應當= 相關元素的id屬性

input表單標籤codepen

b. select 下拉表單元素

如果有多個選項讓用戶選擇並想要節約頁面空間時

使用<select>定義下拉列表

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

備註 :

1. <select>中至少包含一對<option>
2. 在<option>中定義 selected = "selected"時當前項為默認選中項

下拉表單

c. textarea 文本域元素

當需要用戶輸入內容較多時使用<textarea>標籤

<textarea>是用於定義多行文本輸入的控件

常見用於留言板.評論區

<textarea rows="3" cols="20">
文本內容
</textarea>

備註:

1. 通過<textarea>標籤可以輕鬆的創建多行文本輸入框
2. cols = "每行中的字符數" rows = "顯示的行數"

(但在實際中較少使用，都是使用CSS來改變大小)

文本域表單