label实现点击文字选择或取消单选/复选框的勾选状态

label 标签

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

注意： 标签的 for 属性必须与相关元素的 id 属性相同。
单选复选框 ：点击旁边文字实现选择或取消 勾选状态。
代码示例：

<p>点击文本，就可以触发相关控件</p >
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</form>
​

实现效果：

ps：当然label和input的位置可根据需求交换。
下面代码可以让鼠标移上文字时变成小手型，优化用户体验：

<style>
		label:hover{
			cursor:pointer;
		}
	</style>