首页 >web前端 >html教程 >浅谈input中的name,value以及label中的for

浅谈input中的name,value以及label中的for

青灯夜游
青灯夜游转载
2018-10-10 17:35:473123浏览

 本文给大家浅谈一下input中的name,value以及label中的for,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

input具有很多属性,比较常用的有type,value,name,placeholder,multiple,checked等。对于其中的name、value、label相关以及标签外的文字,我一直是懵懵懂懂,今天总算弄了个清楚。

1)name属性 

  定义:name 属性规定 input 元素的名称。

  用法:name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。

  注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

也就是说,name对于页面显示是没啥用的(加不加都不影响页面显示),而是用于和服务器交互或者编写js时方便引用。

2)value属性

定义:value 属性为 input 元素设定值。

用法:对于不同的输入类型,value 属性的用法也不同:

  • type="button", "reset", "submit" - 定义按钮上的显示的文本

74809b391d89dc734929387ae8e4937f按钮文字

      1.jpg

  • type="text", "password", "hidden" - 定义输入字段的初始值

7d2842a3880ad6c5a6da4d20c4a98421标签外

        2.jpg

  • type="checkbox", "radio", "image" - 定义与输入相关联的值

e0f7201886c4a56e51163ba04f864a96按钮文字

        3.jpg

注意:此时显示在页面上的是“按钮文字”(标签外的文字),而此时的value的作用主要是用于js中的交互操作,所以此时的value一般设置为与输入相关的值。例如:

12c96a80b937f2bc908d910436e4c63e男

注释:514d05be645eb7d51e331036aaf6fa36 和 5531b4c9ceb3f990b641fa70a3e40caa 中必须设置 value 属性。

3)label

2e1cf0710519d5598b1f0f14c36ba674 标签为 input 元素定义标注(标记)。例如:

<label>请输入邮箱地址:</label>      
    <input type="text" name="email" value="这是一个文本输入框"/>

请输入邮箱地址:     
     <input type="text" name="email" value="这是一个文本输入框"/>

以上两种方式显示结果相同,均为下图所示:

4.jpg

所以:label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。2e1cf0710519d5598b1f0f14c36ba674 标签的 for 属性应当与相关元素的 id 属性相同

上面这句话是什么意思呢?就是说,若按如下写法,当鼠标点击“请输入邮箱地址”时,效果和点击输入框是一样的(即会focus到输入框),也就是将label与相应的input绑定在一起了。

05135dbeb3962ff3e2ccbe00623f2229请输入邮箱地址:8c1ecd4bb896b2264e0711597d40766c
f5d2744f291a650becce575c0ec24e93

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 HTML视频教程

相关推荐:

php公益培训视频教程

以上是浅谈input中的name,value以及label中的for的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文转载于:cnblogs.com。如有侵权,请联系admin@php.cn删除