欢迎光临
我们一直在努力

HTML | 表单(三)单选框和复选框

单选框应用场景与语法格式

单选框的应用场景为:只允许且仅允许选择一项内容,比如选择性别。单选框的语法格式如下图所示。

  • 使用单选框时,需要选择type="radio"
  • 单选框的name必须一样
  • 单选框设置checked属性可以让其默认选中
<tr>
    <td>性别:</td>
    <td>男<input type="radio" name="sex" value="man">
        女<input type="radio" name="sex" value="woman">
        保密<input type="radio" name="sex" value="bm" checked>    
    </td>
</tr>

复选框应用场景与语法格式

复选框的应用场景为:每次可以进行多选,比如爱好的选择。复选框的语法格式如下图所示。

  • 使用复选框时,需要设置type="checkbox"
  • 复选框name可以设置一样,也可以不一样,但建议设置一样,方面服务器判断属于哪一组,以及获取改组数据。
  • 复选框设置checked属性可以让其默认选中
<tr>
    <td>爱好:</td>
    <td>
        唱歌<input type="checkbox" name="dx" value="sing">
        跳舞<input type="checkbox" name="dx" value="dance">
        RAP<input type="checkbox" name="dx" value="rap" checked>
    </td>
</tr>

到目前为止所有代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格实战</title>
    </head>
    <body>
        <h1 align="center">注册信息</h1>
        <hr color="#336699"/>
        <form>
            <table align="center" bgcolor="#f2f2f2" width="600px">
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="username" maxlength="6" size="25px" placeholder="请输入你的名字。" ></td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td><input type="text" name="email" size="25px" value="@163.com"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="paw" size="25px" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="paw_confirm" size="25px" placeholder="请再次输入密码"></td>
                </tr>
                <tr>
                    <td>上传照片</td>
                    <td><input type="file" value="file"></td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        男<input type="radio" name="sex" value="man">
                        女<input type="radio" name="sex" value="woman">
                        保密<input type="radio" name="sex" value="bm" checked>    
                    </td>
                </tr>
                <tr>
                    <td>爱好:</td>
                    <td>
                        唱歌<input type="checkbox" name="dx" value="sing">
                        跳舞<input type="checkbox" name="dx" value="dance">
                        RAP<input type="checkbox" name="dx" value="rap" checked>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </form>
    </body>
</html>

运行预览:

赞(0) 打赏
未经允许不得转载:散人研 » HTML | 表单(三)单选框和复选框
分享到: 更多 (0)

评论 抢沙发

6 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