【前端一面作业】相亲网站

最新推荐文章于 2024-08-25 15:43:07 发布

返返返

最新推荐文章于 2024-08-25 15:43:07 发布

阅读量119

点赞数 2

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_70770395/article/details/130758177

版权

这是一个用于创建相亲注册页面的HTML代码示例，包括性别选择、生日（通过年/月/日下拉菜单）、所在地区、婚姻状况、学历和兴趣类型的输入。表单还包含自我介绍的文本区域以及同意服务条款的复选框。用户需满足18岁以上且单身的条件。

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

效果图

代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="相亲">
    <meta name="description" content="相亲注册网站">
    <title>启航</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<from method="post" action="index.html">
    <table>
        
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" value="boy" name="sex" id="boy" checked required/>
                <label for="boy">男</label>
                <input type="radio" value="girl" name="sex" id="girl"/>
                <label for="girl">女</label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
<!--                <input type="date">-->
                <select name="year" >
                    <!--                默认文本-->
                    <option value="" style="display: none">--请选择年--</option>
                    <option value="2023">2023</option>
                    <option value="2022">2022</option>
                    <option value="2021">2021</option>
                    <option value="2020">2020</option>
                </select>
                <select name="month">
                    <option value="" style="display: none">--请选择月--</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
                <select name="day">
                    <option value="" style="display: none">--请选择日--</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" name="area" placeholder="北京思密达"/>
            </td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td>
                <!--                <label  for="mark">文字标记</label>-->
                <!--                <input type="text" id="mark">-->
                <input type="radio" value="unmarried" name="status" id="unmarried" checked required/>
                <label for="unmarried">未婚</label>
                <input type="radio" value="married" name="status" id="married"/>
                <label for="married">已婚</label>
                <input type="radio" value="divorced" name="status" id="divorced"/>
                <label for="divorced">离婚</label>
            </td>
        </tr>
        <tr>
            <td>学历</td>
            <td>
                <input type="text" name="degree" placeholder="幼儿园"/>
            </td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" value="feminine" name="hobby" id="feminine"/>
                <label for="feminine">妩媚的</label>
                <input type="checkbox" value="cute" name="hobby" id="cute"/>
                <label for="cute">可爱的</label>
                <input type="checkbox" value="small" name="hobby" id="small"/>
                <label for="small">小鲜肉</label>
                <input type="checkbox" value="old" name="hobby" id="old"/>
                <label for="old">老腊肉</label>
                <input type="checkbox" value="all" name="hobby" id="all"/>
                <label for="all">都喜欢</label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea name="introduce" cols="25" rows="2">&nbsp;自我介绍</textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="checkbox" value="ture" name="agree" checked required>我同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td><a href="login.html" target="_self">我是会员，立即登录</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h2>我承诺</h2>
                <ul>
                    <li>年满18岁，单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</from>
</body>
</html>

缺点

天数没法根据月份判断

补充知识

<input type="date"> - HTML（超文本标记语言） | MDN (mozilla.org)

HTML <label> 标签 (w3school.com.cn)

(6条消息) select设置默认文本的方法，相当于placeholder_将 select2 显示为纯输入文本_何日成熟的博客-CSDN博客

HTML <select> 标签 | 菜鸟教程 (runoob.com)

HTML <meta> 标签 | 菜鸟教程 (runoob.com)

html - 如何在“radio”输入字段中使用“required”属性 - SegmentFault 思否