我在學習表單元素的時候感覺很混亂，特別是 name value這兩個屬性，沒有真正理解它們是干什么的，所以需要梳理一下。

HTML表單元素主要有

HTML5新增的表單元素有三個

下面梳理一下這些表單元素的用法并指出各元素的name、value屬性含義

1.

元素元素定義HTML表單，收集用戶輸入。

屬性主要有 action和method；

action定義在提交表單時執行的動作，向服務器提交表單的通常做法是使用提交按鈕(type為submit的元素)；如果省略該屬性，則action會被設置為當前頁面。

method屬性規定在提交表單時所用的HTTP方法(HTTP方法有GET和POST兩種，這里只說一下兩者的主要區別：GET方法會使表單數據在頁面地址欄是可見的，而POST方法不可見，所以POST方法安全性更佳)。

form elements...

2. 元素

元素很常用(為行內元素，在“去哪兒”找實習面試的時候被問到過，當時都答錯......)，根據不同的type屬性，可以變化為多種形態。

type的取值有text radio checkbox password submit button;HTML5又新增了type類型email url search number range color date pickers(date month week...)，這些新類型提供了更好的輸入控制和驗證。

對于元素，除了type屬性，常用的就是name和value屬性：

name屬性----想要被正確地提交，每個輸入字段必須設置一個name屬性。

value屬性----為元素設定值，對于不同的type，value屬性的含義也不同。

type="submit"、"button"、"reset" ——定義按鈕上顯示的文本

type="text"、"password"、"hidden" ——定義輸入字段的初始值

type="radio"、"checkbox"、"image" ——定義與輸入相關聯的值

type="file" ——無法與value屬性一起使用

這里只具體介紹type為radio checkbox的元素。

radio定義單選鈕，允許用戶在有限數量的選項中選擇一個。

你喜歡誰？

楊洋

許嵩

吳彥祖

效果圖如下

當選擇“許嵩”，點擊“提交”按鈕后，看到頁面地址欄里表單數據的內容如下圖所示。

注意：單選鈕的各個name屬性值要完全一致，否則會不只選中一個選項

checkbox是復選框，允許用戶在有限數量的選項中選擇零個或多個選項。

你喜歡誰？

楊洋

許嵩

吳彥祖

效果圖如下

當我全選時(好像暴露了什么)，name和value值表現如下

3. 元素- -下拉列表

定義下拉列表，需要配合使用，定義待選擇的選項；通常會把首個選項顯示為被選選項；可通過selected屬性來定義預定義選項。

apple

pineapple

mango

grape

效果圖如下：

打開下拉列表，選擇"mango"這一項，并點擊"提交"按鈕，因為method設置為了get，所以在地址欄中可看到數據：分別取自中的name屬性值和被選項的value屬性值。

當value的屬性值是空的時候，會取的內容值作為表單數據提交。

4. 元素

定義多行輸入字段(文本域)

Just Do It!

效果如下圖

地址欄數據如下圖所示。當文本域為空時，提交的表單數據也為空；改變文本域的值，再次提交，則表單數據也會相應的改變。

5. 元素

元素的type屬性有三個可能的值button submit和reset；這里只介紹屬性值button

type為button時，定義可點擊的按鈕

click

效果如下圖

點擊后出現

6. 元素

規定輸入域的選項列表；需要配合元素一起使用，該元素定義列表項；如需把datalist綁定到輸入域，需要把輸入域的list屬性值設置為datalist的id值；元素必須要設置value屬性。

效果圖如下

當選擇第三項，并點擊"提交"按鈕后，地址欄數據如下

7. 元素

提供一種驗證用戶的可靠方法。

元素是密鑰對生成器(key-pair generator)。當提交表單時會生成兩個鍵，一個是公鑰，一個是私鑰。私鑰存儲于客戶端，公鑰則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書。

目前瀏覽器對該元素糟糕的支持程度不足以使其成為有用的安全標準。

效果圖如下

點擊第一項并提交后，地址欄的數據為

file:///C:/Users/wxf/Desktop/imooc/home/test4.html?security=MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQCiOHLvFmlmZKNDwqFZ8ie7mSP%2FmRRVSxhgtvH3ORHEoAl63sO9mZWVEPs8ZrcgCLW5z1TFGs9hadvhL%2BafxUs%2FN6lXYWDpoM7juZLuRDbK%2BdF4WAMWDbgX3NzK5fj2t2J5oMiLaBh8slUUByCAENCktHXeEBCs%2BuaFqxZN%2B458BBTz%2Fg%2BYoQ5AUj3jv0lzfwUZ46xxd2yUyUVYpnYy8PMUQMwV4vZ2hNQEzM%2BW7HKHkBDTD8OQFDwmSuizLq5DO34x%2BInnvS9lpiJOkUHCUdciYITtLS2lw45JZnjkuJdeWGSwXmBdboBix99u6jZ6NGEtTQ2Pb%2BqNQFeutzLzrEEpAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAHe4OWmRmaxhQxUPQnwY9W8kWwMMtEKZJ%2B28qVmZILOiBUJWYDiEXo2VJy9fUUuOL7gdrlc1exPNRMOIQSK2n221foHJ%2BKWmecnZ9jVwWr46eHASrrRKUHDANePwDxrUQ0bxr26vdcpGPZBFlvqf5RehkATlrYtt3Aij9txjzE%2FNss4d%2BL%2BtAOyY4KdgHRTjmn8HdA9%2BDgflroHyQ8frO3jvprojyDX3Jhko5o6XxScXJDKX3QO51PLOPcVsJLBElU8QPKZybO9GpCuj36TvX74CxP22wtsGkuRAGeqOyjjyyGBmKio83b1HudL6KEh31T2xyntk6STyqO%2FlxEdIRpQ%3D%3D

8. 元素

用于不同類型的輸出，如計算或腳本輸出。

+1

10 =

function resCalc(){

numA=document.getElementById("num_a").value;

numB=document.getElementById("num_b").value;

document.getElementById("result").value=Number(numA)+Number(numB);

}

效果如下圖

通過總結對這些元素的認識更加深刻了，所以要經常整理！

總結

以上是生活随笔為你收集整理的html 复选框name值,HTML(5)表单元素以及对各个表单元素的name、value属性的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

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