解讀input標簽的value屬性及name屬性
input標簽的value屬性
input 標簽的 value 屬性的作用是由 input 標簽的 type 屬性的值決定的
當 type 的取值為 button、reset、submit 中的其中一個時，此時 value 屬性的值表示的是按鈕上顯示的文本
當 type 的取值為 text、password、hidden 中的其中一個時，此時 value 屬性的值表示的是輸入框中顯示的初始值，此初始值可以更改，并且在提交表單時，value 屬性的值會發(fā)送給服務(wù)器（既是初始值，也是提交給服務(wù)器的值）
當 type 的取值為 checkbox、radio 中的其中一個時，此時 value 屬性的值表示的是提交給服務(wù)器的值
當 type 的取值為 image 時，點擊它提交表單后，會將用戶的點擊位置相對于圖像左上角的 x 坐標和 y 坐標提交給服務(wù)器
type="checkbox"時，其 value 屬性的值表示在復(fù)選框呈勾選狀態(tài)時提交給服務(wù)器的數(shù)據(jù)值，默認為ontype="image"定義圖像形式的提交按鈕，此時必須把 src 屬性 和 alt 屬性 與<input type="image">結(jié)合使用（alt 屬性表示圖片未正常顯示時，用于替換圖片的提示；如果不寫這個屬性，當圖片未正常顯示時，會默認顯示提交這兩個字）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input標簽的value屬性</title>
</head>
<body>
<form action="#">
<fieldset>
<legend>value的值是按鈕上的文本</legend>
<input type="button" value="按鈕">
<input type="reset" value="重置">
<input type="submit" value="提交">
</fieldset>
<fieldset>
<legend>value的值是輸入框中的初始值</legend>
<input type="text" value="我的type屬性值是text">
<input type="password" value="我的type屬性值是password">
<!--
定義隱藏字段，隱藏字段對于用戶是不可見的
隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改
-->
<input type="hidden" value="我的type屬性值是hidden">
</fieldset>
<fieldset>
<legend>value的值在提交表單時會發(fā)送給服務(wù)器</legend>
<input type="checkbox" value="v1">
<input type="radio" value="v2">
<!--image型input標簽生成的按鈕顯示為一幅圖像，點擊它可以提交表單-->
<input type="image" src="xxx.png" alt="Submit">
<input type="image" src="xxx.png">
</fieldset>
</form>
</body>
</html>
在谷歌瀏覽器中的呈現(xiàn)效果如下：
【注】：
checkbox 型的 input 標簽的不足之處在于：提交表單時，只有處于勾選狀態(tài)的復(fù)選框的數(shù)據(jù)值才會發(fā)送給服務(wù)器。也就是說，如果沒有任何一個復(fù)選框被選中，那么服務(wù)器就不會收到與其相關(guān)的數(shù)據(jù)項
當設(shè)置 input 標簽的 type 屬性值為checkbox 或者 radio 時，必須同時設(shè)置 input 標簽的 value 屬性
當 type="file" 時，不能使用 value 屬性
input標簽的name屬性
name 屬性規(guī)定 input 元素的名稱
name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進行標識，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)
只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值，因為服務(wù)端獲取表單提交的數(shù)據(jù)是通過表單元素的 name 屬性的值而得到的，沒有 name 屬性就無法得到表單元素提交給服務(wù)端的值
// getParameter("fullName") 中的 fullName 為表單中其中一個input標簽的name屬性的值
String fullName = request.getParameter("fullName");總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談js中變量初始化的相關(guān)資料,需要的朋友可以參考下2015-02-02
javascript之通用簡單的table選項卡實現(xiàn)(二)
上篇中的選項卡存在這樣的問題：把邏輯封裝在table.js中，不夠靈活，也就是說如果某個選項卡是實現(xiàn)異步請求或者跳轉(zhuǎn)，而非div的顯隱切換，那么就得修過table.js來達到目的，顯然不是我所需要的。2010-05-05
下面小編就為大家?guī)硪黄狫S只能輸入正整數(shù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
排序算法的理解算是程序員的基本功之一了，其功能是對一個數(shù)據(jù)元素集合或序列重新排列成一個按數(shù)據(jù)元素某個項值有序的序列。2011-02-02
簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析
這篇文章主要介紹了簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能實例
uni-app是一個使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架,下面這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)微信小程序自定義頂部導(dǎo)航欄功能的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析
這篇文章主要介紹了微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)自上而下字幕滾動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
js中的雙感嘆號判斷。在網(wǎng)上查了些資料，他相當于三元運算符，返回boolean值2013-11-11
javascript實現(xiàn)詳細時間提醒信息效果的方法
這篇文章主要介紹了javascript實現(xiàn)詳細時間提醒信息效果的方法,涉及javascript操作時間的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03