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="按钮"> <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 属性
input标签的value属性详解相关推荐
- 【input 标签的 type 属性详解】
input 标签的 type 属性详解 1. input 输入标签的 type 属性 1.1 input 标签的 type类型 属性的常用属性值 ⑴ 单行文本框: type="text&qu ...
- input标签的name属性详解
请结合这篇文章一起看 name 属性规定 input 元素的名称 name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据 只有设置了 name 属性 ...
- html5中preload是什么意思,html的video标签的preload属性详解
--------------------------------------------------------- Ta 只分享的内容开始 ------------------------------ ...
- 【Mark 常用方法】Html中<form>标签作用和属性详解
敲代码时偶然冒出这样的疑问, 一通搜索后发现, 网上大都写的十分复杂, 对初学者十分不友好. 因此我站在初学者的角度, 对二者的区别做了汇总和精炼, 总结如下: 1.action,值:URL,规定当提 ...
- html5 规定输入字段,HTML5 Input属性详解
本篇教程探讨了HTML5 Input属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < value 属性 value 属性规定输入字段的初始值: rea ...
- html frameset 属性,html frameset标签怎么用?html frameset标签属性详解
html frameset标签怎么用?html frameset标签属性详解,本篇文章主要讲述了html frameset标签的定义和用法,还有html frameset标签两个属性的用途(附实例) ...
- php中li标签,li标签有哪些属性?css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性 在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
- audio标签的controls属性_HTML5教程 audio标签属性详解
本篇教程探讨了HTML5教程 audio标签属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < src:String型,所播放音频的 url. auto ...
- Vue项目使用symbol的方式引入svg图标和svg path大法d属性详解,section标签
symbol标签 svg path大法d属性详解 section标签
最新文章
- php怎么删除多条,php 用checkbox一次性删除多条记录的方法
- linux ssh 脚本 密码,ssh自动登录的4种实现方法
- 【codeforces 711B】Chris and Magic Square
- CaSS中lisp命令不可用_小白想要自学南方cass?又苦于不会修改比例尺,这里有一份小白快速上手的测绘神器...
- 【ORACLE SQL 语言】SQL语言四大类
- PAT1055 集体照 (25 分)【3/6通过】
- android中activity布局,Android中登录布局展示Activity
- 如何提高程序员的生产率 (1)
- 使用dx命令在cmd环境下执行的正确方法,我用的版本android4.4.2,jdk1.8
- Matlab PolySpace安装破解
- 用python画折线图
- mysql中desc
- python中print打印输出
- mac设置共享屏幕 苹果mac屏幕共享设置详细教程
- 解决Field xxService in x.controller.x required a bean of type ‘x.service.x‘ that could no be found的方法
- 也许通过社群找工作,是未来的趋势。
- BOXI3 SDK 检索所有使用了某个universe object的报表
- 深圳市专精特新企业申报流程及奖励政策重点介绍,补贴20-50万
- 如何将图片背景变为透明色
- 均匀分布 卡方分布_【Math】概率论常用分布大全