Thực hành tạo form đăng nhập đẹp bằng html và css | Html & Css

Posted on by mtoplistChuyên mục:Top List

Sau đây, chúng ta sẽ đến với bài thực hành html và css đầu tiên. Trong bài học này, chúng ta sẽ học cách tạo form đăng nhập đẹp bằng html và css. Kiến thức trong bài học sẽ được trình bày theo từng bước, có code mẫu cuối bài viết để các bạn tải về xem thử trực tiếp.

 

Bài viết liên quan:

 

Kết quả form đăng nhập bằng html và css

Chúng ta sẽ từng bước viết mã html và css để có được form đăng nhập như hình bên dưới:

 

 

Thực hiện viết mã html cho form đăng nhập

Tạo file login.html với nội dung như sau:

<!DOCTYPE html>
<html>
    <head>
        <title>Đăng nhập vào website</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/login.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <header>
            <div class="container">
                Đầu trang
            </div>
        </header>
        <main>
            <div class="container">
            <div class="login-form">
                <form action="" method="post">
                    <h1>Đăng nhập vào website</h1>
                    <div class="input-box">
                        <i ></i>
                        <input type="text" placeholder="Nhập username">
                    </div>
                    <div class="input-box">
                        <i ></i>
                        <input type="password" placeholder="Nhập mật khẩu">
                    </div>
                    <div class="btn-box">
                        <button type="submit">
                            Đăng nhập
                        </button>
                    </div>
                </form>
            </div>
            </div>
        </main>
        <footer>
            <div class="container">
            Chân trang
            </div>
        </footer>
    </body>
</html>

 

Lưu file login.html, và mở chạy trên trình duyệt, chúng ta sẽ được kết quả như sau:

Công bằng mà nói, thì xấu một cách hoàn hảo, và tất nhiên không giống mẫu ở đầu bài viết chút nào. Nguyên nhân là chúng ta chưa thực hiện làm đẹp đoạn mã html trên bằng css. 

 

Định dạng form đăng nhập bằng css

Chúng ta sẽ tạo file login.css trong thư mục css, thư mục css chúng ta đặt cạnh file login.html

Sau đó, liên kết file css trên vào file login.html. Đoạn mã html trong file login.html trên đã bao gồm việc chèn file này, chúng ta có thể thấy tại dòng thứ 7 với nội dung:

<link href="css/login.css" rel="stylesheet" type="text/css"/>

 

Tiếp đến, chúng ta viết mã cho file login.css như sau:

*{
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
    box-sizing: border-box;
}
header{
    background-color: #cccccc;
    min-height: 70px;
    padding: 15px;
}
main{
    background-color: #dddddd;
    min-height: 300px;
    padding: 7.5px 15px;
}
footer{
    background-color: #cccccc;
    min-height: 70px;
    padding: 15px;
}
.container{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.login-form{
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 15px;
    border: 2px dotted #cccccc;
    border-radius: 10px;
}
h1{
    color: #009999;
    font-size: 20px;
    margin-bottom: 30px;
}
.input-box{
    margin-bottom: 10px;
}
.input-box input{
    padding: 7.5px 15px;
    width: 100%;
    border: 1px solid #cccccc;
    outline: none;
}
.btn-box{
    text-align: right;
    margin-top: 30px;
}
.btn-box button{
    padding: 7.5px 15px;
    border-radius: 2px;
    background-color: #009999;
    color: #ffffff;
    border: none;
    outline: none;
}

 

Vậy là hoàn tất, chạy lại file login.html trên trình duyệt và kết quả sẽ giống như sau:

 

Giờ thì đã giống mẫu rồi nhé.

 

Các bạn có thể tải về code tại link google drive sau:

Code form đăng nhập bằng html và css

 

mtoplist