表單標(biāo)簽：
?? ?在網(wǎng)頁(yè)中為了收集用戶資料，此時(shí)你就會(huì)用到表單。
在HTML中，一個(gè)完整的表單由表單域、表單控件和提示信息3個(gè)部分組成
1.表單域
表單域就是一個(gè)包含表單元素的區(qū)域。
在HTML標(biāo)簽中，<form>標(biāo)簽用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞。
<form>會(huì)把它范圍內(nèi)的表單元素信息提交給服務(wù)器。
<form action="url地址" method="提交方式" name="表單域的名稱">
各種表單元素控件
</form>
| 屬性 | 屬性值 | ?? ?作用 |
|---|---|---|
| action | url地址 | 用于接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。 |
| method | post/get | 用于設(shè)置表單數(shù)據(jù)的提交方式，取值為get或post |
| name | 名稱 | 用于指定表單的名稱，以區(qū)分同一頁(yè)面中的多個(gè)表單域 （注意傳值的時(shí)候，必須有name這個(gè)屬性） |
2.表單控件（表單元素）
input單詞是輸入的意思，在表單元素中<input>標(biāo)簽用于收集用戶信息。
在<input>標(biāo)簽中，有一個(gè)必須的屬性type，根據(jù)不同的type屬性值，輸入的字段有多種形式
（文本字段、復(fù)選框、掩碼后的文本控件（密碼框），單選按鈕、按鈕等）
<input type="屬性值" />
注意：
?? ?1.<input/>標(biāo)簽為單標(biāo)簽
?? ?2.type屬性設(shè)置不同的屬性值用來(lái)指定不同的控件類型
type 屬性的屬性值機(jī)器表述：
?? ?
| type 屬性值 | 作用 |
|---|---|
| button | 定義可點(diǎn)擊按鈕 |
| checkbox | 定義復(fù)選框 |
| file | 定義輸入字段 和“瀏覽”按鈕，供文件上傳。 |
| hidden | 定義隱藏的輸入字段 |
| image | 定義圖像形式的密碼框 |
| password | 定義密碼字段 |
| ?radio | 定義單選按鈕 |
| reset | 定義重置標(biāo)簽，重置按鈕會(huì)清空表單所有數(shù)據(jù) |
| submit | 定義提交按鈕，會(huì)把表單數(shù)據(jù)發(fā)送給服務(wù)器 |
| text | 定義單行的輸入字段，用戶可以在其中輸入文本，默認(rèn)寬度為20個(gè)字符 |
注意：如果你要寫表單，要先寫表單域<form></form>;當(dāng)然如果單用<input type="屬性值" />的時(shí)候不用form。
<input>表單元素
除了type屬性外，<input>標(biāo)簽還有其他很多屬性
| 屬性? | ?屬性值 ? | ?表述 |
| name | 用戶自定義 | 定義input 元素的名稱，區(qū)分各個(gè)表單控件 |
| value | 用戶自定義 | 規(guī)定input 元素的值,也就是文本框中經(jīng)常出現(xiàn)的默認(rèn)文本值 |
| checked | checked | 規(guī)定此input 元素首次加載時(shí)應(yīng)用當(dāng)被選中 |
| maxlength | 正整數(shù) | 規(guī)定輸入字段中的字符的最大長(zhǎng)度 |
注意：1.name和value 是每個(gè)表單元素都有的屬性值主要給后臺(tái)人員使用。
?? ?2.name表單元素的名字，要求單選按鈕和復(fù)選框要有相同的name值。
?? ?3.單選按鈕和復(fù)選框可以設(shè)置checked屬性，當(dāng)頁(yè)面打開的時(shí)候可以默認(rèn)選中這個(gè)按鈕
?? ?4.maxlength 是用戶可以在表單元素輸入的最大字符數(shù)，一般較少使用
?? ?5.點(diǎn)擊了提交按鈕，可以把表單域form里面的表單元素里面的值提交給后臺(tái)服務(wù)器。
?? ?6.重置按鈕可以還原表單元素初始的默認(rèn)狀態(tài)
?? ?
?? ?
?? ?
單選按鈕的應(yīng)用：
radio是定義單選按鈕：可以做到多選一
name是標(biāo)簽元素的名字，這里的性別必須用相同的名字name 才可以實(shí)現(xiàn)多選一；
性別：男<input type="radio" name="sex"> 女 <input type="radio" name="sex">
checkbox是復(fù)選框：
這里也需要name屬性
愛(ài)好：吃飯<input type="checkbox" name="hobby"> 睡覺(jué)<input type="checkbox" name="hobby"> 打游戲 <input type="checkbox" name="hobby">
<label>標(biāo)簽
<label>標(biāo)簽用于綁定一個(gè)表單元素，當(dāng)點(diǎn)擊<label>標(biāo)簽內(nèi)的文本時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)（光標(biāo)）轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上來(lái)增加用戶體驗(yàn)，
用法：
?? ?<label for="sex">男</lable>
?? ?<input type="radio" name="sex" id="sex" />
核心：<label>標(biāo)簽的for屬性應(yīng)當(dāng)與相關(guān)元素的id屬性相同。
2.select 下拉表單元素
?? ?使用場(chǎng)景：在頁(yè)面中，如果有多個(gè)選項(xiàng)讓用戶選擇，并且要節(jié)約頁(yè)面空間時(shí)，我們可以使用<select>標(biāo)簽控件定義下拉列表
?? ?語(yǔ)法：<select>
?? ??? ??? ?<option>選項(xiàng)1</option>
?? ??? ??? ?<option>選項(xiàng)2</option>
?? ??? ??? ?<option>選項(xiàng)3</option>
?? ??? ??? ?<option>選項(xiàng)4</option>
?? ??? ?</select>
?? ?注意：1.<select>中至少包含一對(duì)<option>。
?? ??? ?2.在<option>中定義selected="selected"時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
3.textarea文本域元素（特大號(hào)文本框）
?? ?使用場(chǎng)景：當(dāng)用戶輸入內(nèi)容較多的情況下，我們就不能使用文本框表單了，此時(shí)我們可以使用<textarea>標(biāo)簽
?? ?在表單中,<textarea>標(biāo)簽可以定義多行文本輸入的控件。
?? ?語(yǔ)法：
?? ??? ?<textarea rows="3" cols="20">
?? ??? ??? ?文本內(nèi)容
?? ??? ?</textarea>文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-832672.html
?? ?1.cols="每行中的字符數(shù)" ，rows="顯示的行數(shù)"，我們?cè)趯?shí)際開發(fā)中不會(huì)使用，都是用CSS來(lái)改變大小文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-832672.html
到了這里，關(guān)于前端HTML基礎(chǔ)：表單標(biāo)簽看這一篇就行了。的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
