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

 

　　<inputtype="button"value="按钮">按钮文字

 

　　1.jpg

 

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

 

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

 

　　2.jpg

 

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

 

　　<inputtype="radio"value="按钮">按钮文字

 

　　3.jpg

 

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

 

　　<inputtype="radio"value="male">男

 

　　注释：<inputtype="checkbox">和<inputtype="radio">中必须设置value属性。

 

　　3）label

 

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

 

　　<label>请输入邮箱地址：</label>

 

　　<inputtype="text"name="email"value="这是一个文本输入框"/>

 

　　请输入邮箱地址：

 

　　<inputtype="text"name="email"value="这是一个文本输入框"/>

 

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

 

　　4.jpg

 

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

 

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

 

　　<labelfor="email">请输入邮箱地址：</label>

 

　　<inputtype="text"name="email"id="emial"value="这是一个文本输入框"/>

 

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





本文转载自中文网