input中name,value以及label中for的示例分析

这篇文章将为大家详细讲解有关input中name,value以及label中for的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都服务器托管,创新互联提供包括服务器租用、服务器托管德阳、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、申请域名等业务的一体化完整服务。电话咨询:13518219792

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一般设置为与输入相关的值。例如:

注释 中必须设置 value 属性。

3)label

      
    

请输入邮箱地址:     
     

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

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

请输入邮箱地址:

关于“input中name,value以及label中for的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


本文名称:input中name,value以及label中for的示例分析
当前地址:http://azwzsj.com/article/pshpjs.html