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>
35     </form>
36 </body>
37 </html>

在谷歌浏览器中的呈现效果如下：

【注】：

  1. checkbox 型的 input 标签的不足之处在于：提交表单时，只有处于勾选状态的复选框的数据值才会发送给服务器。也就是说，如果没有任何一个复选框被选中，那么服务器就不会收到与其相关的数据项。
  2. 当设置 input 标签的 type 属性值为checkbox 或者 radio 时，必须同时设置 input 标签的 value 属性。
  3. 当 type="file" 时，不能使用 value 属性。

 

二、name属性

  • name 属性规定 input 元素的名称

  • name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据
  • 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的，没有 name 属性就无法得到表单元素提交给服务端的值。
// getParameter("fullName") 中的 fullName 为表单中其中一个input标签的name属性的值
String fullName = request.getParameter("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属性的值与后端对象的属性名要保持一致才可以进行传值。

 

posted @ 2022-03-14 21:11  Panda_Xin  阅读(5303)  评论(0)  编辑  收藏  举报