Rất hoan nghênh bạn đã viết mã với blog hôm nay của ngẫu nhiên, trong đó chúng ta sẽ tạo một thiết kế Biểu mẫu đăng nhập PopUp bằng HTML và CSS. Chúng tôi sẽ tạo một biểu mẫu đăng nhập đáp ứng cho một trang web. Hiện tại, chúng tôi chỉ coi email và mật khẩu là thông tin đầu vào để đăng nhập Show
Trang đăng nhập là một trong những trang quan trọng nhất trên trang web hoặc ứng dụng vì nó cho phép người dùng được ủy quyền truy cập vào toàn bộ trang web hoặc một tập hợp con của trang web. Trang đăng nhập hoặc đăng ký là trang đầu tiên mà người dùng xem trên các trang web được bảo vệ bằng thông tin đăng nhập. Trang đăng ký hoặc đăng nhập phải hấp dẫn trực quan, thân thiện với người dùng và dễ sử dụng Vì thế. Hãy bắt đầu với mã nhưng trước khi tiếp tục với mã, hãy kiểm tra
Hơn 50 dự án HTML, CSS & JavaScript với mã nguồn
Máy chủ trực tiếp của thiết kế biểu mẫu đăng nhập. -
QUẢNG CÁO Thiết kế biểu mẫu đăng nhập MÃ HTML. -QUẢNG CÁO Trong HTML, chúng tôi thiết kế bố cục cơ bản của trang web. Tôi hy vọng bạn quan tâm đến những kiến thức cơ bản về HTML như thẻ div, thẻ đầu vào và biểu mẫu HTML Trong Trang đăng nhập này, chúng tôi đang thêm hai thẻ đầu vào, một cho email và thẻ thứ hai cho mật khẩu. chúng tôi đang thêm một thẻ đầu vào của thuộc tính hộp kiểm để khi hộp kiểm được nhấn thì chúng tôi sẽ mở cửa sổ bật lên QUẢNG CÁO Đầu tiên, chúng tôi muốn thêm script-src, sau đó trong phần nội dung, chúng tôi muốn thêm một hộp kiểm và id được hiển thị lớp được hiển thị btn cho biểu mẫu xem nhãn Đối với biểu tượng/dấu chéo, chúng tôi đang sử dụng liên kết CDN (Mạng phân phối nội dung) của Fontawesome để tích hợp nó
sau đó bên trong thẻ biểu mẫu, chúng tôi chèn hai thẻ đầu vào và thẻ nhãn tương ứng của chúng sau đó đối với biểu mẫu đăng nhập, lớp div là dữ liệu và nhãn là email hoặc điện thoại
Sau đó, một lớp div khác là dữ liệu và nhãn là mật khẩu Lớp div cuối cùng là mật khẩu đã quên mà neo các thẻ và Đăng ký ngay <!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Popup Login Form Design | CodingNepal</title> -->
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="center">
<input type="checkbox" id="show" />
<label for="show" class="show-btn">View Form</label>
<div class="container">
<label
for="show"
class="close-btn fas fa-times"
title="close"
></label>
<div class="text">Login Form</div>
<form action="#">
<div class="data">
<label>Email or Phone</label>
<input type="text" required />
</div>
<div class="data">
<label>Password</label>
<input type="password" required />
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a>
</div>
<div class="btn">
<div class="inner"></div>
<button type="submit">login</button>
</div>
<div class="signup-link">
Not a member? <a href="#">Signup now</a>
</div>
</form>
</div>
</div>
</body>
</html>
QUẢNG CÁO Thiết kế biểu mẫu đăng nhập đầu ra Html. - 
MÃ CSS Thiết kế biểu mẫu đăng nhập. -Bây giờ bố cục của trang đăng nhập đã sẵn sàng nhưng vẫn chưa hoàn hảo và chưa hoàn toàn sẵn sàng vì chúng tôi cần triển khai nó theo cách như vậy theo mặc định, biểu mẫu đăng nhập sẽ biến mất và khi chúng tôi nhấp vào hộp kiểm, nó sẽ hiển thị cho chúng tôi Hơn 100 Dự án Front-end dành cho nhà phát triển Web (Mã nguồn) QUẢNG CÁO Đối với điều đó, theo mặc định, chúng tôi sẽ áp dụng thuộc tính hiển thị của lớp vùng chứa thành không để nó biến mất và khi hộp kiểm được chọn, sau đó đặt thuộc tính hiển thị của lớp vùng chứa thành khối Hy vọng bạn đã trải qua các khái niệm cơ bản về tạo kiểu với CSS như bộ chọn css, hộp viền, hộp flex và bộ chọn giả Ở đây chúng tôi muốn thiết kế mã html để làm cho trang web đẹp và phản hồi nhanh, bạn có thể thấy đầu ra của css @import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
width: 100%;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn {
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.show-btn,
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"] {
display: none;
}
.container {
display: none;
background: #fff;
width: 410px;
padding: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .container {
display: block;
}
.container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.container .close-btn:hover {
color: #3498db;
}
.container .text {
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container form {
margin-top: -20px;
}
.container form .data {
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label {
font-size: 18px;
}
form .data input {
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus {
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass {
margin-top: -8px;
}
form .forgot-pass a {
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover {
text-decoration: underline;
}
form .btn {
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
}
form .btn .inner {
height: 100%;
width: 300%;
position: absolute;
left: -100%;
z-index: -1;
background: -webkit-linear-gradient(
right,
#56d8e4,
#9f01ea,
#56d8e4,
#9f01ea
);
transition: all 0.4s;
}
form .btn:hover .inner {
left: 0;
}
form .btn button {
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
form .signup-link {
text-align: center;
}
form .signup-link a {
color: #3498db;
text-decoration: none;
}
form .signup-link a:hover {
text-decoration: underline;
}Bước 1. Trước tiên, chúng tôi sẽ sử dụng liên kết nhập để nhập một số phông chữ mới từ Google Fonts, sau đó sử dụng thuộc tính họ phông chữ để sửa đổi phông chữ từ phông chữ mặc định QUẢNG CÁO Trang web thương mại điện tử sử dụng HTML, CSS và JavaScript (Mã nguồn) QUẢNG CÁO
Bây giờ, chúng tôi sẽ sử dụng thuộc tính bộ chọn chung để đặt kích thước hộp thành “hộp viền”, lề và phần đệm thành “không” và họ phông chữ thành “Poppins” làm phông chữ nội dung mới của chúng tôi Chúng tôi sẽ thêm phông nền chuyển màu tuyến tính cho cơ thể của mình và chúng tôi sẽ thực hiện điều đó bằng cách đặt thuộc tính nền thành sự kết hợp của màu xanh nhạt và màu tím đậm @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
width: 100%;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}Bước 2. Bây giờ, chúng ta sẽ đặt nền thành “trắng” và chúng ta cũng đã thêm phần đệm 20 px, sử dụng bộ chọn lớp (. show-btn). Nút này cũng có một bóng hộp được thêm vào nó Để chọn thứ gì đó, chúng tôi sẽ sử dụng bộ chọn thẻ. Tiếp theo, chúng ta sẽ thay đổi hiển thị thành “chặn”, vị trí thành “tuyệt đối” và thuộc tính bên phải thành 20 px Làm cách nào để tạo trang đăng nhập trong mã nguồn HTML?Làm cách nào để tạo trang đăng nhập trong HTML bằng notepad?Làm cách nào để tạo biểu mẫu đăng nhập bằng html? . Mở Notepad hoặc Adobe Dreamweaver hoặc bất kỳ trình soạn thảo Html nào khác. Tôi đang sử dụng Dreamweaver. . Sao chép mã HTML hoàn chỉnh bên dưới và dán vào trình chỉnh sửa của bạn. <. . Now apply the CSS to all Elements for better presentation. First create CSS |
