使用HTML写一个注册界面（简单）

最新推荐文章于 2024-04-07 09:44:00 发布

zhou_mumu

最新推荐文章于 2024-04-07 09:44:00 发布

阅读量9.1k

点赞数 6

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/zhou_mumu/article/details/107589009

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

界面效果：

编写过程：

中间没有使用css，只有一个注册界面的结构

为了使看起来整齐，首先使用了<table>表格标签将页面作为没有线条的两列表格（见上方右图）

标题使用<h4>标签即可，而左边一列的较为简单直接<td>即可，只用看右边

第一行使用input标签中的radio属性实现单选过程，图片则使用img标签即可，要达到点击图片和文字直接选中的效果则需要图片文字放在label标签中，要达到单选的效果，一定要在选项中使用name属性将他们标为同类
第二行使用select标签，下拉选项放在option中
第三行直接input标签中的text文本即可
第四行和第一行类似
第五行和第三行类似
第六行达到多选效果，使用input中的checkbox属性即可
第七行使用textarea可以实现多行文本的输入
第八行使用input中的submit属性，要更改按钮的值使用value属性
第九行虽然是单选，可以使用input中的checkbox属性，标签里面使用checked可以在页面初始的时候直接勾选成功
第十行锚点标签a,herf指向点击后目标网页，target实现新开页面而不是覆盖页面
第十一行无序标签，ul中嵌套li，但是要注意只有li标签中能嵌套其他标签，ul不可

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="zn-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <form action="#">
        <table width="500" border="1">
            <!-- 第一行 -->
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="nan"> <label for="nan"><img src=images/man.jpg> 男</label>
                    <input type="radio" name="sex" id="nv"> <label for="nv"><img src=images/women.jpg> 女</label>
                </td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option>--请选择年--</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>
                    </select>
                    <select>
                        <option>--请选择月--</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                    </select>
                    <select>
                        <option>--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <!-- 第四行 -->
            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="marry" id="weihun"><label for="weihun">未婚</label>
                    <input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label>
                    <input type="radio" name="marry" id="lihun"><label for="lihun">离婚</label>
                </td>
            </tr>
            <!-- 第五行 -->
            <tr>
                <td>学历</td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <!-- 第六行 -->
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" id="妩媚"><label for="妩媚">妩媚的</label>
                    <input type="checkbox" id="可爱"><label for="可爱">可爱的</label>
                    <input type="checkbox" id="小鲜"><label for="小鲜">小鲜肉</label>
                    <input type="checkbox" id="老腊"><label for="老腊">老腊肉</label>
                </td>
            </tr>
            <!-- 第七行 -->
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>个人简介
                    </textarea>
                </td>
            </tr>
            <!-- 第八行 -->
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>
             <!-- 第九行 -->
             <tr>
                <td></td>
                <td>
                   <input type="checkbox" checked>我同意注册条款和会员加入标准
                </td>
            </tr>
            <!-- 第十行 -->
            <tr>
                <td></td>
                <td>
                   <a href="http://www.baidu.com" target="_blank">我是会员，立即登录</a>
                </td>
            </tr>
            <!-- 第十一行 -->
            <tr>
                <td></td>
                <td>
                   <ul>
                       <li><h3>我承诺</h3></li>
                       <li>年满十八，单身</li>
                       <li>抱着严肃的态度</li>
                       <li>找寻另一半</li>
                   </ul>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>