input中name,value以及label中for的示例分析-创新互联

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

成都创新互联是一家专业提供宁洱企业网站建设,专注与成都网站制作、成都网站建设、H5响应式网站、小程序制作等业务。10年已为宁洱众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

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的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页标题:input中name,value以及label中for的示例分析-创新互联
链接URL:http://hbruida.cn/article/ccejhc.html