前端 HTML form表单标签 input标签 type属性 radio 单选框

最新推荐文章于 2024-08-11 16:46:50 发布

weixin_30502965

最新推荐文章于 2024-08-11 16:46:50 发布

阅读量2.1k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/mingerlcm/p/10623194.html

版权

<input type="radio"> 单选框

适用于选择性别按钮网页等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <div>
        <form>
            <div>
                <!-- 单选框 -->
                <input type="radio">
            </div>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        <div>
            <p>
                请选择性别:
                男<input type="radio">
                女<input type="radio">
            </p>
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

设置checked属性默认选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        <div>
            <!-- checked被默认选中 -->
            <p>
                请选择性别:
                男<input type="radio" checked>
                女<input type="radio">
            </p>
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

提交到后台时候选中一个提交一个就可以了用value区分提交哪个

把value提交就可以了

input type=‘radio’   - 单选框 value,name属性(产生互斥效果:name要相等)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com" method="get">
        <div>
            <!-- 产生互斥效果:name要相同-->
            <p>
                请选择性别:
                男<input type="radio" name="gender" value="1" checked>
                女<input type="radio" name="gender" value="2">
            </p>
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>