Video này tôi hướng dẫn bạn form đăng nhập với hiệu ứng rất đẹp mắt với những tư duy css mới có thể bạn chưa từng biết trước đây trong quá trình học tạo giao diện website. Bạn xem video và thực hành đầy đủ để nâng cao kỹ năng lập trình website của mình.
Form đăng nhập là gì?
Form đăng nhập là nơi người dùng nhập thông tin để đăng nhập vào một hệ thống bất kỳ để thực hiện các hành động ở khu vực dành riêng cho thành viên.
Người lập trình website html css cần biết cách tạo form login theo thiết kế đẹp để từ đó mang lại trải nghiệm người dùng tốt nhất trên dự án website được tạo ra.
Bây giờ chúng ta đến vói hướng dẫn tạo Form đăng nhập như Gmail.
Video tạo form đăng nhập như Gmail
Mã code Html Css tạo form login
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Gmail</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');
*{
box-sizing: border-box;
}
body{
font-family: 'Montserrat', sans-serif;
font-size: 17px;
}
#wrapper{
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
}
form{
border: 1px solid #dadce0;
border-radius: 5px;
padding: 30px;
}
h3{
text-align: center;
font-size: 24px;
font-weight: 500;
}
.form-group{
margin-bottom: 15px;
position: relative;
}
input{
height: 50px;
width: 300px;
outline: none;
border: 1px solid #dadce0;
padding: 10px;
border-radius: 5px;
font-size: inherit;
color: #202124;
transition: all 0.3s ease-in-out;
}
label{
position: absolute;
padding: 0px 5px;
left: 5px;
top: 50%;
/* Quan trọng */
pointer-events: none;
transform: translateY(-50%);
background: #fff;
transition: all 0.3s ease-in-out;
}
.form-group input:focus {
border: 2px solid #1a73e8;
}
.form-group input:focus + label, .form-group input:valid + label{
top: 0px;
font-size: 13px;
font-weight: 500;
color: #1a73e8;
}
input#btn-login{
background: #1a73e8;
color: #fff;
cursor: pointer;
}
input#btn-login:hover{
opacity: 0.85;
}
</style>
<div id="wrapper">
<form action="">
<h3>Đăng nhập</h3>
<div class="form-group">
<input type="text" name="email" required>
<label for="">Email</label>
</div>
<div class="form-group">
<input type="password" name="password" required>
<label for="">Mật khẩu</label>
</div>
<input type="submit" value="Đăng nhập" id="btn-login">
</form>
</div>
</body>
</html>