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

6
6480

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.

avatar
4 Comment threads
2 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Nguyễn Văn HiếuDũngphan vietBui Huy Tuanvo thanh dy Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
vo thanh dy
Guest
vo thanh dy

Đẹp quá anh ơi

Bui Huy Tuan
Guest
Bui Huy Tuan

Hay quá, cảm ơn ad!

phan viet
Guest
phan viet

lam cach nao de? quan ly nguoi dung dang ky ??? huong dan minh voi

Nguyễn Văn Hiếu
Admin
Nguyễn Văn Hiếu

Hi vậy thì bạn cần kết nối với phần back-end và lưu vào CSDL nữa. Trong 1 comment thì không thể nói hết được. Bạn cần học lập trình backend như php, asp.net hay java để làm việc này

Dũng
Guest
Dũng

người đăng ký thì gửi về mail ko ạ hay lưu ở đâu ạ

Nguyễn Văn Hiếu
Admin
Nguyễn Văn Hiếu

Hello em, đây chỉ là bài tập thiết kế giao diện thôi. Nếu mình muốn gửi mail thì cần tích hợp back-end nữa nhé em.