input标签的value和name属性详解
input标签的value和name属性详解
⼀、value属性
input 标签的 value 属性的作⽤是由 input 标签的 type 属性的值决定的
当 type 的取值为 button、reset、submit 中的其中⼀个时，此时 value 属性的值表⽰的是按钮上显⽰的⽂本
当 type 的取值为 text、password、hidden 中的其中⼀个时，此时 value 属性的值表⽰的是输⼊框中显⽰的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）
当 type 的取值为 checkbox、radio 中的其中⼀个时，此时 value 属性的值表⽰的是提交给服务器的值
当 type 的取值为 image 时，点击它提交表单后，会将⽤户的点击位置相对于图像左上⾓的 x 坐标和 y 坐标提交给服务器
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>input标签的value属性</title>
6</head>
7<body>
8<form action="#">
9<fieldset>
10<legend>value的值是按钮上的⽂本</legend>
11<input type="button" value="按钮"><br>
12<input type="reset" value="重置"><br>
13<input type="submit" value="提交"><br>
14</fieldset>
15<br><br>
16<fieldset>
17<legend>value的值是输⼊框中的初始值</legend>
18<input type="text" value="我的type属性值是text"><br>
19<input type="password" value="我的type属性值是password"><br>
20<!--
21定义隐藏字段，隐藏字段对于⽤户是不可见的
22隐藏字段通常会存储⼀个默认值，它们的值也可以由 JavaScript 进⾏修改
23-->
24<input type="hidden" value="我的type属性值是hidden"><br>
25</fieldset>
26<br><br>
27<fieldset>
28<legend>value的值在提交表单时会发送给服务器</legend>
29<input type="checkbox" value="v1"><br>
30<input type="radio" value="v2"><br>
31<!--image型input标签⽣成的按钮显⽰为⼀幅图像，点击它可以提交表单-->
32<input type="image" src="xxx.png" alt="Submit"><br>
33<input type="image" src="xxx.png"><br>
34</fieldset>
html input type属性35</form>
36</body>
37</html>
在⾕歌浏览器中的呈现效果如下：
【注】：
checkbox 型的 input 标签的不⾜之处在于：提交表单时，只有处于勾选状态的复选框的数据值才会发送给服务器。也就是说，如果没有任何⼀个复选框被选中，那么服务器就不会收到与其相关的数据项。
当设置 input 标签的 type 属性值为checkbox 或者 radio 时，必须同时设置 input 标签的 value 属性。
当 type="file" 时，不能使⽤ value 属性。
⼆、name属性
name 属性规定 input 元素的名称
name 属性⽤于对提交到服务器后的表单数据进⾏标识，或者在客户端通过 JavaScript 引⽤表单数据
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，因为服务端获取表单提交的数据是通过表单元素的 name 属性的值⽽得到的，没有 name 属性就⽆法得到表单元素提交给服务端的值。
// getParameter("fullName") 中的 fullName 为表单中其中⼀个input标签的name属性的值
String fullName = Parameter("fullName");
再次补充
⽰例代码：
1<form action="form_action.asp" method="get">
2<p>Name: <input type="text" name="fullname"/></p>
3<p>Email: <input type="text" name="email"/></p>
4<input type="submit" value="Submit"/>
5</form>
定义和⽤法
name 属性规定 input 元素的名称
  1、 name 属性⽤于对提交到服务器后的表单数据进⾏标识
  2、 name 属性在客户端通过 JavaScript 引⽤表单数据
注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
如上⾯的例⼦：在后端他有个对象存在两个属性为 fullname和 email 与两个input中的name属性相对应。这样我们就可以通过input 向后端传值。注: 必须要保障input中的name属性的值与后端对象的属性名要保持⼀致才可以进⾏传值。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。