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

查看全文

相关阅读:
day04作业
 一个简单的gridlayout栗子
 用户名、密码等15个常用的js正则表达式
 html 颜色
 心态好的人，一辈子都好
 怎么样好好的聊天呢
 一篇引用文章
 再见，发微信不回的人
 第一个不怎么正经的网页
 关于学科目标

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