input的value属性值

最新推荐文章于 2024-10-12 10:25:22 发布

powerful*！

最新推荐文章于 2024-10-12 10:25:22 发布

阅读量4.1k

点赞数 2

文章标签： javascript 前端服务器

本文链接：https://blog.csdn.net/tsqjxy/article/details/125873581

版权

value属性指定元素的值。
对于不同的输入类型，value属性的使用方式不同：

对于"button", “reset”, 和 “submit” - 它定义按钮上的文本
对于 “text”, “password”, 和 “hidden” - 它定义输入字段的初始（默认）值
对于 “checkbox”, “radio”, “image” - 它定义与输入关联的值（这也是在提交时发送的值）
注意： value属性不能与一起使用。

<form action="/jc_script/action.php">
  First name: <input type="text" name="fname" value="John"><br>
  Last name: <input type="text" name="lname" value="Doe"><br>
  <input type="submit" value="提交表单">
</form>

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 属性与结合使用（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="按钮"> <br>
            <input type="reset" value="重置"> <br>
            <input type="submit" value="提交"> <br>
        </fieldset>
        <br><br>
        <fieldset>
            <legend>value的值是输入框中的初始值</legend>
            <input type="text" value="我的type属性值是text"> <br>
            <input type="password" value="我的type属性值是password"> <br>
            <!--
                定义隐藏字段，隐藏字段对于用户是不可见的
                隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改
            -->
            <input type="hidden" value="我的type属性值是hidden"> <br>
        </fieldset>
        <br><br>
        <fieldset>
            <legend>value的值在提交表单时会发送给服务器</legend>
            <input type="checkbox" value="v1"> <br>
            <input type="radio" value="v2"> <br>
            <!--image型input标签生成的按钮显示为一幅图像，点击它可以提交表单-->
            <input type="image" src="xxx.png" alt="Submit"> <br>
            <input type="image" src="xxx.png"> <br>
        </fieldset>
    </form>
</body>
</html>

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