Cách Làm Form Đăng Ký Đẹp Mắt, Cách Tạo Form Đăng Ký Bằng Php Và Mysql
Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu các form đăng ký, đăng nhập bằng cách kết hợp HTML, CSS, Javascript và Bootstrap . Nào hãy cũng mình tìm hiểu nhé!
Form giúp chúng ta tạo sự tương tác giữa người dùng với trang web. Nó cho phép người dùng nhập và gửi dữ liệu đến web server (theo mình hiểu thì đây là nơi mà nó lưu trữ trang web và xử lý thông tin). Bài hôm nay mình sẽ đi vào gới thiệu về hai loại form là đăng nhập và đăng ký. Đa số khi bạn sử dụng các dịch vụ mua bán hàng online, sử dụng Facebook, sử dụng Gmail… Thì chúng ta đều cần có một tài khoản riêng để sử dụng dịch vụ đó.Bạn đang xem: Form đăng ký html css
Để hiểu rõ hơn bạn xem ví dụ về trang đăng ký của Google dưới đây nha:
Mình có lưu ý nhỏ là khi thiết kế một form đăng ký chúng ta chỉ nên thu thập những thông tin chính và những thông tin khác có thể để khách hàng bổ sung sau. Ngày nay cũng không người dùng nào muốn nhập tất cả bằng tay do vậy bạn cũng nên sử dụng những chức năng chọn(select) hay tự động điền đối với những thông tin mặc định như lựa chọn thành phố…
Đang xem: Cách làm form đăng ký đẹp
Minh cũng có một bài viết về snippet form chủ yếu được xây dựng bằng Bootstrap 4 bạn có thể tham khảo ở đây nhé: Form. Bây giờ mình sẽ giới thiệu tiếp một số component Form được thiết kế sẵn bằng HTML, CSS, Bootstrap và Javascript giúp bạn có thể đa dạng lựa chọn phù hợp với bố cục cũng như thiết kế của trang web.
Double slider Sign in/up Form:
Form này được thiết kế theo kiểu tối ưu diện tích trang web bằng việc bạn có thể chuyển đổi từ đăng ký sang đăng nhập và ngược lại một cách dễ dàng. Ở đây nó còn tích hợp chức năng đăng nhập hay đăng ký bằng tài khoản mạng xã hội giúp tiết kiệm thời gian của khách hàng và theo mình thấy màu nền và màu chữ rất là hài hòa giúp làm nổi bật thông điệp của form. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi form này được hiển thị trên web ở dưới đây nhé:
See the Pen Weekly Coding Challenge #1 – Double slider Sign in/up Form – Desktop Only by Florin Pop (FlorinPop17) on CodePen.
Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Double slider Sign in/up Form.
Login/Registration Form Transition:
Form này cũng được thiết kế giống như trên nhưng thay vì dùng màu nền thì ở đây chúng ta sử dụng hình ảnh cho các trang đăng nhập, đăng ký. Ngoài ra nó cũng thiết kế các ô nhập theo hướng hiển đại bằng cách bỏ những đường viền xung quanh và hiệu ứng chuyển động chữ khi chúng ta chuyển đổi sang phần đăng nhập hoặc đăng ký. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi form này được hiển thị trên web ở dưới đây nhé:
See the Pen Login/Registration Form Transition by Nikolay Talanov (suez) on CodePen.
Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Login/Registration Form Transition.
Input Form With Progress Bar:
Form này khá là hay vì nó sử dụng thanh tiến trình để thu thập thông tin người dùng giúp họ không cảm thấy nhàm chán khi phải nhập thông tin trên form. Nó cũng kích thích sự tò mò của khách hàng, giúp chúng ta giảm diện tích cho trang tối ưu hết mức có thể và làm cho trang web có tính tương tác cao, chuyên nghiệp hơn. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi form này được hiển thị trên web ở dưới đây nhé:
See the Pen Input form with progress bar by Carlin Scuderi (carlinscuderi) on CodePen.
Material Bootstrap Wizard:
Form này được chăm chút về mặt thiết kế theo phong cách Material với cách sử dụng cũng như Form Progress bar nhưng được chú trọng về việc thẩm mỹ cũng như bố cục trong form hơn. Ngoài việc nhấn Next để chuyển sang form tiếp theo thì bạn cũng có thể nhấn trên thanh tiêu đề để tới form mình mong muốn. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi form này được hiển thị trên web ở dưới đây nhé:
See the Pen Material Bootstrap Wizard by Creative Tim (creativetim) on CodePen.
Xem thêm: Mua Sữa Rửa Mặt 365 Hàn Quốc, Sữa Rửa Mặt Herb Day 365 Cleansing Foam
Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Material Bootstrap Wizard.
Concept Material Login Form:
Form này được thiết kế theo phong cách đơn giản với sự phối hợp màu hài hòa giữa màu nền và màu chữ trong Form. Ngoài ra nó còn có hiệu ứng khi nhấn vào ô nhập thông tin thì sẽ thay đổi màu nền của ô nhập cùng với icon để cung cấp thêm thông tin cho người dùng. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi form này được hiển thị trên web ở dưới đây nhé:
See the Pen Concept Material Login Form by İbrahim ÖZTÜRK (ibrahimozturkme) on CodePen.
Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Concept Material Login Form.
Animated Login and Sign up:
Form này được thiết kế theo slider dùng để chuyển form từ đăng nhập sang đăng ký và ngược lại. Ở đây có điểm đặc bạn cần lưu ý là sử dụng hiệu ứng mờ ảnh để làm nổi bật cho form cũng như giúp trang web trông hiện đại hơn. Bạn có thể áp dụng component này cho nhiều thiết kế và bố cục trang web khác nhau vì cấu trúc code nó không phức tạp chỉ bao gồm HTML, CSS và Javascript. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi form này được hiển thị trên web ở dưới đây nhé:
See the Pen Animated Login and Sign up by Hurick Krügner (hurick) on CodePen.
Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Animated Login and Sign up.
Login & Signup Form:
Form này được thiết kế theo button giống như component Modal trong Bootstrap chỉ khi bạn nhấn vào thì nó mới hiện các form đăng ký và đăng nhập. Nếu trang web chúng ta cần đơn giản, tiết kiệm diện tích vàhạn chế điều hướng thì bạn nên chọn giải pháp này. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi form này được hiển thị trên web ở dưới đây nhé:
See the Pen Login & Signup Form by Emil (emilcarlsson) on CodePen.
Xem thêm: Kem Dưỡng Cải Thiện Thâm Sạm Rohto Oxy Clear Dark Spot, Mới! Oxy Clear Dark Spot! Sáng Thâm
Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Và nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha. Còn đây là nguồn mình sao chép: Login & Signup Form.
Login Form 2 by Colorlib:
Do các phần sau này đã có bản tải về nên mình sẽ không dùng Codepen để hiện thị nữa nhé. Form này ấn tượng bởi sự đơn giản và hình thức đăng nhập ngắn gọn. Nó thể hiện một phong cách tối giản trong việc sử dụng các thành phần và màu sắc trong form, lấy logo của công ty hay dịch vụ của bạn làm chủ đạo. Nếu bạn muốn biết thêm thông tin hay tải form này về thì xem bên dưới nhé:
Tải Về Demo FormLogin Form 4 by Colorlib:
Do các phần sau này đã có bản tải về nên mình sẽ không dùng Codepen để hiện thị nữa nhé. Form này được thiết kế theo xu hướng hiện đại, đơn giản bằng cách kết hợp ảnh nền với form trong trang web và bạn cũng có thể thêm logo công ty ở trung tâm để người dùng nhớ tới thương hiệu của mình hơn . Ngoài ra nó cũng có các hình thức đăng nhập bằng mạng xã hội với icon hình tròn tạo nên sự mềm mại và hiệu ứng chuyển màu khi người dùng hover vào button login.Nếu bạn muốn biết thêm thông tin hay tải form này về thì xem bên dưới nhé:
Tải Về Demo FormLogin Form 13 by Colorlib:
Do các phần sau này đã có bản tải về nên mình sẽ không dùng Codepen để hiện thị nữa nhé. Form này được nổi bật nhờ hình ảnh nằm phái bên trái. Nó tạo cảm giác cho khách hàng về công ty của chúng ta thân thiện, chuyên nghiệp và hiện đại. Đôi khi hình ảnh có thể nói lên rất nhiều điều mà khi dùng từ ngữ chúng ta khó có thể diễn đạt được. Do đó bạn nên chăm chút thật cẩn thận về những hình ảnh mà mình đăng trên web nha.Nếu bạn muốn biết thêm thông tin hay tải form này về thì xem bên dưới nhé:
Tải Về Demo FormLogin Form 9 by Colorlib:
Form này được thiết kế đơn giản, hài hòa và điểm nổi bật ở đây là hình ảnh sản phẩm được làm ảnh nền kết hợp với form trong trang web. Nó giúp bạn có thể vừa quảng cáo cũng như tạo điểm nhấn thu hút người dùng với việc đặt ví trí của form.Nếu bạn muốn biết thêm thông tin hay tải form này về thì xem bên dưới nhé:
Tải Về Demo FormLogin Form 15 by Colorlib:
Form này được thiết kế theo kiểu component card trong Bootstrap. Việc sử dụng ảnh ở phần trên cùng giúp làm nổi bật tiêu đề của form bằng cách tạo độ tương phản giữa ảnh và màu chữ. Bạn có thể kết hợp đặt thêm slogan mà công ty sử dụng để khách hàng biết thêm thông tin cũng như tin tưởng công ty của chúng ta hơn. Nếu bạn muốn biết thêm thông tin hay tải form này về thì xem bên dưới nhé:
Tải Về Demo Form Tổng kết:
Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện Form đăng ký đăng nhập cho trang web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
Có thể bạn quan tâm
Bài viết hay nhất
Câu 10. Tại sao phải dạy học tích hợp? Chủ trương dạy học tích hợp có gì mới? Những thuận lợi, khó khăn và cách khắc phục khi thực hiện dạy học tích hợp? | Myphamthucuc.vn
Mối quan hệ biện chứng giữa cái chung và cái riêng? Vận dụng ý nghĩa phương pháp luận trong giải quyết mối quan hệ trên để phân tích mối quan hệ giữa chủ nghĩa Mác-Lênin với thực tiễn cách mạng Việt Nam? | Myphamthucuc.vn
Câu 11. Tại sao phải thực hiện dạy học phân hóa? Chủ trương dạy học phân hóa trong CT mới có gì khác CT hiện hành? Những thuận lợi và khó khăn trong việc thực hiện dạy học phân hóa hiện và cách khắc phục? | Myphamthucuc.vn
Tư tưởng Đất Nước của Nhân dân trong Đất nước của Nguyễn Khoa Điềm
Các Kiểm Tra Hạn Sử Dụng Của Kem Chống Nắng Skin Aqua Nhật Bản
Bài thơ “Ngắm trăng” được sáng tác trong hoàn cảnh nào?
Câu hỏi ôn tập bài Sau phút chia li chọn lọc chi tiết
Phân tích tâm trạng nhân vật Liên khi chờ tàu năm 2023
Giới thiệu về Ngô Gia văn phái năm 2023
Kem Dưỡng Estee Lauder Thật Giả Qua Các Dung Tích, So Sánh Và Nhận Biết Serum Advance Night Repair
Nhân vật Mị sau khi về làm dâu nhà thống lí Pá Tra trong Vợ chồng A Phủ
Phân tích bức tranh tứ bình trong bài Nhớ rừng của Thế Lữ năm 2023
Viết thư cho Cô giáo cũ nhân ngày 20/11 năm 2023
Soạn bài Vừa nhắm mắt vừa mở cửa sổ