本節(jié)大綱
- 課時44表單標(biāo)簽-input(掌握)
- 課時45表單標(biāo)簽-按鈕(掌握)
- 課時46Label標(biāo)簽(掌握)
- 課時47dalist標(biāo)簽(了解)
- 課時48表單標(biāo)簽-H5(了解)
- 課時49表單標(biāo)簽-非input標(biāo)簽(掌握)
- 課時50表單練習(xí)上(理解)
- 課時51表單練習(xí)下(理解)
表單標(biāo)簽-input
什么是表單？
專門用來收集用戶信息的
什么是表單元素？
也就是HTML的一些標(biāo)簽而已，只是他們比較的特殊，他們有特殊的外觀和功能
表單的格式
<form>
<表單元素。。。。。。。。>
</form>
常見的一些表單元素
input標(biāo)簽
他有一個type屬性，其取值不同，決定input標(biāo)簽的功能和外觀的不同
<form >
<!-- 明文輸入框 -->
賬號<input type="text"><br>
<!-- 暗文輸入框 -->
密碼<input type="password"><br>
<!-- 為輸入框設(shè)置默認(rèn)值 -->
表單1<input type="text" value="admin"><br>
表單2<input type="password" value="admin"><br>
<!--
單選框
注意：
1.默認(rèn)情況下，單選框不會互斥，若要實現(xiàn)互斥,我們需要給他們設(shè)置一個name屬性，而且必須設(shè)置相同的值;
2.要想讓單選框有個默認(rèn)的選項，可以添加checked="checked"屬性,但是屬性和其值要是一致的話，可以只寫屬性，但在XHTML中，就不能只寫一個，建議以后都寫;
-->
性別:
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女<br>
<!--
復(fù)選框
- 要是想要有默認(rèn)的選擇的話，添加屬性checked="checked"，用法同上
-->
您所統(tǒng)一的條款：<br>
<input type="checkbox" checked>1<br>
<input type="checkbox">2<br>
<input type="checkbox">3<br>
<input type="checkbox">4<br>
</form>
表單標(biāo)簽-按鈕
<form action="https://www.baidu.com">
<!-- 明文輸入框 -->
賬號<input type="text"><br>
<!-- 暗文輸入框 -->
密碼<input type="password"><br>
<!-- button是按鈕的意思，可配合js使用 -->
<input type="button" value="I am button" onclick="alert('Fuck me PLEASE!')"><br>
<!-- image是圖片按鈕的意思，和上面的用法一樣，可以自定義按鈕的樣子，可配合js使用 -->
<input type="image" src="#" value="I am button" onclick="alert('Fuck me PLEASE!')"><br>
<!-- 重置按鈕reset，它是用來清空表單中的數(shù)據(jù)的，注意：重置按鈕有默認(rèn)的按鈕標(biāo)題，叫做“重置”，可以用value修改 -->
<input type="reset">
<!-- 提交按鈕，將表單的數(shù)據(jù)提交到服務(wù)器
注意：要想把數(shù)據(jù)提交上去，必須滿足兩個條件
1. 需要提交到那個服務(wù)器（可以通過form的action屬性指定提交到哪個服務(wù)器）；
2. 就是需要提交的是什么（要想指定提交啥，就給需要提交的內(nèi)容的標(biāo)簽內(nèi)加上name）
-->
<input type="submit">
<!-- 隱藏域，它是不會展示出來的，是用來悄悄咪咪的收集用戶的一些數(shù)據(jù),submit后，下面的信息就是悄悄咪咪的添加了66666666的數(shù)據(jù)，到時候?qū)Wjs的時候會動態(tài)的操作 -->
<input type="hidden" name="CCC" value="66666666">
</form>
Label標(biāo)簽
<!--
默認(rèn)情況下，文字和輸入框是沒有關(guān)聯(lián)的，點擊文字是不會聚焦到輸入框的，那就需要文字和輸入框進行綁定；
label標(biāo)簽就可以實現(xiàn)
綁定步驟：
1.用label包裹內(nèi)容，為內(nèi)容加上id
2.在label標(biāo)簽中的for屬性中填寫內(nèi)容中的id
-->
<form action="">
<label for="account">
賬戶 <input type="text" id="account"><br>
</label>
<label for="pwd">
密碼 <input type="password" id="pwd"><br>
</label>
<!--
或者是直接將文字和輸入框包在label中
但是這種方法是有局限性的，就是不能任意自定義的綁定
-->
<label>
備注 <input type="text">
</label>
</form>
dalist標(biāo)簽
<body>
<!--
dalist標(biāo)簽：給輸入框綁定候選項
-->
請輸入你的車型: <input type="text" list="cars"><br>
<datalist id="cars">
<option>寶馬</option>
<option>奔馳</option>
<option>奧拓</option>
<option>三輪</option>
<option>步行</option>
<datalist>
</body>
表單標(biāo)簽-H5
<!--
H5提供了很多的input的type類型，但這些類型可能不是所有瀏覽器都能支持，現(xiàn)在就是了解一下；
其實，就是使用正則表達式給你校驗一下你輸入的內(nèi)容
-->
<form action="">
郵箱： <input type="email">
域名： <input type="url">
<!-- number只能輸入數(shù)字 -->
電話號碼： <input type="number">
時間： <input type="date">
顏色： <input type="color">
<input type="submit">
</form>
表單標(biāo)簽-非input標(biāo)簽
<!--
1.select標(biāo)簽
作用：用于定義下拉列表
注意點：
- 下拉列表不能輸入內(nèi)容，但可以在列表中直接選擇內(nèi)容
- 可設(shè)置默認(rèn)值,為option標(biāo)簽添加selected="selected"
- 可以給option包裹一個opgroup標(biāo)簽，實現(xiàn)內(nèi)容的分組
-->
<!-- <select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="" selected="selected">5</option>
</select> -->
<select name="" id="">
<optgroup label="北京">
<option value="">朝陽區(qū)</option>
<option value="">昌平區(qū)</option>
</optgroup>
<optgroup label="其他">
<option value="">朝陽區(qū)</option>
<option value="">昌平區(qū)</option>
<option value="">天河區(qū)</option>
<option value="">張店區(qū)</option>
<option value="" selected="selected">黃浦區(qū)</option>
</optgroup>
</select>
<br><br><br><br>
<!--
2.textarea標(biāo)簽
定義多行輸入框
注意點：
- 默認(rèn)情況下，輸入框可以無限換行，有自己的寬度和高度，cols是寬幾個字，rows是行數(shù)
- 默認(rèn)情況下，輸入框是可以手動拉伸的，用css是可以改變的
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
表單練習(xí)
- 在表單標(biāo)簽中，除了按鈕標(biāo)簽以外的標(biāo)簽，都可以為他們附上value的屬性為他們賦值，并提交到服務(wù)器，比如單選或者復(fù)選框，需要為其賦值才行，否則提交上去的都是一堆on
- 為表單加上邊框與邊框說明：
<fieldset> <legend>注冊界面</legend> <form> ... </form> </fieldset>
