如何使用 CSS 创建响应式登录表单?


在一个网页上,登录表单包含用户名和密码字段。此外,还为用户创建了一个登录按钮,用户可以点击该按钮进行登录。还放置了一个忘记密码链接,供忘记帐户密码的用户使用。“记住我”复选框也已设置,因此用户可以选择它并允许浏览器记住密码,以避免反复输入密码。让我们使用 CSS 创建一个响应式登录表单。

设置表单头像图像

我们在开头使用<img>放置了一个头像图片:

<div class="profilePic">
   <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png"  alt="Avatar" class="avatar" />
</div>

设置头像图像的高度和宽度。将其放置在中心:

.profilePic {
   text-align: center;
   margin: 24px 0 12px 0;
}
img.avatar {
   width: 200px;
   height: 200px;
   border-radius: 50%;
}

创建表单

我们在这里创建了一个表单,其中包含用户名和密码输入字段。占位符使用 placeholder 属性设置。还使用<button>元素创建了一个提交按钮:

<div class="formFields">
   <label for="uname"><b>Username</b></label>
   <input type="text" placeholder="Enter Username" name="uname" required />
   <label for="pass"><b>Password</b></label>
   <input
      type="password"
      placeholder="Enter Password"
      name="pass"
      required
   />
   <button type="submit">Login</button>
   <label> <input type="checkbox" checked="checked" name="remember" /> Remember me</label>
</div>

输入类型文本和密码字段的样式如下所示。为了定位和显示,我们设置了display属性的inline-block值:

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;
   font-size: 30px;
}

设置“记住我”复选框

使用 input type checkbox 创建“记住我”复选框:

<label>
   <input type="checkbox" checked="checked" name="remember" /> Remember me
</label>

设置忘记密码链接

还为忘记密码并希望恢复密码的用户创建了一个忘记密码链接:

<span class="pass">Forgot <a href="#">password?</a></span>

将忘记密码链接浮动到右侧:

span.pass {
   float: right;
   padding-top: 16px;
}

设置响应式

使用媒体查询来设置响应式。当屏幕尺寸小于 300 像素时,span 的 display 属性设置为 block 值:

@media screen and (max-width: 300px) {
   span.pass {
      display: block;
      float: none;
   }
   .cancelbtn {
      width: 100%;
   }
}

示例

以下是使用 CSS 创建响应式登录表单的代码:

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, Helvetica, sans-serif;
         background-color: rgb(189, 189, 255);
      }
      form {
         border: 3px solid #f1f1f1;
         background-color: rgb(228, 228, 228);
         margin: 20px;
      }
      h1 {
         text-align: center;
      }
      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;
         font-size: 30px;
      }
      label {
         font-size: 30px;
      }
      button {
         font-weight: bold;
         font-family: monospace, sans-serif, serif;
         font-size: 25px;
         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;
      }
      .profilePic {
         text-align: center;
         margin: 24px 0 12px 0;
      }
      img.avatar {
         width: 200px;
         height: 200px;
         border-radius: 50%;
      }
      .formFields {
         padding: 16px;
      }
      span.pass {
         float: right;
         padding-top: 16px;
      }
      /* Change styles for span and cancel button on extra small screens */
      @media screen and (max-width: 300px) {
         span.pass {
            display: block;
            float: none;
         }
         .cancelbtn {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <h1>Responsive Login Form Example</h1>
   <form>
      <div class="profilePic">
         <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="Avatar" class="avatar" />
      </div>
      <div class="formFields">
         <label for="uname"><b>Username</b></label>
         <input type="text" placeholder="Enter Username" name="uname" required />
         <label for="pass"><b>Password</b></label>
         <input
            type="password"
            placeholder="Enter Password"
            name="pass"
            required
         />
         <button type="submit">Login</button>
         <label>
            <input type="checkbox" checked="checked" name="remember" /> Remember me
         </label>
      </div>
      <div class="formFields" style="background-color:#f1f1f1">
         <button type="button" class="cancelbtn">Cancel</button>
         <span class="pass">Forgot <a href="#">password?</a></span>
      </div>
   </form>
</body>
</html>

更新于:2023年12月14日

2K+ 次查看

开启你的职业生涯

通过完成课程获得认证

开始学习
广告