html中 label里for属性和form属性

label：for属性和form属性

label的for属性

写法一：

[java] view plain copy

print ?

1. <form>  
2.    <label for="id_one">id_one</label>  
3.    <input type="radio" name="id" id="id_one" value="id_one" />  
4.    <br>  
5.    <label for="id_two">id_two</label>  
6.    <input type="radio" name="id" id="id_two" value="id_two" />  
7. </form>  

<form>
   <label for="id_one">id_one</label>
   <input type="radio" name="id" id="id_one" value="id_one" />
   <br>
   <label for="id_two">id_two</label>
   <input type="radio" name="id" id="id_two" value="id_two" />
</form>

 

写法二：

[java] view plain copy

print ?

1. <form>  
2.    <label>id_one  
3.    <input type="radio" name="id" id="id_one" value="id_one" />  
4.    </label>  
5.    <br>  
6.    <label>id_two  
7.    <input type="radio" name="id" id="id_two" value="id_two" />  
8.    </label>  
9. </form>  

<form>
   <label>id_one
   <input type="radio" name="id" id="id_one" value="id_one" />
   </label>
   <br>
   <label>id_two
   <input type="radio" name="id" id="id_two" value="id_two" />
   </label>
</form>

 

注解：

1、写法一和写法二的效果一致。

2、<label>标签为input元素定义了标记，label元素不会呈现出任何特殊的效果。

3、label元素为鼠标改进了可用性，即在label元素内点击文本，就会触发此控件。

      如：点击红色框的内容，同样可以出发按钮控件。

     

4、for属性可把label绑定到另外一个元素，所以label标签中for属性应当与相关元素的id属性相同。

 

label的form属性

[java] view plain copy

print ?

1. <form action="#" method="get" id="nameform">  
2.    <input type="radio" name="id" id="id_one" value="id_one" />id_one  
3.    <br>  
4.    <input type="radio" name="id" id="id_two" value="id_two" />id_two  
5. </form>  
6. <label for="id_one" form="nameform" >id_one</label>  

<form action="#" method="get" id="nameform">
   <input type="radio" name="id" id="id_one" value="id_one" />id_one
   <br>
   <input type="radio" name="id" id="id_two" value="id_two" />id_two
</form>
<label for="id_one" form="nameform" >id_one</label>

注解：

1、用于第一个单选按钮的label位于form元素之外，但仍然是表单的一部分。

2、form属性的值必须是其所属的表单的id。