解讀input標簽的value屬性及name屬性
input標簽的value屬性
input 標簽的 value 屬性的作用是由 input 標簽的 type 屬性的值決定的
當 type 的取值為 button、reset、submit 中的其中一個時，此時 value 屬性的值表示的是按鈕上顯示的文本
當 type 的取值為 text、password、hidden 中的其中一個時，此時 value 屬性的值表示的是輸入框中顯示的初始值，此初始值可以更改，并且在提交表單時，value 屬性的值會發(fā)送給服務器（既是初始值，也是提交給服務器的值）
當 type 的取值為 checkbox、radio 中的其中一個時，此時 value 屬性的值表示的是提交給服務器的值
當 type 的取值為 image 時，點擊它提交表單后，會將用戶的點擊位置相對于圖像左上角的 x 坐標和 y 坐標提交給服務器
type="checkbox"時，其 value 屬性的值表示在復選框呈勾選狀態(tài)時提交給服務器的數(shù)據(jù)值，默認為ontype="image"定義圖像形式的提交按鈕，此時必須把 src 屬性 和 alt 屬性 與<input type="image">結合使用（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ā)送給服務器</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)的復選框的數(shù)據(jù)值才會發(fā)送給服務器。也就是說，如果沒有任何一個復選框被選中，那么服務器就不會收到與其相關的數(shù)據(jù)項
當設置 input 標簽的 type 屬性值為checkbox 或者 radio 時，必須同時設置 input 標簽的 value 屬性
當 type="file" 時，不能使用 value 屬性
input標簽的name屬性
name 屬性規(guī)定 input 元素的名稱
name 屬性用于對提交到服務器后的表單數(shù)據(jù)進行標識，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)
只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值，因為服務端獲取表單提交的數(shù)據(jù)是通過表單元素的 name 屬性的值而得到的，沒有 name 屬性就無法得到表單元素提交給服務端的值
// getParameter("fullName") 中的 fullName 為表單中其中一個input標簽的name屬性的值
String fullName = request.getParameter("fullName");總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
如果你無法理解博文在講什么，請回顧前面的系列博文。文章比較深入，如有不對之處，望請指正，謝謝。2010-10-10
做web開發(fā)幾年，也認為自己的js寫了不少，可真正去解釋這個東西的時候，才發(fā)現(xiàn)不是這么簡單，花了一些時間，寫了幾個小demo，讓我們來一探究竟。2011-04-04
這篇文章主要介紹了javascript 分號總結及詳細介紹的相關資料,需要的朋友可以參考下2016-09-09
在JavaScript中,我們可以實現(xiàn)燈光閃爍效果,本文主要用到了?setInterval?和?clearInterval?兩個重要方法,感興趣的小伙伴可以了解一下2025-02-02
js中有各種與位置相關的屬性,每次看到的時候都各種懵逼,索性一次總結一下,這篇文章主要給大家介紹了關于js中位置計算的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09
javascript 初學教程及五子棋小程序的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨avascript 初學教程及五子棋小程序的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
前端實現(xiàn)打印網(wǎng)頁內(nèi)容的解決方案(附完整代碼)
這篇文章主要介紹了如何使用JavaScript實現(xiàn)網(wǎng)頁打印功能,主要通過Vue和Element Plus框架進行封裝,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
性能優(yōu)化自古以來就是重中之重，本文關于uniapp項目優(yōu)化方式最全整理，會根據(jù)開發(fā)情況進行補充，感興趣的可以了解一下2021-08-08
最近在工作中遇到了getter和setter，getter 是一種獲得屬性值的方法，setter是一種設置屬性值的方法。下面這篇文章主要給大家介紹了關于Javascript中getter和setter的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
JavaScript常用截取字符串的三種方式用法區(qū)別實例解析
本文給大家分享JavaScript常用截取字符串的三種方式及每種用法的區(qū)別解析，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05