TẠO SEARCH FORM ĐẸP VỚI CSS/HTML

Search Bar (thanh tìm kiếm) là công dụng không thể thiếu thốn trong đông đảo trang web. Tìm kiếm bar giúp tín đồ dùng dễ dãi tìm kiếm thông tin họ đề nghị mà chưa phải tìm trong toàn bộ các hạng mục của trang web. Gồm một thanh tìm kiếm bar sẽ giúp cho trang web của bạn bè thiện với người dùng hơn, giảm thời hạn tảitrang khi người tiêu dùng thực hiện tại tìm kiếm.

Bạn đang xem: Tạo search form đẹp với css/html

Đây là một ví dụ về thanh tìm kiếm bar.

Giờ mình thuộc vào có tác dụng ví dụ rõ ràng nhé những bạn

Bài viết này được đăng tại

Search Bar

Đầu tiên mình làm cho một thanh tìm kiếm kiếm đơn giản và dễ dàng đặt trong thanh navigation cho chúng ta dễ hình dung nhé.

Xem thêm: Query Là Gì? Các Câu Lệnh Query Trong Access 2016 Tạo Và Chạy Truy Vấn Cập Nhật

HTML

Đầu tiên, chúng ta mở file HTML và nhập vào đoạn mã sau nhé:

Các chúng ta cũng có thể đặt thanh tìmở phía bên ngoài tùy theo thiết kế của trang web nhé.

Xem thêm: Mẫu Thông Báo Về Việc Thanh Lý Tài Sản Năm 2022, Thông Báo Về Việc Bán Thanh Lý Tài Sản Năm 2022

CSS

Tiếp theo là mang lại CSS, mình thi công CSS cho thanh navigation với thanh tìm kiếm kiếm. Các bạn có thể tham khảo CSS của chính mình sau đây:

* box-sizing: border-box;body margin: 0; font-family: Arial, Helvetica, sans-serif;.topnav overflow: hidden; background-color: #e9e9e9;.topnav a float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;.topnav a:hover background-color: #ddd; color: black;.topnav a.active background-color: #2196F3; color: white;.topnav input float: right; padding: 6px; margin-top: 8px; margin-right: 16px; border: none; font-size: 17px;
media screen and (max-width: 600px) .topnav a, .topnav input float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; .topnav input border: 1px solid #ccc;
media. Đây là phần cssmình thiết kế làm cho thanh navigationphù vừa lòng với độ phân giải của từng màn hình hiển thị (responsive). Mình thiết kế responsive mang lại 2 độ phân giải là >600px cùng 600px, thanh navigation vẫn hiển thị theo khối ngang. Khi thanh trình phê duyệt ở độ phân giải

Kết quả

- Thanh search kiếm khi màn hình hiển thị trình để mắt >600px, thanh navigation hiển thị theo khối ngang.

- Áp dụng responsive, bản thân thu bé dại màn hình trình săn sóc HTML

Kết quả

Search Bar với Submit button

Với Submit button tương tự như như Icon button chỉ khác là mình nỗ lực icon bằng văn bản Submit thôi nhé. Chúng ta tham khảo bài xích mình sau đây:

HTML

HTML

Kết quả

Lời kết

Để xây dựng được thanh tìm kiếm bar cân xứng với trang web của chính mình cũng không khó buộc phải không những bạn. Một trang web muốn tiếp cận giỏi đến người dùng thì đề nghị khoa học, thân mật và không mất quá nhiều thời gian load trang. Để có tác dụng được như vậy, thanh tìm kiếm kiếm là một công dụng không thể thiếu, giúp tín đồ dùng dễ dàng tìm được thứ mình thích trong website của bạn. Hy vọng qua những ví dụ này sẽ giúp các bạn có một website khoa học và thân thiết với người tiêu dùng nhé. Chúc chúng ta thành công!