HTML学习笔记-注册页面的实现

2021-12-04 17:33:37 阅读：99 来源： 互联网

HTML学习笔记-注册页面的实现

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <style>

        /*添加背景图片*/
        body{
            background:url("../img/bg1.jpg");
        }

        .center{
            /*背景颜色*/
            background:white;
            /*宽度*/
            width:400px;
            /*文本对齐方式*/
            text-align:center;
            /*外边距*/
            margin:auto;
        }






    </style>



</head>
<body>

    <!--顶部公司图标-->
    <div>
        <img src = "../img/logo1.png"/>
    </div>

    <!--中间-注册信息-->
    <div class = "center">
    <div>注册详情</div>


        <!--表单标签-->
        <form action="#" method = "get" autocomplete= "off">

            <!--表单项-->
            <div>
                <label for = "username">姓名：</label>
                <input type = "text" id = "username" value = " " placeholder="再次输入姓名" required/>
            </div>

            <div>
                <label for = "password">密码：</label>
                <input type = "password" id = "password" name = "password" placeholder="再次输入密码" required/>
            </div>


            <div>
                <label for = "email">邮箱：</label>
                <input type = "email" id = "email"  value = "email" placeholder="再次输入邮箱" required />
            </div>

            <div>
                <label for = "tel">手机：</label>
                <input type = "tel" id = "tel" name = value = "" placeholder = "再次输入手机号码" required/>
            </div>

            <hr/>

            <!--nbsp空格  radio单选框-->
            <div>
                <label for = "gender">性别：</label>
                <input type="radio" id = "gender" name = "gender" value="man"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio"  name = "gender" value="woman"/>女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>


            <div>
                <label for = "hobby">性别：</label>
                <input type="checkbox" id = "hobby" name = "hobby" value="music"/>音乐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox"  name = "hobby" value="movie"/>电影&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox"  name = "hobby" value="game"/>游戏&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>

            <div>
                <label for = "birthday">出生日期</label>
                <input type = "date" id = "birthday" name = "birthday" value=""/>

            </div>


            <!--下拉列表使用select标签-->
            <div>
                <label for = "city">所在城市：</label>

                <select id = "city" name = "city">
                    <option>---所在城市---</option>
                    <optgroup label="直辖市">
                        <option>上海</option>
                        <option>重庆</option>
                        <option>北京</option>
                    </optgroup>

                    <optgroup label="省会城市">
                        <option>武汉</option>
                        <option>南京</option>
                        <option>郑州</option>
                        <option>合肥</option>
                    </optgroup>

                </select>
            </div><hr/>


            <!--文本域使用textarea标签-->
            <div>
                <label for = ”desc">个性签名：</label>
                <textarea id = "desc" name = "desc" rows = "5" cols="40"  placeholder="请写下您的与众不同"></textarea>
            </div>
            <hr/>

            <button type = "submit">注册</button>
            <button type = "reset">重置</button>
        </form>
    </div>

</body>
</html>

标签：background,笔记,---,HTML,nbsp,注册,页面
来源： https://blog.csdn.net/qq_44653420/article/details/121718843

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML学习笔记-注册页面的实现

HTML学习笔记-注册页面的实现