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">html中提交表单用什么属性
<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>
在⾕歌浏览器中的呈现效果如下:
【注】:
1. checkbox 型的 input 标签的不⾜之处在于:提交表单时,只有处于勾选状态的复选框的数据值才会发送给服务器。也就是说,如果
没有任何⼀个复选框被选中,那么服务器就不会收到与其相关的数据项
2. 当设置 input 标签的 type 属性值为checkbox 或者 radio 时,必须同时设置 input 标签的 value 属性
3. 当 type="file" 时,不能使⽤ value 属性
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论