登录页⾯中单选框（input）与label标签使⽤⽅法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">html radio点击变颜
<title>综合案例--注册页⾯</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="500">
<tr>
<td>性别</td>
<td>
<!--
单选框使⽤input中的radio
name值使⽤相同的时候，可以进⾏⼆选⼀
-->
<input type="radio" name="sex" id="nan">
<!--
label标签和特定表单控件关联之后，
如果⽤户在label元素内点击⽂本，
就会触发关联的表单控件。就是说，
当⽤户选择该label标签时，
浏览器就会⾃动将焦点转到和label标签相关的表单控件上。
点击<label>标签⽂字时，实现对应控件被选择，
需要对应表单控件id的值与label标签内的for值相同。
-->
<label for="nan"><img src="../guifan/img.png">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv"><img src="../guifan/img.png">⼥</label>
</td>
</tr>
</table>
</body>
</html>
其中，主要对lable标签做重要概述：
label标签为input元素定义标注(标记)，它不会向⽤户呈现任何特殊效果，和span标签类似。但label标签和span标签最⼤的区别就是它为⿏标⽤户改进了可⽤性，可以关联特定的表单控件。
  label标签和特定表单控件关联之后，如果⽤户在label元素内点击⽂本，就会触发关联的表单控件。就是说，当⽤户选择该label标签时，浏览器就会⾃动将焦点转到和label标签相关的表单控件上。点击标签⽂字时，实现对应控件被选择，需要对应表单控件id的值与label标签内的for值相同。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。