博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
input中的name,value以及label中的for
阅读量:5156 次
发布时间:2019-06-13

本文共 1164 字,大约阅读时间需要 3 分钟。

 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" - 定义按钮上的显示的文本
按钮文字

 

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

  

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

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

注释:<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绑定在一起了。

 

 

转载于:https://www.cnblogs.com/youhong/p/6138305.html

你可能感兴趣的文章
C++ 面向对象 类成员函数this指针
查看>>
NSPredicate的使用,超级强大
查看>>
自动分割mp3等音频视频文件的脚本
查看>>
判断字符串是否为空的注意事项
查看>>
布兰诗歌
查看>>
js编码
查看>>
Pycharm Error loading package list:Status: 403错误解决方法
查看>>
steps/train_sat.sh
查看>>
转:Linux设备树(Device Tree)机制
查看>>
iOS 组件化
查看>>
(转)Tomcat 8 安装和配置、优化
查看>>
(转)Linxu磁盘体系知识介绍及磁盘介绍
查看>>
tkinter布局
查看>>
命令ord
查看>>
Sharepoint 2013搜索服务配置总结(实战)
查看>>
博客盈利请先考虑这七点
查看>>
使用 XMLBeans 进行编程
查看>>
写接口请求类型为get或post的时,参数定义的几种方式,如何用注解(原创)--雷锋...
查看>>
【OpenJ_Bailian - 2287】Tian Ji -- The Horse Racing (贪心)
查看>>
Java网络编程--socket服务器端与客户端讲解
查看>>