html-8.5

♬li

已于 2024-08-05 21:23:16 修改

阅读量348

点赞数 4

文章标签： html 前端

于 2024-08-05 19:58:24 首次发布

本文链接：https://blog.csdn.net/qq_74961950/article/details/140935602

版权

帮小马云找老婆（开挖掘机~）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <center>
        <h3>小李婚介所，有梦你就来</h3>
        <table width="700">
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                </td>
            </tr>

            <tr>
                <td>生日:</td>
                <td>
                    <select>
                        <option>--请选择年份--</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                        <option>2003</option>
                    </select>
                    <select>
                        <option>--请选择月份--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                    <select>
                        <option>--请选择日期--</option>
                        <option>01</option>
                        <option>02</option>
                        <option>12</option>
                        <option>15</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>所在地区:</td>
                <td><input type="text" placeholder="莫非京爷？"></td>
            </tr>

            <tr>
                <td>婚姻状况:</td>
                <td> <input type="radio" name="1">未婚 <input type="radio" name="1">离婚 <input type="radio"
                        name="1">想包二奶(不建议)
                </td>
            </tr>

            <tr>
                <td>学历:</td>
                <td><input type="text" placeholder="你将成为研究生！"></td>
            </tr>

            <tr>
                <td>喜欢的类型:</td>
                <td><input type="checkbox">高冷 <input type="checkbox">可爱 <input type="checkbox">御姐 <input
                        type="checkbox">萝莉
                    <input type="checkbox">细心 <input type="checkbox">反差
                </td>
            </tr>

            <tr>
                <td>自我介绍:</td>
                <td><textarea placeholder="说点什么吧~"></textarea></td>
            </tr>

            <tr>
                <td>
                </td>
                <td><input type="submit" value="注册"></td>
            </tr>

            <tr>
                <td>
                </td>
                <td><input type="checkbox">我同意注册条款</td>
            </tr>

            <tr>
                <td>
                </td>
                <td><a href="#">注册会员领取抢先资源></td>
            </tr>

            <tr>
                <td>
                </td>
                <td>
                    <h4>我承诺:</h4>
                    <ul>
                        <li>遵纪守法</li>
                        <li>善待她人</li>
                        <li>永远跟党走</li>
                    </ul>
                </td>
            </tr>
        </table>
    </center>
</body>

</html>

经验：

<!--tr区分行，td区分列

无法对齐是否是因为设置在不同列了?

要设置按钮不可多选时（如性别），可添加name="x",x中内容相同即可

<input type="radio">表示按钮

checked表示默认选择

链接：<a href="#">

勾选框可以取消勾选，按钮radio比较难

placeholder="..."一个占位符，只在value为0时显示

-->