前端学习——HTML初学__9 HTML综合案例—注册界面

龙蛋蛋啊

已于 2022-07-02 10:41:03 修改

阅读量117

点赞数 1

分类专栏： HTML 文章标签：前端 html 学习 css3 html5

于 2022-07-02 10:40:49 首次发布

本文链接：https://blog.csdn.net/m0_53428059/article/details/125570105

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

经过前面的学习接下来进行一个实战项目，创建简易的注册页面

直接上代码：

<!DOCTYPE html>
<html lang="zh-CN">

<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>
   <h3>龙龙故事网注册</h3>
    <table width="500">
        <form>
        <!-- 账号 -->
        <tr>
            <td>输入账号：</td><td><input type="text" maxlength="11" value="十一位以内" /></td>
        </tr>
        <!-- 密码 -->
        <tr>
            <td>输入密码：</td><td><input type="password" maxlength="12" /></td>
        </tr>
        <!-- 性别 -->
        <tr>
         <td>性别:</td>
         <td><input type="radio" name="sex" id="nan" /><label for="nan"><img src="boy.png" width="20" height="20">男</label> 
            <input type="radio" name="sex" id="nv" /><label for="nv"><img src="girl.png" width="20" height="20">女</label>
        </tr>
        <!-- 生日 -->
        <tr>
            <td>生日：</td>
            <td>
                <select>
                 <option>请选择年</option>
                 <option>1999</option>
                 <option>2000</option>
                 <option>2001</option>
                 <option>2002</option>
                 <option>2003</option>
                 <option>2004</option>
                </select>
                <select>
                    <option>请选择月</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                   </select>
            </td>
            <td></td>
            <td></td>
        
        </tr>
        <!-- 地区 -->
        <tr>
            <td>所在地区：</td>
            <td>
                <select>
                 <option>请选择地区</option>
                 <option>河南</option>
                 <option>安徽</option>
                 <option>山东</option>
                 <option>陕西</option>
                 <option>四川</option>
                 <option>新疆</option>
                </select>
        </tr>
        <!-- 手机号码 -->
        <tr>
            <td>请输入手机号:</td>
            <td><input type="text" maxlength="11" value="请输入11位手机号" /></td><td><input type="button" value="获取验证码"></td>
        </tr>
        <!-- 输入验证码 -->
        <tr>
         <td>输入验证码</td><td><input type="text" value="输入六位数验证码" maxlength="6" />
         </td>
        </tr>
        <!-- 讲述故事类型 -->
        <tr>
         <td>想要讲述的故事类型：</td>
         <td>情感类<input type="checkbox" name="hobby" value="hob"/>生活类<input type="checkbox" name="hobby" value="hob"/>科普类<input type="checkbox" name="hobby" value="hob"/></td>
        </tr>
        <!-- 自我介绍 -->
        <tr>
            <td>自我介绍：</td>
            <td><textarea rows="3" cols="20">进行一点个人介绍吧！</textarea></td>
        </tr>
        <!-- 注册 -->
        <tr>
            <td></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>
    </form>
</body>

</html>

运行结果: