解讀input標(biāo)簽的value屬性及name屬性
input標(biāo)簽的value屬性
input 標(biāo)簽的 value 屬性的作用是由 input 標(biāo)簽的 type 屬性的值決定的
當(dāng) type 的取值為 button、reset、submit 中的其中一個時，此時 value 屬性的值表示的是按鈕上顯示的文本
當(dāng) type 的取值為 text、password、hidden 中的其中一個時，此時 value 屬性的值表示的是輸入框中顯示的初始值，此初始值可以更改，并且在提交表單時，value 屬性的值會發(fā)送給服務(wù)器（既是初始值，也是提交給服務(wù)器的值）
當(dāng) type 的取值為 checkbox、radio 中的其中一個時，此時 value 屬性的值表示的是提交給服務(wù)器的值
當(dāng) type 的取值為 image 時，點擊它提交表單后，會將用戶的點擊位置相對于圖像左上角的 x 坐標(biāo)和 y 坐標(biāo)提交給服務(wù)器
type="checkbox"時，其 value 屬性的值表示在復(fù)選框呈勾選狀態(tài)時提交給服務(wù)器的數(shù)據(jù)值，默認(rèn)為ontype="image"定義圖像形式的提交按鈕，此時必須把 src 屬性 和 alt 屬性 與<input type="image">結(jié)合使用（alt 屬性表示圖片未正常顯示時，用于替換圖片的提示；如果不寫這個屬性，當(dāng)圖片未正常顯示時，會默認(rèn)顯示提交這兩個字）
<!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">
<!--
定義隱藏字段，隱藏字段對于用戶是不可見的
隱藏字段通常會存儲一個默認(rèn)值，它們的值也可以由 JavaScript 進(jìn)行修改
-->
<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標(biāo)簽生成的按鈕顯示為一幅圖像，點擊它可以提交表單-->
<input type="image" src="xxx.png" alt="Submit">
<input type="image" src="xxx.png">
</fieldset>
</form>
</body>
</html>
在谷歌瀏覽器中的呈現(xiàn)效果如下：
【注】：
checkbox 型的 input 標(biāo)簽的不足之處在于：提交表單時，只有處于勾選狀態(tài)的復(fù)選框的數(shù)據(jù)值才會發(fā)送給服務(wù)器。也就是說，如果沒有任何一個復(fù)選框被選中，那么服務(wù)器就不會收到與其相關(guān)的數(shù)據(jù)項
當(dāng)設(shè)置 input 標(biāo)簽的 type 屬性值為checkbox 或者 radio 時，必須同時設(shè)置 input 標(biāo)簽的 value 屬性
當(dāng) type="file" 時，不能使用 value 屬性
input標(biāo)簽的name屬性
name 屬性規(guī)定 input 元素的名稱
name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)
只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值，因為服務(wù)端獲取表單提交的數(shù)據(jù)是通過表單元素的 name 屬性的值而得到的，沒有 name 屬性就無法得到表單元素提交給服務(wù)端的值
// getParameter("fullName") 中的 fullName 為表單中其中一個input標(biāo)簽的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來達(dá)到目的，顯然不是我所需要的。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ù)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析
這篇文章主要介紹了微信小程序iBeacon測距及穩(wěn)定程序的實現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自上而下字幕滾動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
js中的雙感嘆號判斷。在網(wǎng)上查了些資料，他相當(dāng)于三元運算符，返回boolean值2013-11-11
javascript實現(xiàn)詳細(xì)時間提醒信息效果的方法
這篇文章主要介紹了javascript實現(xiàn)詳細(xì)時間提醒信息效果的方法,涉及javascript操作時間的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03