Form đăng nhập là nơi để admin, khách hàng hay các thành viên để truy cập vào web. Vậy làm thế nào để design form đăng nhập bằng html css? Bài viết hôm nay mình sẽ hướng dẫn code form đăng nhập bằng html css.
Trong FRONT END yếu tố thẩm mỹ là hàng đầu, và người lập trình giao diện web phải biết bố trí màu sắc, hay sắp xếp những mảnh ghép đó khiến chúng trở nên đẹp và hợp lí
Lý do để chúng ta cần một form đăng nhập đẹp
Website chuyên nghiệp hơn
Gây ấn tượng và thu hút khách hàng
Tối ưu được cho người quản trị cũng như thành viên
Những kiến thức cần thiết
HTML cơ bản
CSS cơ bản
Đây là 2 kiến thức tối thiểu để chúng ta có thể làm được nếu các bạn chưa có nền tảng 2 ngôn ngữ lập trình trên hãy w3school VÀO ĐÂY để học hoặc vào danh mục html css của web mình tìm hiểu.
Bây mình sẽ hướng dẫn code form đăng nhập bằng html css đơn giản như sau:
Đầu tiên ta khai báo mã html cho dự án
Ở đây mình tạo và đặt là index.html
<html>
<head>
<title>Code form đăng nhập đẹp bằng html css</title>
<body>
<div class="loginbox">
<img src="avatar.png" class="avatar">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
<a href="#">Lost your password?</a><br>
<a href="#">Don't have an account?</a>
</form>
</div>
</body>
</head>
</html>
Sau đó chúng ta tạo file style.css và nhúng file index.html vào trước cặp thẻ head với cú pháp
<link rel="stylesheet" type="text/css" href="style.css">
Tiếp theo các bạn gõ mã css để định dạng form html cho đẹp theo ảnh dưới đây, vào file style.css nhé :D
Lí do của mình là để các bạn tự gõ từ đầu đến cuối để nhớ lâu và học được nhanh hơn. Nếu bạn nào lười gõ thì hãy kéo xuống dưới cùng của bài viết để download Source Code html css form login full cả ảnh nhé. Tuy nhiên, các bạn hãy đọc lướt qua để hiểu hơn, đây là lời khuyên chân thành củ mình đó, vì mình cũng đã từng như vậy
Như vậy, chúng ta đã code xong form đăng nhập bằng html css rồi đó, các bạn có thể thay class với tên mình thích, nhưng nhớ code css đúng class đó nhé
Và đây là full bộ code có cả ảnh của các bạn đây mình để ở Driver yên tập k có quảng cáo gì hết.
Tiếc gì một share để có kiến thức cho bản thân cũng như bạn bè phải không :D, đồng thời cũng giúp mình có động lực ra các series hướng dẫn lập trình khác như lập trình theme wordpress, web bán hàng php. Ngoài html, css này
Link tải của các bạn đây:
Điểm 4.6/5 dựa vào 87 đánh giá