如何创建一个优雅的登录表单

来源：互联网发布：主播就是网络乞丐编辑：程序博客网时间：2024/05/16 02:34

如何创建一个登录表单

第一步：添加HTML

<!doctype html><html><head><meta charset="utf-8"><title>登录表单演示</title><link rel="stylesheet" href="style.css"></head><body><h2>登录</h2><form action="/action_page.php">  <div class="imgcontainer">    <img src="img_avatar2.png" alt="Avatar" class="avatar">  </div>  <div class="container">    <label><b>用户名</b></label>    <input type="text" placeholder="请填写用户名" name="uname" required>    <label><b>密码</b></label>    <input type="password" placeholder="请输入密码" name="psw" required>            <button type="submit">登录</button>    <input type="checkbox" checked="checked"> Remember me  </div>  <div class="container" style="background-color:#f1f1f1">    <button type="button" class="cancelbtn">Cancel</button>    <span class="psw">忘记<a href="#">密码？</a></span>  </div></form></body></html>

第二步：添加css样式（style.css）

@charset "utf-8";/* 表单边框 */form {    border: 3px solid #f1f1f1;}/* 全宽度输入框 */input[type=text], input[type=password] {    width: 100%;    padding: 12px 20px;    margin: 8px 0;    display: inline-block;    border: 1px solid #ccc;    box-sizing: border-box;}/* 所有按钮的样式 */button {    background-color: #4CAF50;    color: white;    padding: 14px 20px;    margin: 8px 0;    border: none;    cursor: pointer;    width: 100%;}/* 为按钮添加鼠标移动样式 */button:hover {    opacity: 0.8;}/* 取消按钮设置为红色 */.cancelbtn {    width: auto;    padding: 10px 18px;    background-color: #f44336;}/* 头像置于图像容器正中 */.imgcontainer {    text-align: center;    margin: 24px 0 12px 0;}/* 头像 */img.avatar {    width: 40%;    border-radius: 50%;}/* 添加容器内边距 */.container {    padding: 16px;}/* “忘记密码”字样置于右边 */span.psw {    float: right;    padding-top: 16px;}/* 设置小屏幕上的span和取消按钮样式 */@media screen and (max-width: 300px) {    span.psw {display: block;    }    .cancelbtn {        width: 100%;    }}

效果如下：

如何创建一个弹出式的登录表单

第一步：添加HTML

<!doctype html><html><head><meta charset="utf-8"><title>弹出式登录表单演示</title><link rel="stylesheet" href="style.css"></head><body><h2>弹出式登录页面</h2><!-- 弹出模态框的按钮 --><button onclick="document.getElementById('id01').style.display='block'">登录</button><!-- 模态框 --><div id="id01" class="modal">  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>  <!-- 内容 -->  <form class="modal-content animate" action="/action_page.php">    <div class="imgcontainer">      <img src="img_avatar2.png" alt="Avatar" class="avatar">    </div>    <div class="container">      <label><b>用户名</b></label>      <input type="text" placeholder="请输入用户名" name="uname" required>      <label><b>密码</b></label>      <input type="password" placeholder="请输入密码" name="psw" required>      <button type="submit">登录</button>      <input type="checkbox" checked="checked">记住我    </div>    <div class="container" style="background-color:#f1f1f1">      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">取消</button>      <span class="psw">忘记<a href="#">密码？</a></span>    </div>  </form></div><!-- js文件最后加载，提高页面呈现速度 --><script src="close_modal.js"></script></body></html>

第二步：添加css样式（style.css）

@charset "utf-8";/* 全宽度输入框 */input[type=text], input[type=password] {    width: 100%;    padding: 12px 20px;    margin: 8px 0;    display: inline-block;    border: 1px solid #ccc;    box-sizing: border-box;}/* 所有按钮的样式 */button {    background-color: #4CAF50;    color: white;    padding: 14px 20px;    margin: 8px 0;    border: none;    cursor: pointer;    width: 100%;}/* 为按钮添加鼠标移动样式 */button:hover {    opacity: 0.8;}/* 取消按钮设置为红色 */.cancelbtn {    width: auto;    padding: 10px 18px;    background-color: #f44336;}/* 头像置于图像容器正中 */.imgcontainer {    text-align: center;    margin: 24px 0 12px 0;}/* 头像 */img.avatar {    width: 40%;    border-radius: 50%;}/* 添加容器内边距 */.container {    padding: 16px;}/* “忘记密码”字样置于右边 */span.psw {    float: right;    padding-top: 16px;}/* 模态框（背景） */.modal {    display: none; /* 默认隐藏 */    position: fixed;     z-index: 1;     left: 0;    top: 0;    width: 100%;     height: 100%;     overflow: auto; /* 如果需要允许滚动 */    background-color: rgb(0,0,0);     background-color: rgba(0,0,0,0.4);     padding-top: 60px;}/* 模态框内容样式*/.modal-content {    background-color: #fefefe;    margin: 5px auto;     border: 1px solid #888;    width: 80%; /* 可大可小，取决于屏幕尺寸 */}/* 关闭按钮 */.close {    /* 置于模态框外侧右上角 */    position: absolute;    right: 25px;    top: 0;     color: #000;    font-size: 35px;    font-weight: bold;}/* 鼠标滑过样式 */.close:hover,.close:focus {    color: red;    cursor: pointer;}/* 添加缩放动画 */.animate {    -webkit-animation: animatezoom 0.6s;    animation: animatezoom 0.6s}@-webkit-keyframes animatezoom {    from {-webkit-transform: scale(0)}     to {-webkit-transform: scale(1)}}@keyframes animatezoom {    from {transform: scale(0)}     to {transform: scale(1)}}

可使用下面的JavaScript代码实现点击区域外任意一点关闭页面。（close_modal.js）

// 获取模态框var modal = document.getElementById('id01');// 当用户点击该模态框外任意区域，关闭此模块window.onclick = function(event) {    if (event.target == modal) {        modal.style.display = "none";    }}

效果如下：

弹出式登陆页面

1 0