表單標簽
- 作用: 用于收集用戶信息, 讓用戶填寫、選擇相關信息
- 格式:
<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" name="fullname" maxlength="8" />
-
-
單選框(radio)
- 作用: 用戶只能從眾多選項中選擇其中一個
- 單選按鈕，天生是不互斥的，如果想互斥，必須要有
相同的name屬性
<input type="radio" name="xingbie" /> 男
<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"/> 棒球
- label標簽
- 作用: label標簽
不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性 - 注意事項:
- 表單元素要有一個id，然后label標簽就有一個for屬性，for屬性和id相同就表示綁定了
- 所有表單元素都可以通過label綁定
- 作用: 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>
-
按鈕
- 作用: 定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本）
<input type="button" value="點我丫" />
-
圖片按鈕
- 作用:定義圖像形式的提交按鈕
<input type="image" src="lnj.jpg" />
-
重置按鈕
- 作用: 定義重置按鈕。重置按鈕會清除表單中的所有數據
<input type="reset" />-
注意事項:- 這個按鈕不需要寫value自動就有“重置”文字
- reset只對form表單中表單項有效果
-
提交按鈕
- 作用:定義提交按鈕。提交按鈕會把表單數據發送到action屬性指定的頁面
<input type="submit" />-
注意事項:- 這個按鈕不需要寫value自動就有“提交”文字
- 要想通過submit提交數據到服務器, 被提交的表單項都必須設置name屬性
-
默認明文傳輸(GET)不安全, 可以將method屬性設置為POST改為非明文傳輸(學到Ajax再理解)
-
隱藏域
- 作用: 定義隱藏的輸入字段
<input type="hidden">- 暫時不用掌握, 在Ajax中對數據的CRUD操作有非常大的作用
-
取色器
<input type="color">-
HTML5中input類型增加了很多type類型, 例如color、date但是都不兼容, 后面講到瀏覽器兼容時會重點講解
-
日期選擇器
<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 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屬性設置
<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>
學習交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038
