表單標籤主要功用是用來收集使用者資料
常用情況 : 註冊頁面...
主要由 表單域、表單元素、提示文字 這三種內容組成
以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屬性
b. select 下拉表單元素
如果有多個選項讓用戶選擇並想要節約頁面空間時
使用<select>
定義下拉列表
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
備註 :
<select>
中至少包含一對<option>
<option>
中定義 selected = "selected"時當前項為默認選中項c. textarea 文本域元素
當需要用戶輸入內容較多時使用<textarea>
標籤
<textarea>
是用於定義多行文本輸入的控件
常見用於留言板.評論區
<textarea rows="3" cols="20">
文本內容
</textarea>
備註:
<textarea>
標籤可以輕鬆的創建多行文本輸入框(但在實際中較少使用,都是使用CSS來改變大小)