input具有很多属性,比较常用的有type,value,name,placeholder,multiple,checked等。对于其中的name、value、label相关以及标签外的文字,我一直是懵懵懂懂,今天总算弄了个清楚。
1)name属性
用法:name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
也就是说,name对于页面显示是没啥用的(加不加都不影响页面显示),而是用于和服务器交互或者编写js时方便引用。
2)value属性
定义:value 属性为 input 元素设定值。
type=button, reset, submit - 定义按钮上的显示的文本
<input type=button value=按钮>按钮文字
type=text, password, hidden - 定义输入字段的初始值
<input type=text value=初始文本>标签外
<input type=radio value=按钮>按钮文字
注意:此时显示在页面上的是“按钮文字”(标签外的文字),而此时的value的作用主要是用于js中的交互操作,所以此时的value一般设置为与输入相关的值。例如:
<input type=radio value=male>男
注释:<input type=checkBox> 和 <input type=radio> 中必须设置 value 属性。
3)label
<label> 标签为 input 元素定义标注(标记)。例如:
<label>请输入邮箱地址:</label> <input type=text name=email value=这是一个文本输入框/> 请输入邮箱地址: <input type=text name=email value=这是一个文本输入框/>
以上两种方式显示结果相同,均为下图所示:
所以:label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。
上面这句话是什么意思呢?就是说,若按如下写法,当鼠标点击“请输入邮箱地址”时,效果和点击输入框是一样的(即会focus到输入框),也就是将label与相应的input绑定在一起了。
<label for=email>请输入邮箱地址:</label> <input type=text name=email id=emial value=这是一个文本输入框/>
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 HTML视频教程!
相关推荐:
原文地址:https://www.jb51.cc/html/1207922.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。