如何使用 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>
廣告