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