Chuyển tới nội dung
Trang chủ » Hướng dẫn code form đăng nhập bằng html css đẹp chi tiết

Hướng dẫn code form đăng nhập bằng html css đẹp chi tiết

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

READ  Tách nền ảnh trực tuyến chỉ vài giây không cần photoshop

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

READ  Cách thiết kế web giao diện Responsive chi tiết

 <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é 😀

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é

READ  3 cách chia sẻ video youtube lên facebook đơn giản

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:

 

Rate this post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *