input標簽的value和name屬性詳解
一、value屬性
- input 標簽的 value 屬性的作用是由 input 標簽的 type 屬性的值決定的
- 當 type 的取值為 button、reset、submit 中的其中一個時，此時 value 屬性的值表示的是按鈕上顯示的文本
- 當 type 的取值為 text、password、hidden 中的其中一個時，此時 value 屬性的值表示的是輸入框中顯示的初始值，此初始值可以更改，並且在提交表單時，value 屬性的值會發送給服務器（既是初始值，也是提交給服務器的值）
- 當 type 的取值為 checkbox、radio 中的其中一個時，此時 value 屬性的值表示的是提交給服務器的值
- 當 type 的取值為 image 時，點擊它提交表單后，會將用戶的點擊位置相對於圖像左上角的 x 坐標和 y 坐標提交給服務器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>input標簽的value屬性</title> 6 </head> 7 <body> 8 <form action="#"> 9 <fieldset> 10 <legend>value的值是按鈕上的文本</legend> 11 <input type="button" value="按鈕"> <br> 12 <input type="reset" value="重置"> <br> 13 <input type="submit" value="提交"> <br> 14 </fieldset> 15 <br><br> 16 <fieldset> 17 <legend>value的值是輸入框中的初始值</legend> 18 <input type="text" value="我的type屬性值是text"> <br> 19 <input type="password" value="我的type屬性值是password"> <br> 20 <!-- 21 定義隱藏字段，隱藏字段對於用戶是不可見的 22 隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改 23 --> 24 <input type="hidden" value="我的type屬性值是hidden"> <br> 25 </fieldset> 26 <br><br> 27 <fieldset> 28 <legend>value的值在提交表單時會發送給服務器</legend> 29 <input type="checkbox" value="v1"> <br> 30 <input type="radio" value="v2"> <br> 31 <!--image型input標簽生成的按鈕顯示為一幅圖像，點擊它可以提交表單--> 32 <input type="image" src="xxx.png" alt="Submit"> <br> 33 <input type="image" src="xxx.png"> <br> 34 </fieldset> 35 </form> 36 </body> 37 </html>
在谷歌瀏覽器中的呈現效果如下：
【注】：
- checkbox 型的 input 標簽的不足之處在於：提交表單時，只有處於勾選狀態的復選框的數據值才會發送給服務器。也就是說，如果沒有任何一個復選框被選中，那么服務器就不會收到與其相關的數據項。
- 當設置 input 標簽的 type 屬性值為checkbox 或者 radio 時，必須同時設置 input 標簽的 value 屬性。
- 當 type="file" 時，不能使用 value 屬性。
二、name屬性
-
name 屬性規定 input 元素的名稱
- name 屬性用於對提交到服務器后的表單數據進行標識，或者在客戶端通過 JavaScript 引用表單數據
- 只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值，因為服務端獲取表單提交的數據是通過表單元素的 name 屬性的值而得到的，沒有 name 屬性就無法得到表單元素提交給服務端的值。
// getParameter("fullName") 中的 fullName 為表單中其中一個input標簽的name屬性的值
String fullName = request.getParameter("fullName");
再次補充
示例代碼：
1 <form action="form_action.asp" method="get"> 2 <p>Name: <input type="text" name="fullname" /></p> 3 <p>Email: <input type="text" name="email" /></p> 4 <input type="submit" value="Submit" /> 5 </form>
定義和用法
name 屬性規定 input 元素的名稱
1、 name 屬性用於對提交到服務器后的表單數據進行標識
2、 name 屬性在客戶端通過 JavaScript 引用表單數據
注釋：只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值
如上面的例子：在后端他有個對象存在 兩個屬性為 fullname和 email 與兩個input中的name屬性相對應。這樣我們就可以通過input 向后端傳值。
注: 必須要保障input中的name屬性的值與后端對象的屬性名要保持一致才可以進行傳值。