05HTML基礎--表單標籤
05HTML基礎--表單標籤
表單標籤
- 作用: 用於收集使用者資訊, 讓使用者填寫、選擇相關資訊
- 格式:
<form>
所有的表單內容，都要寫在form標籤裡面（也叫做表單元素）
</form>
- 注意事項:
- 所有的表單內容，都要寫在form標籤裡面
- form標籤中有兩個比較重要的屬性action和method, 但就現目前大家的知識儲備而言暫時無法理解, 所以放到後面的課程中講解
input標籤
- 如果說td是表格最核心的標籤, 那麼input就是表單最核心的標籤. nput標籤有一個type屬性, 這個屬性有很多型別的取值, 取值的不同就決定了input標籤的功能和外觀不同
- 明文輸入框
- 作用: 使用者可以在輸入框內輸入內容
- 賬號:<input type="text"/>
- 暗文輸入框
- 作用: 使用者可以在輸入框內輸入內容
- 密碼:<input type="password"/>
- 給輸入框設定預設值
- 賬號:<input type="text" value="123"/>
- 密碼:<input type="password" value="123"/>
- 賬號:<input type="text" value="123"/>
- 規定輸入欄位中的字元的最大長度
- 賬號: <input type="text" name="fullname" maxlength="8" />
- 單選框(radio)
- 作用: 使用者只能從眾多選項中選擇其中一個
- 單選按鈕，天生是不互斥的，如果想互斥，必須要有相同的name屬性
<input type="radio"
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖
- 多選框(checkbox)
- 作用: 使用者只能從眾多選項中選擇多個
- 複選框，最好也是有相同的name（雖然他不需要互斥，但是也要有相同的name）
<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球
- 給單選、多選設定預設值
- 指定radio和checkbox預設值, 前提是同一組內容必須設定相同name屬性
<input type="radio" name="xingbie" checked="checked"/> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖
<input type="checkbox" name="aihao" checked="checked"/> 籃球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球
- 按鈕
- 作用: 定義可點選按鈕（多數情況下，用於通過 JavaScript 啟動指令碼）
- <input type="button" value="點我丫" />
- 圖片按鈕
- 作用:定義影象形式的提交按鈕
- <input type="image" src="lnj.jpg" />
- 重置按鈕
- 作用: 定義重置按鈕。重置按鈕會清除表單中的所有資料
- <input type="reset" />
- 注意事項:
- 這個按鈕不需要寫value自動就有“重置”文字
- reset只對form表單中表單項有效果
- 提交按鈕
作用:定義提交按鈕。提交按鈕會把表單資料傳送到action屬性指定的頁面
o <input type="submit" />
o 注意事項:
§ 這個按鈕不需要寫value自動就有“提交”文字
§ 要想通過submit提交資料到伺服器, 被提交的表單項都必須設定name屬性
§ 預設明文傳輸(GET)不安全, 可以將method屬性設定為POST改為非明文傳輸(學到Ajax再理解)
§
將賬號和密碼都設定name屬性，即告訴表單將賬號和密碼都提交給action設定的伺服器url（例如設定的是baidu的url）。點選提交按鈕後會直接彈出伺服器的網頁並且彈出的網頁url會出現賬號和密碼的鍵值對型別。
- 隱藏域
- 作用: 定義隱藏的輸入欄位
- <input type="hidden">
- 暫時不用掌握, 在Ajax中對資料的CRUD操作有非常大的作用
- 取色器
- <input type="color">
- HTML5中input型別增加了很多type型別, 例如color、date但是都不相容, 後面講到瀏覽器相容時會重點講解
- label標籤
- 作用: label標籤不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性
- 注意事項:
- 表單元素要有一個id，然後label標籤就有一個for屬性，for屬性和id相同就表示綁定了
- 所有表單元素都可以通過label繫結
<!--給文字框新增繫結-->
<label for="account">賬號:</label><input type="text" id="account" />
<!--給單選框新增繫結-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>
<!--給多選框新增繫結-->
<input type="checkbox" id="basketball" />
<label for="basketball">籃球</label>
- 日期選擇器
- <input type="date">
- HTML5中input型別增加了很多type型別, 例如color、date但是都不相容, 後面講到瀏覽器相容時會重點講解
資料列表
- 作用: 給輸入框繫結待選項
- 格式:
datalist>
<option>待選項內容</option>
</datalist>
- 如何給輸入框繫結待選列表
- 搞一個輸入框
- 搞一個datalist列表
- 給datalist列表標籤新增一個id
- 給輸入框新增一個list屬性,將datalist的id對應的值賦值給list屬性即可
請輸入你的車型: <input type="text" list="cars">
<datalist id="cars">
<option>賓士</option>
<option>寶馬</option>
<option>奧迪</option>
<option>路虎</option>
<option>賓利</option>
</datalist>
多行文字框(文字域)
- 作用: textarea標籤用於在表單中定義多行的文字輸入控制元件
- cols屬性表示columns“列”, 規定文字區內的可見寬度
- rows屬性表示rows“行”, 規定文字區內的可見行數
- 格式:
- <textarea ></textarea>
<textarea cols="30" rows="10">預設</textarea>
- 注意點:
- 可以通過cols和rows來指定輸入框的寬度和高度
- 預設情況下輸入框是可以手動拉伸的
<!--禁止手動拉伸-->
<style type="text/css">
textarea{
resize: none;
}
</style>
下拉列表
- 作用: select標籤和ul、ol、dl一樣，都是組標籤. 用於建立表單中的待選列表, 可以從選擇某一個帶選項
- 格式:
選擇籍貫:
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option>貴州</option>
</select>
- 給下拉列表設定預設值
- 和radio、checkbox一樣select也可以設定預設值, 通過selected屬性設定<option selected="selected">貴州</option>
<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山東</option>
<option>山西</option>
<option>湖北</option>
<option selected="selected">貴州</option>
</select>
- 給下拉列表新增分組
<select>
<optgroup label="北京市">
<option>海淀區</option>
<option>昌平區</option>
<option>朝陽區</option>
</optgroup>
<optgroup label="廣州市">
<option>天河區</option>
<option>白雲區</option>
</optgroup>
<option selected="selected">貴州</option>
</select>
