2021-06-04 html练习-CSDN博客

本文链接：https://blog.csdn.net/qq_36141958/article/details/117580960

这篇博客记录了作者的第一个HTML练习，展示了一个用于填写个人信息的表单，包括性别选择、生日选择、地区输入、婚姻状况、学历填写、喜好类型多选以及自我介绍的文本区域。此外，还有同意注册条款的选项和会员登录链接，以及个人承诺的展示。

摘要由CSDN通过智能技术生成

记录一下第一个html练习

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <!-- 开头 -->
        <p><h4>青春不常在，抓紧谈恋爱</h4></p>
        <table width="500">
            <!-- 第一行 -->
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" id="nan" name="sex" value="m" ><label for="nan">男</label>
                    <input type="radio" id="nv" name="sex" value="f" ><label for="nv">女</label>
                </td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>生日</td>
                <td>
                <select>
                    <option>--请选择年--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                </select>
                <select>
                    <option>--请选择月--</option>
                    <option>5月</option>
                    <option>6月</option>
                    <option>7月</option>
                    <option>8月</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                </select>
                </td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>所在地区</td>
                <td><input type="text" value="北京"></td>
            </tr>
            <!-- 第四行 -->
            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="hunyin" id="weihun" checked="checked"><label for="weihun">未婚</label>
                    <input type="radio" name="hunyin" id="yihun" ><label for="yihun">已婚</label><input type="radio" name="hunyin" id="lihun" ><label for="lihun">离婚</label>
                </td>
            </tr>
            <!-- 第五行 -->
            <tr>
                <td>学历</td>
                <td><input type="text" value="幼儿园"></td>
            </tr>
            <!-- 第六行 -->
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="xihuande" id="wumei"><label for="wumei">妩媚的</label>
                    <input type="checkbox" name="xihuande" id="keai"><label for="keai">可爱的</label>
                    <input type="checkbox" name="xihuande" id="xiaoxianrou"><label for="xiaoxianrou">小鲜肉</label>
                    <input type="checkbox" name="xihuande" id="laolarou"><label for="laolarou">老腊肉</label>
                </td>
            </tr>
            <!-- 第七行 -->
            <tr>
                <td>自我介绍</td>
                <td><textarea cols="30" rows="3">自我介绍</textarea></td>
            </tr>
            <!-- 第八行 -->
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册"><br>
                    <input type="checkbox" id="tongyi"><label for="tongyi">我同意注册条款和会员加入标准</label><br>
                    <a href="https://www.baidu.com" target="_blank">我是会员，立即登录</a>
                </td>
            </tr>
            <!-- 第九行 -->
            <tr>
                <td></td>
                <td>
                    <h3>我承诺</h3>        
                    <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>