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

Tri thức / Lập trình / Lập trình web / Html & Css      64 - 0      20 ngày trước
Thực hành tạo form đăng nhập đẹp bằng html và css
0 0

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.

 

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:

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

 

Tạo vào 2019-09-30 14:15:00, Cập nhật 20 ngày trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Thực hành tạo form đăng nhập đẹp bằng html và css tới bạn bè để mọi người cùng đọc nhé !
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Thực hành tạo form đăng nhập đẹp bằng html và css
Gửi đi
Bạn đang đọc bài viết Thực hành tạo form đăng nhập đẹp bằng html và css , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
37103
0.055876016616821