柚子快報(bào)邀請(qǐng)碼778899分享：前端 HTML詳解連載（3）

http://yzkb.51969.com/

HTML詳解連載（3）

專欄鏈接 [link](http://t.csdn.cn/xF0H3)下面進(jìn)行專欄介紹

開始嘍表單作用使用場景

input標(biāo)簽基本使用示例type屬性值以及說明

input標(biāo)簽占位文本示例注意

單選框 radio代碼示例

多選框-checkbox注意代碼示例

文本域作用標(biāo)簽：示例

label標(biāo)簽作用經(jīng)驗(yàn)寫法一寫法二：強(qiáng)調(diào)

按鈕-buttontype屬性值和說明

無語義的布局標(biāo)簽作用示例

字符實(shí)體作用表格

專欄鏈接 link

下面進(jìn)行專欄介紹

本專欄是自己學(xué)前端的征程，純手敲的代碼，自己跟著黑馬課程學(xué)習(xí)的，并加入一些自己的理解，對(duì)代碼和筆記 進(jìn)行適當(dāng)修改。希望能對(duì)大家能有所幫助，同時(shí)也是請(qǐng)大家對(duì)我進(jìn)行監(jiān)督，對(duì)我寫的代碼進(jìn)行建議，互相學(xué)習(xí)。

開始嘍

表單

作用

收集用戶信息

使用場景

登錄頁面，注冊(cè)頁面，搜素區(qū)域

input標(biāo)簽基本使用

input標(biāo)簽type屬性值不同，則功能不同

示例

type屬性值以及說明

屬性值說明text文本框，用于輸入單行文本password密碼框radio單選框checkbox多選框file上傳文件

input標(biāo)簽占位文本

占位文本：提示信息

示例

注意

文本框和密碼框都可以使用

單選框 radio

屬性名作用特殊說明name控件名稱控件分組，同組只能選中一個(gè)（單選功能）checked默認(rèn)選中屬性名和屬性值相同，簡寫為一個(gè)單詞

## 上傳文件-file 默認(rèn)情況下，文件上傳表單控件只能上傳一個(gè)文件，添加multiple屬性可以實(shí)現(xiàn)文件 多選功能

代碼示例

多選框-checkbox

多選框也叫復(fù)選框

注意

默認(rèn)選中：checked

代碼示例

敲前端代碼

## 下拉菜單 select 嵌套o(hù)ption， select是下拉菜單整體，option是下拉菜單的每一項(xiàng)

文本域

作用

多行輸入文本的表單控件

標(biāo)簽：

textarea，雙標(biāo)簽

示例

默認(rèn)提示文字

label標(biāo)簽

作用

網(wǎng)頁中，某個(gè)標(biāo)簽的說明文本

經(jīng)驗(yàn)

用lable標(biāo)簽綁定文職和表單控件的關(guān)系，增大表單的點(diǎn)擊范圍

寫法一

lable標(biāo)簽只包裹內(nèi)容，不包裹表單控件 設(shè)置lable標(biāo)簽的for屬性值和表單控件的id屬性相同

男

寫法二：

使用lable標(biāo)簽包裹文字和表單控件，不需要屬性

女

強(qiáng)調(diào)

支持lable標(biāo)簽增大點(diǎn)擊范圍的表單控件：文本框、密碼框、上傳文件、多選框、下拉菜 單、文本域等等。

按鈕-button

按鈕

type屬性值和說明

屬性值說明submit提交按鈕，點(diǎn)擊后可以提交數(shù)據(jù)到后臺(tái)（默認(rèn)功能）reset重置按鈕，點(diǎn)擊后將表單控件恢復(fù)到默認(rèn)值button普通按鈕，默認(rèn)沒有功能，一般配合JavaScript使用

無語義的布局標(biāo)簽

作用

布局網(wǎng)頁（劃分網(wǎng)頁區(qū)域，擺放內(nèi)容） div:獨(dú)占一行 span：不換行

示例

div標(biāo)簽，獨(dú)占一行