Thiết kế biểu mẫu đăng nhập Google bằng HTML và CSS

    Rating: ★★★★☆
    View: 237
    Download: 108

    1. TỰ THIẾT KẾ FORM ĐĂNG NHẬP ĐƠN GIẢN VÀ DỄ HIỂU

    Hãy bắt đầu bằng cách tạo 2 tệp:

    • index.html - cho đánh dấu của chúng tôi
    • style.css - để tạo kiểu

    Đây là tệp HTML của chúng ta sẽ như thế nào:

    Trong đánh dấu này, sẽ tạo cấu trúc của Mẫu . Đầu tiên, cho phép xác định các trường đầu vào kèm theo trong thẻ mẫu của html.

    Hãy! đi qua mã.

    <form> 
    <div class="inputBox"> <input type="email" name="email" value=""> <label>Username</label> </div> <div class="inputBox"> <input type="text" name="text" value=""> <label>Password</label> </div> <input type="submit" name="sign-in" value="Sign In"> 
    </form>

    Chúng tôi đã sử dụng hàm onkeyup () của html 5 để giữ nhãn của trường đầu vào ở trên cùng khi sẽ có một số giá trị trên trường đầu vào nếu không nhãn sẽ hoạt hình ở vị trí ban đầu của nó

    
             onkeyup="this.setAttribute('value', this.value);"
        

    Đã đến lúc tạo kiểu CSS nên nó sẽ trông giống như mẫu đăng nhập googl

    body { margin: 0; padding: 0; background-size: cover; font-family: sans-serif; }
    .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25rem; padding: 2.5rem; box-sizing: border-box; border: 1px solid #dadce0; -webkit-border-radius: 8px; border-radius: 8px; }
    .box h2 { margin: 0px 0 -0.125rem; padding: 0; color: #fff; text-align: center; color: #202124; font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif; font-size: 24px; font-weight: 400; } .box p { font-size: 16px; font-weight: 400; letter-spacing: .1px; line-height: 1.5; margin-bottom: 25px; text-align: center; }
    .box .inputBox { position: relative; }
    .box .inputBox input { width: 93%; padding: 0.625rem 10px; font-size: 1rem; letter-spacing: 0.062rem; margin-bottom: 1.875rem; border: 1px solid #ccc; background: transparent; border-radius: 4px; } 
    .box .inputBox label { position: absolute; top: 0;                 left: 10px; padding: 0.625rem 0; font-size: 1rem; color: grey; pointer-events: none; transition: 0.5s; }
    .box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label, .box .inputBox input:not([value=""]) ~ label { top: -1.125rem; left: 10px; color: #1a73e8; font-size: 0.75rem; background-color: white; height: 10px; padding-left: 5px; padding-right: 5px; } .box .inputBox input:focus { outline: none; border: 2px solid #1a73e8; } .box input[type="submit"] { border: none; outline: none; color: #fff; background-color: #1a73e8; padding: 0.625rem 1.25rem; cursor: pointer; border-radius: 0.312rem; font-size: 1rem; float: right; }
    .box input[type="submit"]:hover { background-color: #287ae6; box-shadow: 0 1px 1px 0 rgba(66,133,244,0.45), 0 1px 3px 1px rgba(66,133,244,0.3); }

    Để kiểm soát hoạt ảnh của nhãn, chúng tôi đã sử dụng css thuần không có javascript bên dưới mã, bạn sẽ thấy cách chúng tôi quản lý để làm điều đó

    
            .box .inputBox input:focus ~ label,
            .box .inputBox input:valid ~ label,
            .box .inputBox input:not([value=""]) ~ label {
                top: -1.125rem;
                left: 10px;
                color: #1a73e8;
                font-size: 0.75rem;
                background-color: white;
                height: 10px;
                padding-left: 5px;
                padding-right: 5px;
            }
            .box .inputBox input:focus {
                outline: none;
                border: 2px solid #1a73e8;
            }
        

    Hãy nhìn vào kết quả. hoặc tải xuống mã nguồn của Mẫu đăng nhập Google . Theo dõi Bản tin Gợi ý Html và nhận cập nhật hàng ngày cho những thứ hay ho miễn phí.

    2. THIẾT KẾ FORM ĐĂNG NHẬP SỬ DỤNG BOOTTRAP 4

    Login form simple

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container" style="width:50%;margin: 10% auto">
      <h2 align="center">LOGIN</h2>
      <form action="">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
        </div>
        <div class="form-group form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" name="remember"> Ghi nhớ mật khẩu
          </label>
        </div>
        <button type="submit"name="btn" class="btn btn-primary">Đăng nhập</button>
      </form>
    </div>
    
    </body>
    </html>
    

     

    loading Đang tải...

    template được ưa chuộng