????????歡迎來(lái)到博主 Apeiron?的博客，祝您旅程愉快 ！?時(shí)止則止，時(shí)行則行。動(dòng)靜不失其時(shí)，其道光明。
目錄
1、緣起
2、表單標(biāo)簽
2.1、input?標(biāo)簽基本使用?
2.2、input?標(biāo)簽占位文本?
2.3、單選框 radio
2.4、上傳文件?
2.5、多選框 - checkbox
2.6、下拉菜單?
2.7、文本域?
2.8、label?標(biāo)簽?
2.9、按鈕 - button
2.10、無(wú)語(yǔ)義的布局標(biāo)簽?
2.11、字符實(shí)體?
3、總結(jié)?
1、緣起
????????在 HTML 中，表單標(biāo)簽（<form>）用于創(chuàng)建用戶與網(wǎng)頁(yè)進(jìn)行交互的輸入表單。它是構(gòu)建交互式網(wǎng)頁(yè)的重要組件之一，提供了一種收集用戶輸入數(shù)據(jù)的機(jī)制。表單標(biāo)簽的作用如下：
①? 數(shù)據(jù)收集：表單標(biāo)簽允許用戶在網(wǎng)頁(yè)中輸入和提交數(shù)據(jù)。通過(guò)表單，用戶可以輸入文本、選擇選項(xiàng)、上傳文件等，將數(shù)據(jù)發(fā)送到服務(wù)器或進(jìn)行本地處理。
②? 用戶交互：表單標(biāo)簽提供了各種表單元素（如輸入框、下拉列表、單選按鈕、復(fù)選框等），使用戶能夠與網(wǎng)頁(yè)進(jìn)行交互，提供信息、做出選擇或執(zhí)行特定操作。
③? 數(shù)據(jù)傳輸：通過(guò)表單標(biāo)簽提交的數(shù)據(jù)可以通過(guò) HTTP 協(xié)議發(fā)送到服務(wù)器端進(jìn)行處理。服務(wù)器端可以接收表單數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證、存儲(chǔ)、處理或返回相應(yīng)的結(jié)果。
④? 客戶端驗(yàn)證：表單標(biāo)簽支持一些基本的客戶端驗(yàn)證功能，如輸入字段的必填性、數(shù)據(jù)格式驗(yàn)證等。這可以提高用戶輸入的準(zhǔn)確性，并減輕服務(wù)器端的驗(yàn)證負(fù)擔(dān)。
⑤? 界面布局：表單標(biāo)簽還可以用于組織和布局網(wǎng)頁(yè)的其他元素?？梢詫⒈韱卧睾推渌麅?nèi)容組合在一起，創(chuàng)建用戶友好的界面。
2、表單標(biāo)簽
作用：收集用戶信息
使用場(chǎng)景：
①? 登錄頁(yè)面
②? 注冊(cè)頁(yè)面
③? 搜索區(qū)域
2.1、input?標(biāo)簽基本使用?
input?標(biāo)簽 type?屬性值不同，則功能不同
<input? type = "...">
| type?屬性值 | 說(shuō)明 |
| text | 文本框，用于輸入單行文本 |
| password | 密碼框 |
| radio | 單選框 |
| checkbox | 多選框 |
| file | 上傳文件 |
示例代碼：?
<body>
<!-- 特點(diǎn)：輸入什么就顯示什么 -->
文本框：<input type="text" placeholder="請(qǐng)輸入用戶名">
<br><br>
<!-- 特點(diǎn)：輸入什么都是以 點(diǎn) 的形式顯示 -->
密碼框：<input type="password" placeholder="請(qǐng)輸入密碼">
<br><br>
單選框：<input type="radio">
<br><br>
多選框：<input type="checkbox">
<br><br>
上傳文件：<input type="file">
</body>
2.2、input?標(biāo)簽占位文本?
占位文本：提示信息（文本框和密碼框都可以使用）
<input? type? = "..." placeholder = "提示信息">
示例代碼：?
<body>
<!-- 特點(diǎn)：輸入什么就顯示什么 -->
文本框：<input type="text" placeholder="請(qǐng)輸入用戶名">
<br><br>
<!-- 特點(diǎn)：輸入什么都是以 點(diǎn) 的形式顯示 -->
密碼框：<input type="password" placeholder="請(qǐng)輸入密碼">
<br><br>
單選框：<input type="radio">
<br><br>
多選框：<input type="checkbox">
<br><br>
上傳文件：<input type="file">
</body>
2.3、單選框 radio
常用屬性：
| 屬性名 | 作用 | 特殊說(shuō)明 |
| name | 控件名稱 | 控件分組，同組只能選中一個(gè)（單選功能） |
| checked | 默認(rèn)選中 | 屬性名和屬性值相同，簡(jiǎn)寫(xiě)為一個(gè)單詞 |
<input? type = "radio"? name = "gender" checked>?男
<input? type = "radio"? name = "gender">女?
示例代碼：?
<body>
性別：
<input type="radio" name = "gender" checked>男
<input type="radio" name = "gender">女
</body>
2.4、上傳文件?
? ? ? ? 默認(rèn)情況下，文件上傳表單控件只能上傳一個(gè)文件，添加 multiple?屬性可以實(shí)現(xiàn) 文件多選 功能。
<input? type = "file"? multiple>
2.5、多選框 - checkbox
多選框也叫?復(fù)選框。
默認(rèn)選中：checked
<input? type = "checkbox"? checked>?籃球
示例代碼：?
<body>
興趣愛(ài)好：
<input type="checkbox" checked>唱
<input type="checkbox" checked>跳
<input type="checkbox" checked>rap
<input type="checkbox" checked>籃球
</body>
2.6、下拉菜單?
標(biāo)簽：select?嵌套 option ，select?是下拉菜單整體，option?是下拉菜單的每一項(xiàng)。
<select>
<option></option>
<option></option>
<option selected></option>
......
</select>示例代碼：?
<body>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option selected>深圳</option>
</select>
</body>
2.7、文本域?
作用：多行輸入文本的表單控件
標(biāo)簽：textarea，雙標(biāo)簽
?<textarea >默認(rèn)提示文字</textarea>
示例代碼：?
<body>
<!-- 右下角有拖拽功能，未來(lái)都會(huì)被禁用；
未來(lái)工作中，用 CSS 設(shè)置尺寸 -->
<textarea >請(qǐng)輸入評(píng)論</textarea>
</body>
2.8、label?標(biāo)簽?
作用：網(wǎng)頁(yè)中，某個(gè)標(biāo)簽的說(shuō)明文本
經(jīng)驗(yàn)：用 label?標(biāo)簽綁定文字和表單控件的關(guān)系，增大表單控件的點(diǎn)擊范圍。?
使用 label?標(biāo)簽 -?增大點(diǎn)擊范圍?
①? 寫(xiě)法一
????????label?標(biāo)簽只包裹內(nèi)容，不包裹表單控件，設(shè)置 label?標(biāo)簽的 for?屬性值和表單控件的 id?屬性值 相同。?
<input? type = "radio"? id = "man">
<label? for = "man">男</label>
②? 寫(xiě)法二
? ? ? ? 使用 label?標(biāo)簽 包裹文字和表單控件，不需要屬性。
<label><input? type = "radio">女</label>
示例代碼：?
<body>
<input type="radio" name = "gender" id = "man">
<label for="man">男</label>
<label ><input type="radio" name = "gender">女</label>
</body>
? ? ? ? 通過(guò)上述代碼和圖片可以看出，當(dāng)沒(méi)有使用 label?標(biāo)簽時(shí)，只能點(diǎn)擊單選框進(jìn)行選擇；當(dāng)使用 label?標(biāo)簽時(shí)，不僅能使用單選框進(jìn)行選擇，還可以點(diǎn)擊“男”“女”字樣進(jìn)行選擇，這就是 label?標(biāo)簽增大表單控件的點(diǎn)擊范圍 。?
2.9、按鈕 - button
<button? type = " ">按鈕</button>
type?屬性值：?
| type?屬性值 | 說(shuō)明 |
| submit | 提交按鈕，點(diǎn)擊后可以提交數(shù)據(jù)到后臺(tái)（默認(rèn)功能） |
| reset | 重置按鈕，點(diǎn)擊后將表單控件恢復(fù)默認(rèn)值 |
| button | 普通按鈕，默認(rèn)沒(méi)有功能，一般配合 JavaScript?使用 |
示例代碼：?
<body>
<!-- form 表單區(qū)域 -->
<!-- action="" 發(fā)送數(shù)據(jù)的地址 -->
<form action="">
用戶名：
<input type="text">
<br><br>
密碼：
<input type="password">
<br><br>
<!-- 如果省略 type 屬性，功能是 提交 -->
<button type = "submit">提交</button>
<button type = "reset">重置</button>
<button type = "button">普通按鈕</button>
</form>
</body>
注：form?標(biāo)簽管理整理整個(gè)表單，要使得按鈕 button?標(biāo)簽?zāi)軌蚴褂茫仨殞⑵浞旁?form?標(biāo)簽下面。
2.10、無(wú)語(yǔ)義的布局標(biāo)簽?
作用：布局網(wǎng)頁(yè)（劃分網(wǎng)頁(yè)區(qū)域，擺放內(nèi)容）
①? div ：獨(dú)占一行
②? span ：不換行
<div>div?標(biāo)簽，獨(dú)占一行</div>
<span>span 標(biāo)簽，不換行</span>
示例代碼：?
<body>
<!-- div 大盒子 -->
<div>這是 div 標(biāo)簽</div>
<div>這是 div 標(biāo)簽</div>
<!-- span 小盒子 -->
<span>這是 span 標(biāo)簽</span>
<span>這是 span 標(biāo)簽</span>
</body>
2.11、字符實(shí)體?
作用：在網(wǎng)頁(yè)中?顯示預(yù)留字符
| 顯示結(jié)果 | 描述 | 實(shí)體名稱 |
| 空格 | | |
| < | 小于號(hào) | < |
| > | 大于號(hào) | > |
<body>
<!-- 在代碼中敲鍵盤(pán)的空格，網(wǎng)頁(yè)只識(shí)別一個(gè)空格 -->
< 判天地之美，析萬(wàn)物之理 >
</body>
3、總結(jié)?
????????總結(jié)來(lái)說(shuō)，表單標(biāo)簽在 HTML 中的作用是 創(chuàng)建交互式的用戶界面，收集用戶輸入數(shù)據(jù)，并將數(shù)據(jù)發(fā)送到服務(wù)器進(jìn)行處理。它是構(gòu)建用戶與網(wǎng)頁(yè)交互的重要工具。
????????本期的分享總結(jié)就到這里了，如果有疑問(wèn)的小伙伴兒，我們?cè)谠u(píng)論區(qū)交流嗷~~~，筆者必回，我們下期再見(jiàn)啦 ?。?mark hidden color="red">文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-486908.html
前端 - HTML?專(zhuān)欄系列將持續(xù)更新 ，，，，，，文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-486908.html
到了這里，關(guān)于【前端 - HTML】第 6 課 - 表單標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
