Làm form đăng kí đơn giản bằng html css nhưng khá đẹp

14
20823

Xin chào mọi người, trong bài viết này thì mình sẽ hướng dẫn các bạn làm form đăng kí bằng html và css. Chỉ với vài thuộc tính nhưng chúng ta đã tạo ra một tác phẩm rồi. Mình xin được bắt đầu bài viết.

form đang ky html css

Làm form đăng kí đơn giản bằng html css

Demo:

Các bạn có thể click vào đây để xem kết quả.

Bây giờ mình sẽ code và giải thích chi tiết ngay phía sau,trước tiên thì chúng ta sẽ tạo khung html :

Các bạn có thể đổi cái div có class là form thành thẻ form thôi cũng được.

→Tham khảo ngay Tự học cắt web html css từ file thiết kế chuẩn w3c

Dưới đây là code css:

Kết quả: 

form đăng ký

Mình sẽ giải thích file css

  • Đầu tiên chúng ta sẽ reset css
  • Tiếp đến đặt màu background cho khối body
  • Sử dụng thuộc tính display: grid để chia layout reponsive
  • Tiếp đến chỉnh style cho form, cũng không có gì đặc biệt. Mình sử dụng thuộc tính display:flex chia các phần tử bên trong và đặt posttion:relative để căn chỉnh các thành phần cho hợp lý
  • Tiếp theo là căn chỉnh style cho các thành phần còn lại bằng các thuộc tính thông thường.
  • Cuối cùng là thêm cái hover cho nút submit cho có tí hiệu ứng 😀

Okê vậy là mình đã xử lý xong form đăng kí này chỉ bằng vài thuộc tính, cũng không có gì phức tạp đúng không. Mà trông nó nhìn cũng khá ngon đấy chứ :v. Các bạn có thể đặt lại bình luận dưới đây để yêu cầu mình làm những nội dung khác, mình sẽ làm hoàn toàn bằng html và css không cần sử dụng thêm framework nào khác :D.Mình xin được kết thúc bài viết tại đây.

Mọi người có thể tham khảo các bài viết khác tại đây.

0 0 vote
Đánh giá bài viết
Subscribe
Notify of
guest
14 Bình luận
Inline Feedbacks
View all comments