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

 本文给大家浅谈一下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” – 定义按钮上的显示的文本

按钮文字

登录后复制

      1.jpg

type=”text”, “password”, “hidden” – 定义输入字段的初始值

标签外

登录后复制

        2.jpg

type=”checkbox”, “radio”, “image” – 定义与输入相关联的值

按钮文字

登录后复制

        3.jpg

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

登录后复制

注释: 和 中必须设置 value 属性。

3)label

          请输入邮箱地址:          

登录后复制

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

4.jpg

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

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

登录后复制

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

相关推荐:

php公益培训视频教程

以上就是浅谈input中的name,value以及label中的for的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2830840.html

(0)
上一篇 2025年3月9日 03:50:36
下一篇 2025年3月1日 18:21:00

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTML5中的input类型包含哪些属性

    HTML5中的input类型包含email、url、number、range、search等属性,每一种属性都具有不同的功能 今天将介绍HTML5中新的输入类型input,这些新功能将大大的帮助我们实现更多的功能以及提供更好的用户体验,接下…

    2025年3月9日 编程技术
    200
  • input标签是什么意思

    input标签是什么意思?【推荐教程:html教程】 input标签是规定用户可输入数据的输入字段,同时也是一个简单的HTML表单,包含两个文本输入框和一个提交按钮。 html input标签 语法 作用:用于搜集用户输入信息。 说明:根据…

    2025年3月9日
    200
  • input语句的作用

    推荐教程:Html教程 HTML标签 一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮: 登录后复制 定义和用法 标签用于搜集用户信息。 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码…

    2025年3月9日
    200
  • input输入框只能输入数字、字母相关组合(正则表达式)

    简介:公司网站做试用用户申请窗口,为防止用户错误输入,给予input适当控制,能够防止用户输入错误,同时也能减少公司垃圾数据,当然,如果更大程度避免垃圾数据,最好还是后端正则验证,下面是我记录的input常用正则表达式,希望能给大家带来方便…

    2025年3月9日
    200
  • 设置网页关键字的name属性值应该为什么

    设置网页关键字的name属性值应该为什么? 设置网页关键字的name属性值应该为“keywords”。 标签语法 登录后复制登录后复制登录后复制登录后复制登录后复制 name 属性规定元数据的名称。 specifies the name f…

    2025年3月9日
    200
  • HTML5新增了哪些input类型及其属性?

    新增类型:color、date、datetime、email、month、number、tel、time、url、week等;新增属性:autofocus、form、max、min、pattern、step、list等。 (推荐教程:htm…

    2025年3月9日 编程技术
    200
  • html input是什么

    在HTML中,input是一个输入框标签,用于指定用户可以在其中输入数据的输入字段;输入字段可通过多种方式改变,取决于标签内的type属性,例“”就是定义一个单行的文本字段。 (推荐教程:html教程) HTML 标签 标签规定了用户可以在…

    2025年3月9日
    200
  • 单选框的type属性值为什么

    单选框的type属性值为“radio”。html type属性可以规定要显示的输入框“”元素的类型;值为“radio”时显示为单选框、“checkbox”时显示为复选框、“select”时显示为下拉式选框等等。 本教程操作环境:window…

    2025年3月9日
    200
  • html5怎么设置input只能输入数字

    在html5中,可以通过input标签的type属性来实现只能输入数字的功能,只需要将type属性的值设置为“number”即可,语法“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 标签规定用户可输入数据的…

    2025年3月9日
    200
  • html怎么去掉input边框

    去掉input边框的方法:1、使用style属性设置“border: 0;”样式;2、使用style属性设置“border-style: none;”样式;3、使用style属性设置“border: transparent;”样式。 本教程…

    2025年3月9日 编程技术
    200

发表回复

登录后才能评论