登录注册静态网页实现(HTML,CSS)

实现效果图

实现效果

使用HTML编写页面结构,CSS美化界面,点击注册,跳转到注册界面,均为静态网页,是课上的一个小作业~

使用正则表达式对输入进行验证,包括邮箱格式验证,用户名格式验证。

正则表达式

  • 字面值字符:例如字母、数字、空格等,可以直接匹配它们自身。

  • 特殊字符:例如点号 .、星号 *、加号 +、问号 ? 等,它们具有特殊的含义和功能。

  • 字符类:用方括号 [ ] 包围的字符集合,用于匹配方括号内的任意一个字符。

  • 元字符:例如 \d\w\s 等,用于匹配特定类型的字符,如数字、字母、空白字符等。

  • 量词:例如 {n}{n,}{n,m} 等,用于指定匹配的次数或范围。

  • 边界符号:例如 ^$\b\B 等,用于匹配字符串的开头、结尾或单词边界位置。

以上为菜鸟教程给出的基本概念

我用到的正则表达式还是很简单的代码中用到了^[a-zA-Z0-9 -]{6,16}表示输入格式要求长度为6到16的由大/小写字母、空格或者连字符-组成,其中\^表示匹配开始标识,为匹配结束标识。

代码实现

首先是登录界面index.html

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<link rel="stylesheet" href="css/login.css">
</head>

<body>
<form>
<div class="user">
<input type="text" name="name" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
</div>
<div class="footer">
<input type="submit" name="submit" value="登录" class="btn">
<input type="submit" name="submit" value="注册" class="btn" formaction="register.html">
</div>
</form>
</body>
</html>

登录界面样式文件login.css

css 复制代码
body {
    background: url(../images/dog.jpg) no-repeat center center fixed;
    background-size: cover;
    padding-top: 40px;
}

form {
    width: 343px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
}

input {
    width: 300px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

.user {
    padding-top: 40px;
}

.footer input {
    width: 50px;
    height: 34px;
}

.btn {
    border-radius: 4px;
    border-radius: 6px;
}

input[type=submit] {
    cursor: pointer;
}

input:focus {
    background-color: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

其次是register.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="./css/register.css">
</head>

<body>
    <div>
        <form action="#" class="contact_form" method="post">
            <ul>
                <li class="usually">
                    <h2>用户注册</h2>
                </li>
                <li class="usually">
                    <label for="name">昵称:</label>
                    <!-- 用户名可以由大小写字母,0-9数字空格和连字符组成的长度为6-16的字符串 -->
                    <input type="text" name="name" id="name" autocomplete="off" required
                        pattern="^[a-zA-Z0-9 -]{6,16}$">
                </li>
                <li class="usually">
                    <label for="mail">注册邮箱:</label>
                    <!-- 用户名可以由大小写字母,0-9数字空格和连字符组成的长度为6-16的字符串 -->
                    <input type="email" name="mail" id="mail" required>
                </li>
                <li class="usually">
                    <label for="password">密码:</label>
                    <input type="password" name="password" id="password" autocomplete="off" required>
                </li>
                <li class="userselect">
                    <label>性别:</label>
                    <input type="radio" id="male" name="gender" value="male" checked>
                    男
                    <input type="radio" id="female" name="gender" value="female">
                    女
                </li>
                <li class="usually">
                    <label for="age">年龄:</label>
                    <input type="text" name="age" id="age" autocomplete="off" required pattern="^[0-9]{1,2}$">
                </li>
                <li class="userselect">
                    <label for="hobby">兴趣爱好:</label>
                    <input type="checkbox" name="swim" id="swim" checked>
                    游泳
                    <input type="checkbox" name="climb" id="climb">
                    登山
                    <input type="checkbox" name="run" id="run">
                    跑步
                    <input type="checkbox" name="walk" id="walk">
                    散步
                </li>
                <li class="usually">
                    <label for="province">所在省份:</label>
                    <select name="province" id="province">
                        <option value="liaoning">辽宁</option>
                        <option value="shandong">山东</option>
                        <option value="zhejiang">浙江</option>
                    </select>
                </li>
                <li class="usually">
                    <label for="introduce">自我介绍:</label>
                    <textarea name="introduce" id="introduce" cols="30" rows="10"></textarea>
                </li>
                <li>
                    <input type="submit" name="submit" id="submit" value="立即注册">
                </li>
            </ul>
        </form>
    </div>
</body>

</html>

注册界面的样式文件register.css

css 复制代码
.contact_form {
    width: 50%;
    margin: 0 auto;
}

.contact_form ul {
    width: 750px;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.contact_form li {
    padding: 12px;
    border-bottom: 2px solid #eee;
}

.contact_form li:first-child,
.contact_form li:last-child {
    border-bottom: 2px solid #777;
}

.contact_form .usually label {
    width: 150px;
    display: inline-block;
}

.contact_form .userselect label {
    width: 150px;
    display: inline-block;
}

.contact_form .usually input {
    height: 20px;
    width: 220px;
    /* 上下5px 左右8px */
    padding: 5px 8px;
}


*:focus {
    outline: none;
}

.usually input,
.usually textarea {
    background: url(../images/bg.jpeg) no-repeat 98% center;
    box-shadow: 0 10px 15px #eee inset;
    border-radius: 2px;
}

.contact_form textarea {
    padding: 8px;
    width: 300px;
}

/* 获得焦点的时候背景色设置为白色  */
.usually input:focus,
.usually textarea:focus {
    background: #fff;
}

input[type=submit] {
    margin-left: 156px;
    background-color: #68b12f;
    border: 1px solid #509111;
    border-radius: 3px;
    color: white;
    padding: 6px 10px;
    text-align: center;

}

input[type=submit]:hover {
    opacity: .85;
    cursor: pointer;
}

.usually input:focus:invalid,
.usually textarea:focus:invalid {
    background-color: #d45252;
    box-shadow: 0 0 5px #d45252;
}

.usually input:focus:valid,
.usually textarea:focus:valid {
    background-color: #5cd053;
    box-shadow: 0 0 5px #5cd053;
}

总结

总体来说还是很简单的,有很多有趣的小样式。

相关推荐
Z_ One Dream11 分钟前
css 在 hover 子元素时,不要让父元素触发 hover 效果
前端·javascript·css
码农幻想梦5 小时前
实验九 视图的使用
前端·数据库·oracle
开心工作室_kaic7 小时前
ssm010基于ssm的新能源汽车在线租赁管理系统(论文+源码)_kaic
java·前端·spring boot·后端·汽车
大力水手~8 小时前
css之loading旋转加载
前端·javascript·css
Nguhyb8 小时前
-XSS-
前端·xss
前端郭德纲8 小时前
深入浅出ES6 Promise
前端·javascript·es6
就爱敲代码8 小时前
ES6 运算符的扩展
前端·ecmascript·es6
王哲晓9 小时前
第六章 Vue计算属性之computed
前端·javascript·vue.js
究极无敌暴龙战神X9 小时前
CSS复习2
前端·javascript·css
风清扬_jd9 小时前
Chromium HTML5 新的 Input 类型week对应c++
前端·c++·html5