這篇文章主要講解了“html5表單元素有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“html5表單元素有哪些”吧！

10多年的昌黎網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整昌黎建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“昌黎網(wǎng)站設(shè)計(jì)”,“昌黎網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

html5表單元素包括的基本控件：1、單行文本輸入框；2、密碼輸入框；3、多行文本輸入框（文本域）；4、下拉列表；5、單選框；6、復(fù)選框；7、提交按鈕；8、重置按鈕；9、fieldest控件；10、legend控件等。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

表單概述

表單一般用來收集用戶信息，讓用戶填寫、選擇，提交相關(guān)信息；在網(wǎng)頁中， 我們也需要跟用戶進(jìn)行交互，收集用戶資料，此時(shí)也需要表單；供用戶輸入的 HTML 表單通過

在 HTML 中，一個(gè)完整的表單通常由表單控件（表單元素）、提示信息和表單域三部分構(gòu)成

表單控件

包含了具體的表單功能項(xiàng)，例如：單行文本輸入框、密碼輸入框、單選框、復(fù)選框、提交按鈕、重置按鈕等

提示信息

一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作

表單域

相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息，可以通過表單域定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法；如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器

完整的表單包含以下元素

• form 用于創(chuàng)建 HTML 表單

• input 控件，單標(biāo)簽，可用于設(shè)置輸入框、單選框、復(fù)選框、上傳文件、提交按鈕等

• label 為對(duì)應(yīng)的 input 標(biāo)簽定義標(biāo)注（可以認(rèn)為是一個(gè)標(biāo)記或說明）；如果被標(biāo)注的是輸入框，點(diǎn)擊標(biāo)注內(nèi)容時(shí)光標(biāo)自動(dòng)在輸入框中聚焦

• textarea 控件，用于創(chuàng)建多行文本輸入框（文本域）

• select 用于定義下拉列表，需要與 option 標(biāo)簽結(jié)合使用；使用 select 時(shí)需要設(shè)置 name 屬性，用于對(duì)提交到服務(wù)器的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)

• option 定義下拉列表中的項(xiàng)，默認(rèn)只能選擇一項(xiàng)；使用時(shí)需要設(shè)置 value 屬性，提交表單時(shí)會(huì)將對(duì)應(yīng)的選項(xiàng)值提交到服務(wù)器

• fieldest 對(duì)相關(guān)的表單元素進(jìn)行分組，通常與 legend 標(biāo)簽結(jié)合使用

• legend 為 fieldest 的分組元素定義標(biāo)題

• button 定義一個(gè)按鈕，在表單中使用該元素則這個(gè)元素具有提交表單的功能；通常在表單中通過 input 標(biāo)簽的 type 屬性來設(shè)置提交表單的按鈕

各標(biāo)簽常見的屬性

標(biāo)簽

• name 設(shè)置表單的名稱

• action 表單的提交動(dòng)作，表示表單將被提交到哪里；值為 URL 可以是相對(duì)地址或絕對(duì)地址

• method 表單的提交方法，用何種 HTTP 方法提交表單；一般值為 get 或 post 兩種

• enctype 設(shè)置表單數(shù)據(jù)編碼的編碼方式；服務(wù)端會(huì)根據(jù)設(shè)置的編碼方式對(duì)提交的數(shù)據(jù)進(jìn)行解碼；

  其值有三種：

• application/x-www-form-urlencoded 在發(fā)送前編碼所有字符（默認(rèn)）

• multipart/form-data 不對(duì)字符編碼；在使用包含文件上傳控件的表單時(shí)，必須使用該值

• text/plain 空格轉(zhuǎn)換為 “+” 加號(hào)，但不對(duì)特殊字符編碼

標(biāo)簽

• name 定義 input 元素的名稱；向服務(wù)器提交當(dāng)前標(biāo)簽中的數(shù)據(jù)時(shí)需要設(shè)置該屬性

• value 設(shè)置 input 元素的值

  value 屬性對(duì)于不同 input 類型，用法也有所不同：

• 對(duì)于 text、password、hidden 類型，用于定義輸入框中的初始（默認(rèn)）值

• 對(duì)于 checkbox、radio、image 類型，用于定義與 input 元素相關(guān)的值，當(dāng)提交表單時(shí)該值會(huì)發(fā)送到表單的 action URL

• 對(duì)于 button、reset、submit 類型，用于定義按鈕上顯示的文本內(nèi)容

  注：input 類型為 checkbox 和 radio 時(shí)，必須要設(shè)置 value 屬性

• maxlength 設(shè)置 input 標(biāo)簽中的最大字符個(gè)數(shù)，值為數(shù)值類型，超過最大字符個(gè)數(shù)的部分不會(huì)被錄入；一般用于輸入框

• autofocus 設(shè)置了該屬性在頁面加載時(shí)會(huì)自動(dòng)聚焦，屬性值可以不寫；一個(gè)表單只能有一個(gè) input 標(biāo)簽設(shè)置該屬性，多用于輸入框

• placeholder 用于設(shè)置簡短的提示文本；多用于輸入框，輸入內(nèi)容時(shí)提示信息自動(dòng)消失

• checked 設(shè)置某個(gè)選項(xiàng)默認(rèn)被選中；屬性值為 checked，可省略不寫；該屬性只針對(duì) type=“checkbox” 或者 type=“radio” 有效

• accept 設(shè)置提交的文件的類型，只針對(duì) type=“file” 有效；點(diǎn)擊 “選擇文件” 按鈕后，在彈出的資源管理器中只顯示匹配的文件類型

  屬性值有：

