Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Form Bằng CSS HTML

Tạo Form Bằng CSS HTML


Ngày 15 Tháng 2 Năm 2020

Tạo Form Bằng CSS HTML

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu cách xây dựng một form đăng nhập giúp các bạn có thể ôn lại và thực hành một số kiến thức HTML, CSS mà mình đã học. Để hiểu rõ hơn các bạn cùng mình tìm hiểu nhé!

Form Đăng Nhập

Đi vào bước thứ nhất các bạn tạo một thư mục có cấu trúc file như sau nhé:

Cấu trúc Thư Mục Form Đăng Nhập HTML CSS

Sau khi đã tạo xong cấu trúc thư mục thì bước tiếp theo là các bạn tải một tập tin mà mình đã chứa sẵn các file đã được nén để ở đường dẫn bên dưới giúp các bạn không cần phải mất thời gian để tạo các file HTML, CSS và hình ảnh.
Tải File Form_dang_nhap

Bây giờ mình sẽ tạo cấu trúc file HTML, thêm các thẻ HTML cần thiết cho trang_chinh.html sau đó liên kết nó với file style.css và Goole font để dễ hiệu chỉnh. Các bạn lưu ý là đường dẫn style.css lúc nào cũng nằm dưới cùng trong thẻ <head> của một trang HTML bởi vì khi ta chỉnh sửa CSS thì nó sẽ không bị ảnh hưởng bởi các file CSS khác. Để nắm rõ hơn các bạn theo dõ đoạn code dưới đây nhé:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thiết Kế Form Bằng CSS</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
 </body>
</html>

Sau khi đã liên kết các file xong thì việc tiếp theo là chúng ta sẽ thêm các thẻ HTML cần thiết cơ bản cần có trong form đăng nhập như ô tên đăng nhập, ô mật khẩu và một nút đăng nhập dùng để gửi form . Và để hiểu rõ hơn các bạn xem đoạn code dưới đây nhé :

<div class="form_dang_nhap">
    <h2>Đăng Nhập</h2>
    <form>
        <div class="o_nhap">
            <input type="text" name="" required="">
            <label>Tên Đăng Nhập</label>
        </div>
        <div class="o_nhap">
            <input type="password" name="" required="">
            <label>Mật Khẩu</label>
        </div>
        <input type="submit" name="" value="Đăng Nhập">
    </form>
</div>

Chúng ta cùng xem kết quả trang HTMl nhé:

Fom Đăng Nhập

Nhìn chưa được đẹp lắm bây giờ chúng ta sẽ chỉnh file style.css thiết lập hình ảnh nền và thiết lập font chữ cho trang HTML. Sau đó đưa trang đăng nhập ra giữa màn hình để tạo điểm nhấp giúp người dùng có thể dễ thấy hơn và chỉnh các thuộc tính cơ bản cho nó như là độ rộng, màu nền... Các bạn xem đoạn code dưới đây để rõ hơn nhé:

body{
    margin:0;
    padding:0;
    min-height: 100vw;
    font-family: 'Roboto', sans-serif;
    font-family: sans-serif;
    background: url('hinh_anh.jpg');
    background-size: cover;
}
.form_dang_nhap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:40%;
    padding:6rem;
    background: rgba(0,0,0,.8);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.5);
    border-radius: 10px;
}

Cùng mình xem kết quả của đoạn code trên nhé:

Form Đăng Nhập Demo 1

Bây giờ thì chúng ta cần chỉnh lại CSS cho thẻ h2 và ô iput. Mình lưu ý một tý là outline:none; sẽ loại bỏ đường viền màu xanh dương khi chúng ta nhấp vào ô input và chỉ thiết lập border-bottom cho nó. Nào cùng mình theo dõi đoạn code sau đây để giúp các bạn dễ hình dung hơn nhé:

.form_dang_nhap h2 {
    margin:0 0 4rem;
    padding:0;
    color: #fff;
}
.form_dang_nhap .o_nhap{
    position: relative;
}
.form_dang_nhap .o_nhap input{
    position: relative;
    width: 100%;
    font-size: 1.2rem;
    padding: 0.8rem 0;
    color:#fff;
    margin-bottom:2rem;
    border:none;
    border-bottom:1px solid #fff;
    outline: none;
    background: transparent;
}

Cùng mình xem kết quả của đoạn code trên nhé:

Form Đăng Nhập Demo 2

Cũng khá ổn rồi nhỉ giờ mình sẽ chỉnh CSS cho thẻ <label> như cỡ chữ, màu sắc... Ở đây có lưu ý nhỏ là thuộc tính pointer-events sẽ hạn chế một số thao tác của con trỏ chuột với đối tượng HTML được thiết lập thuộc tính này. Các bạn có thể tham khảo thêm ở đây Tham Khảo. Để nắm rõ hơn hãy cùng mình xem đoạn code dưới đây nhé:

.form_dang_nhap .o_nhap label {
    position: absolute;
    top:0;
    left:0;
    font-size: 1.2rem;
    padding: 0.8rem 0;
    color:#fff;
    pointer-events: none;
    transition: .5s;
}

Bây giờ thử xem kết quả của đoạn code trên nhé:

Các bạn thấy là khi ta đăng nhập thì nội dung của thẻ <label> đã che mất nội dung khi ta đánh vào ô input. Thật ra mình cố ý để vị trí như vậy để đoạn code CSS tiếp theo sẽ tạo hiệu ứng khi người dùng nhấp vào ô input thì chữ trong thẻ <label> sẽ chạy lên phía trên. Đồng thời cũng chỉnh sửa lại một số thuộc tính cơ bản cho thẻ input[type="submit"]. Để nắm rõ hơn các bạn xem đoạn code sau nhé:

.form_dang_nhap .o_nhap input:focus ~ label,
.form_dang_nhap .o_nhap input:valid ~ label {
    top:-1.5rem;
    left:0;
    color:#03a9f4;
    font-size:0.8rem;
}
.form_dang_nhap input[type="submit"] {
    background: transparent;
    border:none;
    outline: none;
    color:#fff;
    background: #03a9f4;
    padding: 1rem 1.5rem;
    font-size: 0.8rem;
    cursor: pointer;
}

Bây giờ chúng ta cùng xem kết quả cuối cùng nhé:

Mình gửi các bạn đường dẫn để tải về những file trong thư mục Form_dang_nhap để bạn đễ hình dung và có thể xem lại!
Đường dẫn tải File Source Code

Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
Đường dẫn để bạn tìm hiểu thêm

Tổng kết:

Qua đây mình giúp các bạn có thể ôn lại và sử dụng những kiến thức mà mình đã học và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!