文章目錄

• 一、input表單標(biāo)簽
• • 1、文本框
  • 2、密碼框
  • 3、單選框
  • 4、復(fù)選框
  • 5、文件選擇
  • 6、按鈕
• 二、button按鈕標(biāo)簽
• 三、select下拉菜單標(biāo)簽
• 四、textarea文本域標(biāo)簽
• 五、label標(biāo)簽

一、input表單標(biāo)簽

在網(wǎng)頁(yè)中可以實(shí)現(xiàn)收集用戶的信息，input標(biāo)簽可以通過(guò)type屬性的不同值從而展現(xiàn)不同的效果

1、文本框

當(dāng)input標(biāo)簽type屬性的值為text時(shí)，展現(xiàn)的是文本框的效果，可以在網(wǎng)頁(yè)中輸入單行文本

還可以結(jié)合占位符placeholder屬性來(lái)實(shí)現(xiàn)提示輸入的功能，placeholder屬性的值為要提示的文本，當(dāng)文本框輸入文本后，提示文本自動(dòng)隱藏，當(dāng)輸入框中的內(nèi)容清空后，提示文本又會(huì)出現(xiàn)

2、密碼框

當(dāng)input標(biāo)簽的type屬性值為password時(shí)，展現(xiàn)的是密碼框的效果，可以在網(wǎng)頁(yè)中輸入加密的文本，也可以配合placeholder屬性使用

3、單選框

當(dāng)input標(biāo)簽的type屬性值為radio時(shí)，可以實(shí)現(xiàn)單選框的效果，要用name屬性配合，來(lái)實(shí)現(xiàn)多選一的效果，name屬性有分組的功能，name屬性值相同的為一組，一組只能同時(shí)有一個(gè)被選中

配合checked屬性可以實(shí)現(xiàn)默認(rèn)選中的效果，即使是刷新網(wǎng)頁(yè)，也是不變的

4、復(fù)選框

當(dāng)input標(biāo)簽的type屬性值為checkbox時(shí)，可以實(shí)現(xiàn)復(fù)選框的效果，復(fù)選框可以同時(shí)選中多個(gè)選項(xiàng)，也可以配合checked屬性來(lái)實(shí)現(xiàn)默認(rèn)選中效果

5、文件選擇

當(dāng)input標(biāo)簽的type屬性值為file時(shí)，可以實(shí)現(xiàn)文件選擇的效果，配合multiple屬性可以實(shí)現(xiàn)多文件選擇

6、按鈕

input標(biāo)簽在網(wǎng)頁(yè)中可以顯示不同功能的按鈕，但是如果要實(shí)現(xiàn)按鈕的功能，需配合form標(biāo)簽使用，需用form標(biāo)簽包裹起來(lái)
a、當(dāng)type的屬性為submit時(shí),為提交按鈕，點(diǎn)擊之后可以提交數(shù)據(jù)給后端服務(wù)器
b、當(dāng)type的屬性為reset時(shí)，為重置按鈕，點(diǎn)擊之后會(huì)刷新重置恢復(fù)表單的默認(rèn)值
c、當(dāng)type的屬性為button時(shí)，為普通按鈕，沒有功能

二、button按鈕標(biāo)簽

網(wǎng)頁(yè)中顯示用戶點(diǎn)擊的按鈕就是button標(biāo)簽實(shí)現(xiàn)的，button標(biāo)簽是雙標(biāo)簽,button標(biāo)簽的type屬性是和input中的按鈕type屬性是一樣的，實(shí)現(xiàn)的功能也相同

三、select下拉菜單標(biāo)簽

在網(wǎng)頁(yè)中可以提供多個(gè)選擇的下拉菜單，有兩個(gè)標(biāo)簽組成，一個(gè)是下拉菜單的整體select標(biāo)簽，一個(gè)是下拉菜單的選項(xiàng)option標(biāo)簽，可配合selected屬性，設(shè)置下拉菜單的默認(rèn)值

四、textarea文本域標(biāo)簽

在網(wǎng)頁(yè)中可輸入多行文本的表單，需配合兩個(gè)屬性使用，cols屬性，設(shè)置文本域的可見寬度，rows屬性，設(shè)置文本域的可見行數(shù)，文本域的右下角可以拖拽來(lái)改變大小

五、label標(biāo)簽

用于綁定內(nèi)容與表單標(biāo)簽的關(guān)系，可以實(shí)現(xiàn)單選框和多選框中，不同點(diǎn)擊小圓，點(diǎn)擊文字也可以選中的效果，使用方法有兩種，一種是使用label標(biāo)簽把內(nèi)容包裹起來(lái)，在表單標(biāo)簽上添加id屬性，在label標(biāo)簽的for屬性中設(shè)置對(duì)應(yīng)的id屬性值，第二種方法是直接使用label標(biāo)簽把內(nèi)容和表單標(biāo)簽一起包裹起來(lái)，把label標(biāo)簽的for屬性刪除即可

總結(jié)

以上是生活随笔為你收集整理的input表单标签和label标签以及常使用标签的介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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