使用HTML、CSS和JavaScript编写一个注册界面(一)

倘若文章或代码中有任何错误或疑惑,欢迎提出交流哦~


HTML和CSS

首先,我们需要编写一个简洁的注册界面。

简单编写下,如下:

呈现效果为:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结合JavaScript编写注册界面</title>
</head>

<body>
    <div class="main">
        <h3>注册界面</h3>
        <form action="#">
            <ul>
                <li>
                    <input type="text" id="name" placeholder="请输入用户昵称">
                </li>
                <li>
                    <input type="text" id="account" placeholder="请输入账号">
                </li>
                <li>
                    <input type="text" id="password" placeholder="请输入密码">
                </li>
                <li><input type="text" id="phone" placeholder="请输入你的手机号码">
                </li>
                <li>
                    <input type="email" id="email" placeholder="请输入邮箱地址">
                </li>
            </ul>
            <input type="submit" id="submit" value="注册">
        </form>
    </div>
</body>

</html>

在添加一定的css样式后,得到下面文中的效果。

注册按钮

给注册按钮添加完css样式后,因为将按钮向右浮动,会导致上浮,所以添加了清除浮动类。这个比较重要我觉得。

添加如下要求:

  1. 用户名:只能包含英文字符、中文字符、数字,长度在2-15。
  2. 账号:只能包含字母和数字,长度在6-20,不允许包含任何的特殊符号。
  3. 密码:密码长度至少6个字符,且必须同时包含大写字母,小写字母,数字和特殊字符 (例如 !@#$%^&* )。
  4. 手机号:长度为11位的中国号码。
  5. 邮箱:符合电子邮件的常规格式。

效果如下:

也就是说,如果用户输入的内容错误了,那么输入框下的提示信息就会变成红色,来提醒出错。

密码显示按钮

可以看到我们使用类型为password的input输入框时,输入的内容都是不可见的,而我们在日常使用经常看到,显示密码的按钮,现在加上这个按钮。

下面是添加眼睛按钮的HTML和CSS代码,下一篇文章使用Javascript解决问题。

CSS和HTML代码

jhtml 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结合JavaScript编写注册界面</title>
    <style>
        .main {
            /* 设置内容宽度以及水平居中 */
            width: 80%;
            margin: 0 auto;
            margin-left: 20px;
            /* 边框以及边框圆角 */
            border: 1px solid #ccc;
            border-radius: 5px;
            /* 背景颜色 */
            background-color: #f5f5f5;
            padding: 20px;
        }

        form ul li {
            list-style: none;
            margin-bottom: 10px;
        }

        form ul li input[type="text"],
        form ul li input[type="password"],
        form ul li input[type="email"] {
            width: 80%;
            margin-top: 5px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 提示信息部分 */
        .prompt {
            /* 让文本和输入框更紧凑 */
            margin-top: 2px;
            width: 80%;

            /* 设置提示信息为合适的大小,以及颜色 */
            font-size: 12px;
            color: rgba(0, 0, 0, 0.3);
        }

        /* 注册按钮部分 */
        form ul li input[type="submit"] {
            float: right;
            margin-top: 10px;
            padding: 10px 20px;
            border: none;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }

        form ul li input[type="submit"]:hover {
            background-color: #45a049;
        }

        /* 显示图标部分 */
        form ul li input[type="password"],
        button {
            display: inline;
        }

        button {
            border: none;
            cursor: pointer;
            padding-top: 5px;
            height: 25px;
            width: 30px;
        }


        img {
            /* 让图片占满整个区域 */
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="main">
        <h3>注册界面</h3>
        <form action="#">
            <ul>
                <li>
                    <input type="text" id="name" placeholder="请输入用户昵称">
                    <p class="prompt">用户名只能包含英文字符、中文字符、数字,长度在2-15。</p>
                </li>
                <li>
                    <input type="text" id="account" placeholder="请输入账号">
                    <p class="prompt">账号只能包含字母和数字,长度在6-20,不允许包含任何的特殊符号。</p>
                </li>
                <li>
                    <input type="password" id="password" placeholder="请输入密码">
                    <button id="button"><img src="./image/view.png" alt="显示" id="img"></button>
                    <p class="prompt">密码长度至少6个字符,且必须同时包含大写字母,小写字母,数字和特殊字符</p>
                </li>
                <li><input type="text" id="phone" placeholder="请输入你的手机号码">
                    <p class="prompt">手机号为长度11位的中国号码。</p>
                </li>
                <li>
                    <input type="email" id="email" placeholder="请输入邮箱地址">
                    <p class="prompt">请输入符合电子邮件的常规格式。</p>
                </li>
                <li>
                    <input type="submit" id="submit" value="注册">
                    <!-- 消除浮动类,避免上浮 -->
                    <div style="clear: both"></div>
                </li>
            </ul>

        </form>
    </div>
</body>

</html>

页面效果如下:

相关推荐
爱吃烤鸡翅的酸菜鱼17 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我25 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子30 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹34 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器40 分钟前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻1 小时前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己1 小时前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json