表單：專門用來(lái)搜集用戶信息

元素：在HTML中 標(biāo)簽、標(biāo)記、表單都是指HTML中的標(biāo)簽

如： a標(biāo)簽、a標(biāo)記、a元素

表單元素：也是HTML中的一些標(biāo)簽，只是它們比較特殊，有特殊的外觀的默認(rèn)的功能

表單格式：

常見的表單元素：

① input標(biāo)簽

type屬性：

text明文本

password密碼

radio 單選框，必須設(shè)置name屬性為相同的值

radio默認(rèn)不會(huì)選中任何選項(xiàng)，需要添加一個(gè)checked屬性

男

value屬性：可以給輸入框輸入默認(rèn)值

checkbox 多選框架，可同時(shí)選擇多個(gè)

Paste_Image.png

type的其它屬性：

按鈕 type="button" 配合JS做一些相應(yīng)操作

重置按鈕：把填寫好的表單數(shù)據(jù)清空

如果想修改 重置按鈕 的title，可通過(guò)value屬性來(lái)修改

提交按鈕：把表單添加的數(shù)據(jù)提交到服務(wù)器

①需要給form表單添加action屬性 ，通過(guò)action屬性指定需要提交的服務(wù)器地址

②表單中需要提交的數(shù)據(jù) 都要設(shè)置name屬性

Paste_Image.png

Paste_Image.png

Paste_Image.png

隱藏域：配合提交按鈕 默默的將數(shù)據(jù)提交到服務(wù)器 用戶不知情，在界面看不到這個(gè)隱藏域

Label標(biāo)簽：讓輸入框和文字綁定

默認(rèn)情況下，文字與輸入框無(wú)關(guān)聯(lián)，點(diǎn)擊文字 輸入框不會(huì)聚焦

文字用label標(biāo)簽包圍，輸入框添加id屬性，label標(biāo)簽添加for屬性和輸入框的id綁定

Paste_Image.png

簡(jiǎn)化的版本

Paste_Image.png

DataList標(biāo)簽：給輸入框綁定 待選項(xiàng)

格式：

待選項(xiàng)

Paste_Image.png

input標(biāo)簽type在H5中新增的類型：

email 、url、date、number、

表單標(biāo)簽中，不光有input標(biāo)簽，還有一些其它的標(biāo)簽

select標(biāo)簽：定義下拉列表，城市選擇。。

列表數(shù)據(jù)

selct標(biāo)簽：自己就是一個(gè)列表

datalist標(biāo)簽：指定待選項(xiàng) 綁定給一個(gè)輸入框

Paste_Image.png

可以給option標(biāo)簽包圍optgroup

Paste_Image.png

多行輸入框：textarea

內(nèi)容

注意：默認(rèn)輸入框可無(wú)限換行、有自己的寬度和高度

cols可修改寬度 rows可修改高度

Paste_Image.png

fieldset標(biāo)簽給表單添加一個(gè)邊框

legend標(biāo)簽給邊框指定一個(gè)標(biāo)題

Paste_Image.png

orient/strip%7CimageView2/2/w/1240)

總結(jié)

以上是生活随笔為你收集整理的html的表单标记格式,HTML表单标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。