Html用表单和列表写一个注册界面

效果图

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单案例</title>
        <style type="text/css">
            #box{
                width: 37.5rem;
                margin: 0 auto;
                margin-top: 30px;
            }
            body{
                background-color: cadetblue;
            }
            h1{
                width:300px;
                margin: 0 auto;
                color: deepskyblue;
            }
            audio{
                float: left;
            }
        </style>
    </head>
    <body>
        <audio src="../../img/林俊杰%20-%20那些你很冒险的梦.mp3" controls=""></audio>
        <h1>欢迎进入注册界面</h1>
        <hr >
        <div id="box">
            <h3>青春不常在，抓紧谈恋爱</h3>
            <form action="" method="post">
                姓别&nbsp&nbsp
                <label for="se">男</label><input type="radio" name="sex" id="se" value="男" checked="checked"/>&nbsp&nbsp 
                <label for="wo">女</label><input type="radio" name="sex" id="wo" value="女" /><br><br>
                生日&nbsp&nbsp
                <select name="">
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">200</option>
                </select>年
                <select name="">
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                <option value="">9</option>
                </select>月
                <select name="">
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                </select>日<br><br>
                <label for="add">所在区域</label>&nbsp&nbsp <input type="text" name="addr"value="请输入所在区域" id="add"/><br><br>
                婚姻状态&nbsp&nbsp 
                <label for="wei">未婚</label><input type="radio" name="choose" value="未婚" id="wei" checked="checked"/>&nbsp&nbsp 
                <label for="yi">已婚</label><input type="radio" name="choose"  value="已婚" id="yi"/>&nbsp&nbsp 
                <label for="li">离婚</label><input type="radio" name="choose"  value="离婚" id="li"/>&nbsp&nbsp <br><br>
                学历&nbsp&nbsp <input type="text" name="rofs" id="" value="幼儿园" /><br><br>
                喜欢的类型&nbsp&nbsp 
                <label for="fumei">妩媚的</label><input type="checkbox" name="type" id="fumei" value="妩媚的" />&nbsp&nbsp 
                <label for="cute">可爱的</label><input type="checkbox" name="type" id="cute" value="可爱的" />&nbsp&nbsp
                <label for="rou">小鲜肉</label><input type="checkbox" name="type" id="rou" value="小鲜肉" />&nbsp&nbsp
                <label for="larou">老腊肉</label><input type="checkbox" name="type" id="larou" value="老腊肉" />&nbsp&nbsp
                <label for="sao">骚鸡</label><input type="checkbox" name="type" id="sao" value="骚鸡" />&nbsp&nbsp <br><br>
                自我介绍&nbsp&nbsp 
                <br><textarea rows="4" cols="70"></textarea><br><br>
                <input type="submit" name="" id="" value="免费注册" />
                <input type="reset" name="" id="" value="重置" /><br><br>
                <input type="checkbox" name="agree" id="Agree" value="我同意" /><label for="Agree">我同意注册条款和会员加入标准</label><br><br>
                <a href="#">我是会员，立即登录</a><br><br>
                <h4>我承诺</h4>
                <ul>
                    <li>年满18岁，单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
                
        </form>
        </div>
        
    </body>
</html>

 

posted @ 2022-04-14 10:46  CuteTTu  阅读(200)  评论(0)    收藏  举报