1.為什么需要表單
表單是為了 收集用戶資訊，
2.表單的組成
在HTML中，一個完整的表單通常由表單域，表單控制元件(表單元素)和提示資訊，3個部分組成，
（1）表單域
在html中,<form>標簽用于定義表單域，以實作用戶資訊的收集和傳遞
<form>會把它范圍內的表單元素資訊提交給服務器
<form action="ul地址" method="提交方式" name="表單域名稱">
各種表單元素控制元件
</form>
屬性 屬性值 作用
action ul地址 用于指定接收并處理表但是據服務器程式url地址
method get/post 用于設定表單資料的提交方式，其取值為get或post
name 名稱 用于指定表單的名稱，以區分同一個頁面中的多個表單域
(2)表單控制元件（表單元素）【input select textarea】
表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單輸入或選擇的內容
控制元件
1_input 輸入表單元素
在<input>標簽中，包含一個type屬性，根據不同的type屬性，輸入欄位擁有很多形式
（可以是文本欄位，復選框，掩碼后的文本控制元件，單選按鈕，按鈕等），
<input type = "屬性值" />
（1）input是一個單標簽
1.type屬性設定不同的屬性值用來指定不同的控制元件型別
屬性值：
text 文本框，用戶輸入文本，默認寬度為20個字符
password 定義密碼欄位，該欄位的字符被掩碼
radio 定義單選按鈕
checkbox 定義復選框
submit 定義提交按鈕，按鈕會把表單資料傳送給服務器
reset 重置按鈕，重置所有資料
button 定義可點擊按鈕(多數情況下，用于通過JavaScript啟動腳本)
file 定義輸入欄位和“瀏覽”按鈕，供檔案上傳
2.name 由用戶自定義 定義input元素名稱
3.value 由用戶定義 規定input元素的值
4.checked checked 規定input元素首次加載時被選中
5.maxlength 正整數 規定輸入字串最大長度
注意：1.name和value是每個表單元素都有的屬性值，主要給后臺人使用
2.name指表單元素的名字，要求單選按鈕和復選按鈕要有相同的name值
3.checked屬性主要針對對于單選框和復選框，主要作用一打開頁面，就可以默認選中某個表單
(2)<label>標簽
<label>標簽為input元素定義標注(標簽)，
<label>標簽用于系結一個表單元素，當點擊<label>標簽內文本的時候，瀏覽器就會自動將焦點（游標）轉到或者選擇對應的表單元素上，用來增加用戶的體驗
<label for="sex">男<label>
<input type="radio" name="sex" id="sex">
2_select 下拉表單元素
在頁面中，如果多個選項讓用戶選擇，并且想要節約頁面空間，我們可以使用<select>標簽控制元件定義下拉標簽
語法：
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
<select>
注意：<select>中至少含有一堆<option>
<option>中定義selected = "selected"時，當前項即為默認選項
3_textarea 文本域元素
使用場景：當用戶輸入內容較多時，我們就不能使用文本框表單了，此時我們可以使用<textarea>標簽
在表單元素中，<textarea>標簽用于定義多行文本輸入的控制元件，
<textarea row="3" cols="20">
文本內容
</textarea>
重點注意：1.通過<textarea>標簽可以輕松創建多行文本輸入框
2.cols = "每行的字符數"，rows="顯示的行數"，我們在實際開發中不會使用，都是CSS來改變大小，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34079.html
標籤：Html/Css
上一篇：通配符選擇器