HTML案例:征婚网站(前端学习的第六天)

<!DOCTYPE html>
<html lang="zh-CN">

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

<body>
    <h3>青春不常在</h3>
    <form action="" name="信息表单">
        <table width="500">
            <tr>
                <td>姓名</td>
                <td><input type="text" name="name" value="name"></td>
            </tr> <!-- 第一行 -->

            <tr>
                <td>性别:</td>
                <td>
                    <label for="nan">男</label> <input type="radio" id="nan" value="男" name="sex">
                    <label for="nv">女</label> <input type="radio" id="nv" value="女" name="sex">
                </td>
            </tr><!-- 第二行 -->

            <tr>
                <td>生日</td>
                <td>
                    <select name="" id="">
                        <option value="">--请选择年份--</option>
                        <option value="">2001</option>
                        <option value="">2002</option>
                    </select>
                    <select name="" id="">
                        <option value="">--请选择月份--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                    </select>
                    <select name="" id="">
                        <option value="">--请选日期--</option>
                        <option value="">1</option>
                        <option value="">2</option>
                    </select>
                </td>
            </tr><!-- 第三行 -->

            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" value="北京">
                </td>
            </tr><!-- 第四行 -->

            <tr>
                <td>婚姻状况</td>
                <td>
                    <label for="未婚">未婚</label> <input type="radio" name="婚姻状况" value="未婚" id="未婚" checked="checked">
                    <label for="离异">离异</label> <input type="radio" name="婚姻状况" value="离异" id="离异">
                </td>
            </tr><!-- 第五行 -->

            <tr>
                <td>学历</td>
                <td>
                    <select name="" id="">
                        <option value="">本科</option>
                        <option value="" selected="selected">研究生</option>
                        <option value="">博士</option>
                    </select>
                </td>
            </tr> <!-- 第六行 -->

            <tr>
                <td>喜欢类型</td>
                <td>
                    <label for="清纯">清纯</label> <input type="checkbox" id="清纯" name="类型" value="清纯">
                    <label for="萝莉">萝莉</label> <input type="checkbox" id="萝莉" name="类型" value="萝莉">
                    <label for="御姐">御姐</label> <input type="checkbox" id="御姐" name="类型" value="御姐">
                </td>
            </tr> <!-- 第七行 -->

            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea name="自我介绍" cols="30" rows="5" placeholder="请输入你的自我介绍"></textarea>
                </td>
            </tr><!-- 第八行 -->

            <tr>
                <td>请上传你的照片</td>
                <td> <input type="file"> </td>
            </tr><!-- 第九行 -->

            <tr>
                <td></td>
                <td><input type="submit" value="提交"></td>
            </tr><!-- 第十行 -->

            <tr>
                <td></td>
                <td><input type="checkbox" value="true">我同意将以上信息公开到我的社交账号</td>
            </tr><!-- 第十一行 -->

            <tr>
                <td></td>
                <td>
                    <h2>我承诺</h2>
                    <ul>
                        <li>真诚</li>
                        <li>真心</li>
                    </ul>
                </td>
            </tr><!-- 第十二行 -->

        </table>
    </form>

</body>

</html>

效果:

 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值