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

标签为 input 元素定义标注（标记）。例如：

请输入邮箱地址：      
    

请输入邮箱地址：     
     

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

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

请输入邮箱地址：

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

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

网站标题：input中name，value以及label中for的示例分析-创新互联
文章源于：http://shouzuofang.com/article/ccejhc.html