• audio/* 所有音頻文件

• video/* 所有視頻文件

• image/* 所有圖片文件

• src 設(shè)置以提交按鈕形式顯示的圖像的位置，值為 url；該屬性與 type=“image” 配合使用

• alt 圖片按鈕的圖片無法顯示時(shí)的替代文本；該屬性只能與 type=“image” 配合使用

• type 用于決定 input 標(biāo)簽的顯示類型；對(duì)應(yīng)的屬性值有很多，不同的屬性值對(duì)應(yīng)不同的類型，默認(rèn)為 text 類型

  對(duì)應(yīng)的屬性值：

  

  

• hidden 用于定義隱藏字段，隱藏字段對(duì)于用戶不可見

• submit 用于定義提交按鈕；點(diǎn)擊該按鈕會(huì)對(duì)表單進(jìn)行提交；可以通過 value 屬性設(shè)置按鈕顯示的文本，未設(shè)置 value 時(shí)默認(rèn)顯示為 “提交”

  

• react 設(shè)置重置按鈕；點(diǎn)擊該按鈕后會(huì)對(duì)表單進(jìn)行重置（在表單中填寫的內(nèi)容會(huì)被清空）

  
  	用戶名：
  	密碼：
  	
  	

• text 單行文本輸入框，寬度默認(rèn)為 20 個(gè)英文字符

  自動(dòng)聚焦：

  
  設(shè)置默認(rèn)值：

  
  設(shè)置最大字符個(gè)數(shù)：

  
  設(shè)置提示信息：

  

• password 密碼輸入框，輸入的內(nèi)容會(huì)以點(diǎn)的形式顯示；同 text 也可以設(shè)置 value、maxlength 等

  

• radio 單選按鈕，多個(gè)選項(xiàng)只能選擇一個(gè)；在使用一組單選按鈕時(shí)，多個(gè) input 標(biāo)簽要設(shè)置 name 屬性并且 name 的屬性值要相同；使用該類型的標(biāo)簽必須要設(shè)置 value 屬性，目的是告訴服務(wù)器被選中項(xiàng)的值

  男女

  
  設(shè)置默認(rèn)被選中：

  男女

  

• checkbox 用于定義復(fù)選框，在一組選項(xiàng)中可以選擇一個(gè)或多個(gè)；同樣需要設(shè)置 name 屬性，name 屬性值也要相同，必須要設(shè)置 value；如果選中了多個(gè)則在提交表單時(shí)將多個(gè)值發(fā)送給服務(wù)器

  嫵媚柔美可愛妖嬈

  
  設(shè)置多個(gè)默認(rèn)被選中：

  嫵媚柔美可愛妖嬈

  

• file 用于選擇文件進(jìn)行上傳；要上傳的文件需要手動(dòng)選擇

  

• image 將圖片作為提交按鈕

  

• button 設(shè)置可點(diǎn)擊的按鈕；通過 value 屬性設(shè)置按鈕顯示的文本，可以通過 onclick 屬性創(chuàng)建點(diǎn)擊事件

標(biāo)簽

• name 文本域的名稱

• cols 設(shè)置文本區(qū)內(nèi)的可見寬度（每行顯示的英文字符個(gè)數(shù)，列數(shù)）；值為數(shù)值類型

• rows 設(shè)置文本區(qū)內(nèi)的可見行數(shù)（行數(shù)）

• required 設(shè)置為必填項(xiàng)；值為 required

• disabled 禁用

p 標(biāo)簽設(shè)置 contenteditable="true" 也可以實(shí)現(xiàn)文本域效果

相關(guān) CSS 樣式：

p {
    width: 600px;
    height: 300px;
    min-height: 200px;
    _height: 200px;
    /*消除聚焦時(shí)出現(xiàn)的高亮邊框*/
    outline: 0;
    /*當(dāng)內(nèi)容溢出時(shí)，自動(dòng)添加滾動(dòng)條*/
    overflow: auto;
    border: 1px solid gray;}

標(biāo)簽

• for 規(guī)定與哪個(gè)表單元素進(jìn)行綁定，其值為 input 標(biāo)簽的 id 屬性對(duì)應(yīng)的值

  用戶名

  
  也可以不使用 for 屬性，直接用 label 標(biāo)簽包裹需要標(biāo)注的 input

  用戶名

  

標(biāo)簽

• name 定義下拉列表的名稱

• size 設(shè)置顯示下拉列表中可選項(xiàng)的數(shù)目

• disabled 禁用下拉列表（無法點(diǎn)擊選擇）

標(biāo)簽

• value 用于設(shè)置選項(xiàng)值，被選中的項(xiàng)對(duì)應(yīng)的值在表單提交時(shí)會(huì)傳給服務(wù)器

• disabled 設(shè)置禁用項(xiàng)，設(shè)置該屬性的選項(xiàng)會(huì)被禁用

• selected 設(shè)置默認(rèn)選中項(xiàng)

默認(rèn)效果：

   北京
   天津
   上海
   重慶          
   廣州          
   深圳          

select 標(biāo)簽設(shè)置了 size 后的效果

select 標(biāo)簽設(shè)置了 disabled 后的效果

標(biāo)簽

• name 定義 fieldest 的名稱

• disabled 禁用

標(biāo)簽

• align 標(biāo)題文本的對(duì)齊方式；值為 top、bottom、left、right

  
基本信息
  姓名：
  年齡：
  健康信息
  身高：
  體重：

標(biāo)簽

• button 可點(diǎn)擊按鈕；IE 默認(rèn)值

• submit 提交按鈕；除 IE 外其他瀏覽器的默認(rèn)值

• reset 重置按鈕，清除表單數(shù)據(jù)

感謝各位的閱讀，以上就是“html5表單元素有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)html5表單元素有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！