HTML(仅)综合案例

99 阅读1分钟
<!DOCTYPE html>
<html lang="en">

<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>综合案例-注册页面</title>
</head>

<body>
    <!--表单综合案例:运用form、table、ul等-->
    <h2>青春不常在,抓紧谈恋爱</h2>
    <form action="xxx.xxx" method="POST" name="name2">
        <table width="500">
            <!--第1行-->
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="man" value="男" checked="checked">
                    <label for="man"><img src="图片地址"></label>
                    <input type="radio" name="sex" id="wman" value="女">
                    <label for="wman"><img src="图片地址"></label>
                </td>
            </tr>
            <!--第2行-->
            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option>--请选择年--</option>
                        <option>1998</option>
                        <option>1999</option>
                        <option>2000</option>
                    </select>
                    <select>
                        <option>--请选择月--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                    <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
            </tr>
            <!--第3行-->
            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" value="北京">
                </td>
            </tr>
            <!--第4行-->
            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="marry" id="none" value="未婚" checked="checked">
                    <label for="none">未婚</label>
                    <input type="radio" name="marry" value="已婚" id="marry">
                    <label for="marry">已婚</label>
                    <input type="radio" name="marry" value="离婚" id="divorce">
                    <label for="divorce">离婚</label>
                </td>
            </tr>
            <!--第5行-->
            <tr>
                <td>学历</td>
                <td>
                    <input type="text" value="博士后">
                </td>
            </tr>
            <!--第6行-->
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="like" value="妩媚的" id="charming">妩媚的
                    <input type="checkbox" name="like" value="可爱的" id="love">可爱的
                    <input type="checkbox" name="like" value="小鲜肉" id="young">小鲜肉
                    <input type="checkbox" name="like" value="老腊肉" id="aged">老腊肉
                    <input type="checkbox" name="like" value="都喜欢" id="aged">都喜欢
                </td>
            </tr>
            <!--第7行-->
            <tr>
                <td>个人介绍</td>
                <td>
                    <textarea name="introduce">自我介绍</textarea>
                    <!--后期用CSS改-->
                </td>
            </tr>
            <!--第8行-->
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                    <input type="reset" value="重新填写">
                </td>
            </tr>
            <!--第9行-->
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="agree" value="同意" checked="checked"> 我同意注册条款和会员加入标准
                </td>
            </tr>
            <!--第10行-->
            <tr>
                <td></td>
                <td>
                    <a href="#">我是会员,立即登录</a>
                </td>
            </tr>
            <!--第11行-->
            <tr>
                <td></td>
                <td>
                    <h5>我承诺</h5>
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

HTML综合案例.png