脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → input标签的value及name属性

解读input标签的value属性及name属性

 更新时间：2023年01月09日 14:17:33   作者：WinstonLau  
这篇文章主要介绍了解读input标签的value属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

input标签的value属性

input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的

当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本

当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）

当 type 的取值为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值

当 type 的取值为 image 时，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器

type="checkbox" 时，其 value 属性的值表示在复选框呈勾选状态时提交给服务器的数据值，默认为 on
type="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的值在提交表单时会发送给服务器</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>

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

【注】：

checkbox 型的 input 标签的不足之处在于：提交表单时，只有处于勾选状态的复选框的数据值才会发送给服务器。也就是说，如果没有任何一个复选框被选中，那么服务器就不会收到与其相关的数据项

当设置 input 标签的 type 属性值为checkbox 或者 radio 时，必须同时设置 input 标签的 value 属性

当 type="file" 时，不能使用 value 属性

input标签的name属性

name 属性规定 input 元素的名称

name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的，没有 name 属性就无法得到表单元素提交给服务端的值

// getParameter("fullName") 中的 fullName 为表单中其中一个input标签的name属性的值
String fullName = request.getParameter("fullName");

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 理解Javascript_08_函数对象

    理解Javascript_08_函数对象

    如果你无法理解博文在讲什么，请回顾前面的系列博文。文章比较深入，如有不对之处，望请指正，谢谢。
    2010-10-10
  • JavaScript中的this实例分析

    JavaScript中的this实例分析

    做web开发几年，也认为自己的js写了不少，可真正去解释这个东西的时候，才发现不是这么简单，花了一些时间，写了几个小demo，让我们来一探究竟。
    2011-04-04
  • javascript 分号总结及详细介绍

    javascript 分号总结及详细介绍

    这篇文章主要介绍了javascript 分号总结及详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • JavaScript实现灯光闪烁效果

    JavaScript实现灯光闪烁效果

    在JavaScript中,我们可以实现灯光闪烁效果,本文主要用到了 setInterval 和 clearInterval 两个重要方法,感兴趣的小伙伴可以了解一下
    2025-02-02
  • 一篇文章让你彻底搞懂js中的位置计算

    一篇文章让你彻底搞懂js中的位置计算

    js中有各种与位置相关的属性,每次看到的时候都各种懵逼,索性一次总结一下,这篇文章主要给大家介绍了关于js中位置计算的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • javascript 初学教程及五子棋小程序的简单实现

    javascript 初学教程及五子棋小程序的简单实现

    下面小编就为大家带来一篇javascript 初学教程及五子棋小程序的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 前端实现打印网页内容的解决方案(附完整代码)

    前端实现打印网页内容的解决方案(附完整代码)

    这篇文章主要介绍了如何使用JavaScript实现网页打印功能,主要通过Vue和Element Plus框架进行封装,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • uniapp项目优化方式及建议

    uniapp项目优化方式及建议

    性能优化自古以来就是重中之重，本文关于uniapp项目优化方式最全整理，会根据开发情况进行补充，感兴趣的可以了解一下
    2021-08-08
  • Javascript中的getter和setter初识

    Javascript中的getter和setter初识

    最近在工作中遇到了getter和setter，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08
  • JavaScript常用截取字符串的三种方式用法区别实例解析

    JavaScript常用截取字符串的三种方式用法区别实例解析

    本文给大家分享JavaScript常用截取字符串的三种方式及每种用法的区别解析，感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05

最新评论