Tạo search form đẹp với css/html

     

Search Bar (thanh tra cứu kiếm) là chức năng không thể thiếu hụt trong phần đa trang web. Tìm kiếm bar giúp tín đồ dùng dễ ợt tìm kiếm tin tức họ cần mà không phải tìm trong toàn bộ các danh mục của trang web. Bao gồm một thanh search bar sẽ giúp cho website của bạn bè thiện với người tiêu 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 search bar.

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

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

Search Bar


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

Xem thêm: Mẫu Thông Báo Đi Du Lịch Cho Cbnv 2021 Công Ty Cptm Q&V Việt Nam

HTML

Đầu tiên, các bạn mở tệp tin HTML với nhập vào đoạn mã sau nhé:


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

CSS

Tiếp theo là đến CSS, mình kiến tạo CSS mang lại thanh navigation với thanh tra cứu kiếm. Các bạn có thể tham khảo CSS của bản thân 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 & (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ế để cho thanh navigationphù đúng theo với độ phân giải của từng màn hình (responsive). Mình kiến thiết responsive mang lại 2 độ phân giải là >600px và 600px, thanh navigation sẽ hiển thị theo khối ngang. Lúc thanh trình ưng chuẩn ở độ sắc nét

Kết quả

- Thanh tìm kiếm kiếm khi screen trình coi xé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 ưng chuẩn HTML

Kết quả

Search Bar cùng với Submit button

Với Submit button tương tự như như Icon button chỉ không giống là mình cầm icon bằng chữ Submit thôi nhé. Chúng ta tham khảo bài bác mình sau đây:

HTML



HTML

Kết quả

Lời kết

Để thiết kế được thanh tìm kiếm bar tương xứng với trang web của bản thân cũng ko khó phải không những bạn. Một website muốn tiếp cận tốt đến người tiêu dùng thì đề xuất khoa học, thân mật và không mất nhiều thời gian load trang. Để làm cho được như vậy, thanh tìm kiếm là một tính năng không thể thiếu, giúp fan dùng dễ dãi tìm được thứ mình thích trong website của bạn. Hi vọng qua các 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 các bạn thành công!


Chuyên mục: Domain Hosting