zoukankan html css js c++ java

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

<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>

点击提交

url上显示gender=1 就是男

提交

gender=2 女的

key-value形式

查看全文

相关阅读:
ubuntu+ROS安装turtulebot3
jQuery $.isNumeric vs. $.isNaN vs. isNaN
idea配置maven阿里巴巴中央仓库
 idea创建Maven项目
 Fiddler工作原理
 Sql Server 多数据库联合查询
 热烈庆祝我的blogs终于上线了！欢迎大家做客我的博客站点哦...
Sql Server 2005 中文乱码解决
 JS面向对象编程 for Menu Demo
C# 网站静态页面生成器 for 多线程版

原文地址：https://www.cnblogs.com/mingerlcm/p/10623194.html