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

<input type="button" value="按钮">按钮文字

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

<input type="text" value="初始文本">标签外

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

<input type="radio" value="按钮">按钮文字

留意：此时显示在页面上的是“按钮文字”（标签外的文字），而此时的value的作用主如果用于js中的交互操纵，所以此时的value一样设定为与输入相关的值。例如：

<input type="radio" value="male">男

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

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

总结：以上就是本篇文的全部内容，但愿能对大家的学习有所帮忙。更多相关教程请拜访 HTML视频教程！

相关引荐：

php公益培训视频教程

以上就是浅谈input中的name，value乃至label中的for的具体内容，更多请关注百分百源码网其它相关文章！