用户注册页面的设计与实现

最新推荐文章于 2024-07-17 17:08:15 发布

YQEMMMM

最新推荐文章于 2024-07-17 17:08:15 发布

阅读量2.1w

点赞数 14

分类专栏： HTML专栏文章标签： html css 网页设计

本文链接：https://blog.csdn.net/YQEMMMM/article/details/109206796

版权

HTML专栏专栏收录该内容

15 篇文章 8 订阅

订阅专栏

用户注册页面的设计与实现

功能介绍：
1.使用HTML5表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。
2.验证要求：每个输入栏目的文本框均需要显示提示信息。用户在点击按钮提交注册信息时可以验证所有栏目均为必填项以及电子邮箱的有效性。
实现效果图：
在这里插入图片描述
一、界面设计
1.使用<div>划分区域
2.使用CSS外部样式表定义样式
1）reg.css
2）关键属性：box-shadow: 10px 10px 15px black;
二、表单设计
1.使用<form>形成表单区域
2.使用<label>标签形成文字标签
3.使用<input>标签形成各种输入框
1）type=text：单行文本框；
2）type=password：密码框；
3）type=email：邮箱输入框。
4.使用<button>制作提交按钮
三、提示与验证功能的实现
1.使用<input>标签的placeholder属性实现提示效果

<label>用户名：
<input type="text" placeholder="请输入用户名" name="username" />
</label>

2.使用<input>标签的required属性实现非空验证

<input type="text" placeholder="请输入用户名" name="username" required />

3.使用<input>标签的email类型实现电子邮箱验证

<input type="email" name="email" />

4.使用<form>标签的autocomplete属性实现内容自动记忆补全

<form method="post" action="URL" autocomplete="on"  >
    ……（内容省略）
</form>

四、完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>HTML5用户注册页面示例</title>
        <link rel="stylesheet" href="css/reg.css">
    </head>
    <body>
        <div id="container">
            <!--页面标题-->
            <h1>用户注册页面</h1>
            <!--水平线-->
            <hr />
            <!--表单-->
            <form method="post" action="URL" autocomplete="on">
                <label>用户名：
                    <input type="text" placeholder="请输入用户名" name="username" required />
                </label>
                <br />
                <label>密　码：
                    <input type="password" placeholder="请输入密码" name="pwd" required />
                </label>
                <br />
                <label>确　认：
                    <input type="password" placeholder="请再次输入密码" name="pwd" required />
                </label>
                <br />
                <label>姓　名：
                    <input type="text" placeholder="请输入真实姓名" name="name" required />
                </label>
                <br />
                <label>邮　箱：
                    <input type="email" placeholder="请输入电子邮箱" name="email" required />
                </label>
                <br />
                <button type="submit">
                    提交注册
                </button>
            </form>
        </div>
    </body>
</html>