文章目錄

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

一、input表單標簽

在網頁中可以實現收集用戶的信息，input標簽可以通過type屬性的不同值從而展現不同的效果

1、文本框

當input標簽type屬性的值為text時，展現的是文本框的效果，可以在網頁中輸入單行文本

還可以結合占位符placeholder屬性來實現提示輸入的功能，placeholder屬性的值為要提示的文本，當文本框輸入文本后，提示文本自動隱藏，當輸入框中的內容清空后，提示文本又會出現

2、密碼框

當input標簽的type屬性值為password時，展現的是密碼框的效果，可以在網頁中輸入加密的文本，也可以配合placeholder屬性使用

3、單選框

當input標簽的type屬性值為radio時，可以實現單選框的效果，要用name屬性配合，來實現多選一的效果，name屬性有分組的功能，name屬性值相同的為一組，一組只能同時有一個被選中

配合checked屬性可以實現默認選中的效果，即使是刷新網頁，也是不變的

4、復選框

當input標簽的type屬性值為checkbox時，可以實現復選框的效果，復選框可以同時選中多個選項，也可以配合checked屬性來實現默認選中效果

5、文件選擇

當input標簽的type屬性值為file時，可以實現文件選擇的效果，配合multiple屬性可以實現多文件選擇

6、按鈕

input標簽在網頁中可以顯示不同功能的按鈕，但是如果要實現按鈕的功能，需配合form標簽使用，需用form標簽包裹起來
a、當type的屬性為submit時,為提交按鈕，點擊之后可以提交數據給后端服務器
b、當type的屬性為reset時，為重置按鈕，點擊之后會刷新重置恢復表單的默認值
c、當type的屬性為button時，為普通按鈕，沒有功能

二、button按鈕標簽

網頁中顯示用戶點擊的按鈕就是button標簽實現的，button標簽是雙標簽,button標簽的type屬性是和input中的按鈕type屬性是一樣的，實現的功能也相同

三、select下拉菜單標簽

在網頁中可以提供多個選擇的下拉菜單，有兩個標簽組成，一個是下拉菜單的整體select標簽，一個是下拉菜單的選項option標簽，可配合selected屬性，設置下拉菜單的默認值

四、textarea文本域標簽

在網頁中可輸入多行文本的表單，需配合兩個屬性使用，cols屬性，設置文本域的可見寬度，rows屬性，設置文本域的可見行數，文本域的右下角可以拖拽來改變大小

五、label標簽

用于綁定內容與表單標簽的關系，可以實現單選框和多選框中，不同點擊小圓，點擊文字也可以選中的效果，使用方法有兩種，一種是使用label標簽把內容包裹起來，在表單標簽上添加id屬性，在label標簽的for屬性中設置對應的id屬性值，第二種方法是直接使用label標簽把內容和表單標簽一起包裹起來，把label標簽的for屬性刪除即可

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。