首页 > 编程知识 正文

设置input的value样式,input属性值

时间:2023-05-05 07:40:55 阅读:259257 作者:1475

请结合这篇文章一起看

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="按钮"> <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 属性

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。