登录页面中单选框（input）与label标签使用方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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标签相关的表单控件上。点击

posted @ 2021-09-04 21:52  King-DA  阅读(1204)  评论(0)    收藏  举报