html9 登录 注册界面

原创 于 2021-04-10 15:50:07 发布 · 140 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文通过一个具体的案例，展示了如何使用HTML设计一个完整的表单页面，包括表单元素的布局、选择器、文本框等，并介绍了如何利用表格来组织这些元素以达到更好的视觉效果。

综合案例

目标效果：

我的代码（有些地方写的不合适，可以看下面老师讲的代码）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title> 我的页面 </title>
    <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>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <form>
        性别 <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女    <br>
        生日
        <select>
            <option>1995</option>
            <option>1996</option>
            <option>1997</option>
            <option>1998</option>
            <option>1999</option>
        </select> 
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select> 
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select> 
        <br>
        所在地区：
        <select>
            <option>北京</option>
            <option>河南</option>
            <option>吉林</option>
        </select>
        <br>    
        婚姻状况：
        <input type="radio" name="hunyin" checked="checked">未婚 <input type="radio" name="hunyin">离异 <input type="radio" name="hunyin">丧偶    
        <br>
        学历：
        <select>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>专科</option>
            <option>本科</option>
            <option>研究生</option>
            <option>博士</option>
        </select>
        <br>
        喜欢的类型：
        <input type="checkbox">妩媚的 <input type="checkbox">可爱的 <input type="checkbox">小鲜肉 <input type="checkbox">老腊肉
        <br>
        自我介绍：
        <textarea colos="50" rows="5">请输入您的自我介绍</textarea>
        <br>
        <input type="button" value="免费注册">
        <br>
        <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
        <br>
        <a href="#">我是会员，立即登录</a>
        <br>
        <h5>我承诺</h5>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严谨的态度</li>
            <li>真诚的寻找另一半</li>
        </ul>
    </form>
</body>
</html>

我的效果：

听完老师讲解后修改的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title> 我的页面 </title>
    <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>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <!-- 写的时候table里面加border="1"看着更清晰 -->
    <table width="500">
        <!-- 第一行 -->
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="man" checked="checked"> <label for="man"> <img src="man.jpg"> 男 </label>
                <input type="radio" name="sex" id="woman"> <label for="woman"> <img src="woman.jpg"> 女 </label>
            </td>

        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
                <select>
                    <option>--请选择生日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td> <input type="text" value="北京"> </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" checked="checked" id="weihun"> <label for="weihun">未婚</label>
                <input type="radio" name="marry" id="liyi"> <label for="liyi">离异</label>
                <input type="radio" name="marry" id="sangou"> <label for="sangou">丧偶</label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="本科"></input>
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" id="wumei" checked="checked"> <label for="wumei">妩媚的</label>
                <input type="checkbox" id="cute"> <label for="cute">可爱的</label>
                <input type="checkbox" id="xiaoxianrou"> <label for="xiaoxianrou">小鲜肉</label>
                <input type="checkbox" id="laolarou"> <label for="laolarou">老腊肉</label>
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea colos="40" cows="4" value="请输入您的自我介绍"></textarea>
                <!-- <input type="textarea" cols="50" rows="5" value="请输入您的自我介绍"> -->
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <!-- <td> <input type="button" value="免费注册"> </td> -->
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满十八岁、单身</li>
                    <li>抱着严谨的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

效果图：

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值