如何使用 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+ 次檢視

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告