解讀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)文章
如果你無法理解博文在講什么，請回顧前面的系列博文。文章比較深入，如有不對之處，望請指正，謝謝。2010-10-10
做web開發(fā)幾年，也認(rèn)為自己的js寫了不少，可真正去解釋這個東西的時候，才發(fā)現(xiàn)不是這么簡單，花了一些時間，寫了幾個小demo，讓我們來一探究竟。2011-04-04
這篇文章主要介紹了javascript 分號總結(jié)及詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
在JavaScript中,我們可以實現(xiàn)燈光閃爍效果,本文主要用到了?setInterval?和?clearInterval?兩個重要方法,感興趣的小伙伴可以了解一下2025-02-02
js中有各種與位置相關(guān)的屬性,每次看到的時候都各種懵逼,索性一次總結(jié)一下,這篇文章主要給大家介紹了關(guān)于js中位置計算的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
javascript 初學(xué)教程及五子棋小程序的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨avascript 初學(xué)教程及五子棋小程序的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
前端實現(xiàn)打印網(wǎng)頁內(nèi)容的解決方案(附完整代碼)
這篇文章主要介紹了如何使用JavaScript實現(xiàn)網(wǎng)頁打印功能,主要通過Vue和Element Plus框架進(jìn)行封裝,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
性能優(yōu)化自古以來就是重中之重，本文關(guān)于uniapp項目優(yōu)化方式最全整理，會根據(jù)開發(fā)情況進(jìn)行補(bǔ)充，感興趣的可以了解一下2021-08-08
最近在工作中遇到了getter和setter，getter 是一種獲得屬性值的方法，setter是一種設(shè)置屬性值的方法。下面這篇文章主要給大家介紹了關(guān)于Javascript中g(shù)etter和setter的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
JavaScript常用截取字符串的三種方式用法區(qū)別實例解析
本文給大家分享JavaScript常用截取字符串的三種方式及每種用法的區(qū)別解析，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05