Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
10 Form Tìm Kiếm Snippet Bootstrap Cho Website

10 Form Tìm Kiếm Snippet Bootstrap Cho Website


Ngày 23 Tháng 1 Năm 2021

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 tìm kiếm 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é!

Các Form Tìm Kiếm Snippet trong Bootstrap

Theo mình thấy form tìm kiếm được sử dụng trong những trang web có nội dung lớn, nó giúp người dùng nhanh chóng tìm kiểm được thông tin cần thiết mà họ mong muốn. Ví dụ một trang web bán hàng với nhiều sản phẩm đa dạng thì khách hàng không thể ngồi coi từng sản phẩm của chúng ta để chọn ra sản phẩm mà họ mong muốn vì sẽ tốn nhiều thời gian cũng như công sức của họ, do đó form tìm kiếm là một ứng dụng hữu ích và lí tưởng trong trường hợp này. Theo mình tìm hiểu thì ngày nay công cụ tìm kiếm bằng giọng nói sẽ chiếm khoảng 50% trong tương lai do điện thoại thông minh ngày càng phát triển.

Để hiểu rõ hơn bạn xem ví dụ về trang tìm kiếm của Google dưới đây nha:

Ví dụ về form tìm kiếm Google

Mình có một số lưu ý khi thiết kế form tìm kiếm là nơi đặt vị trí phải giúp người dùng dễ nhìn thấy và nhận ra nhất trong trang web của chúng ta.Theo mình tìm hiểu thì nơi tốt nhất để đặt là trên cùng bên trái trên cùng bên phải của trang web. Điều quan trọng thứ hai là bạn cần làm rõ cho người dùng biết nó là form tìm kiếm bằng cách đặt tên cho button gửi form bằng icon tìm kiếm hoặc chữ "Tìm", "Tìm Kiếm"... Và cuối cùng nó phải hài hòa với thiết kế cũng như bố cục của trang và bạn cũng có thể các tùy chọn tìm kiếm nâng cao giúp hỗ trợ tìm kiếm thông tin chính xác mà khách hàng mong muốn.

Bây giờ mình sẽ giới thiệu tiếp một số component Form tìm kiếm đượ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.

Form Tìm Kiếm Bootstrap 4:

Form Tìm Kiếm Bootstrap 4

Đây là tập những loại form tìm kiếm được sử dụng HTML, CSS và Bootstrap 4 để xây dựng. Bạn có thể tùy vào bố cục và thiết kế của trang web mà lựa chọn phù hợp nha. Bây giờ để hiểu rõ hơn bạn xem đoạn code và khi các form này được hiển thị trên web ở dưới đây nhé:

See the Pen O Tim Kiem Boostrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Search Bar:

Search Bar

Form tìm kiếm này được thiết kế theo phong cách đơn giản với sự tập trung vào các chi tiết như hiệu ứng chuyển động mở rộng thanh tìm kiếm, việc phối hợp màu sắc hài hòa giữa các thành phần trong component này. Do chỉ viết bằng HTMl và CSS nên bạn có thể áp dụng cho nhiều loại trang web khác nhau. 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 UI #2 - Search Bar by Jove Angelevski (@AlbertFeynman) on CodePen.

Nguồn

Search Bar Animation:

Search Bar Animation

Form tìm kiếm này cũng được thiết kế như ở ví dụ như ở trân nhưng điểm sáng tạo ở đây là cách nó tạo hiệu ứng bằng cách di chuyển phần thân của icon kính lúp thành biểu tượng dấu "X". Bằng việc sử dụng màu nền cam và màu chữ trắng tạo độ tương phản cao giúp làm nổi bật form tìm kiếm và do nó sử dụng button để mở rộng ô nhập form nên bạn có thể áp dụng trên môi trường mobile để tiết kiệm diện tích và tăng độ tương tác 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 Search bar animation by Milan Milošev (@MilanMilosev) on CodePen.

Nguồn

Fancy Search Box:

Fancy Search Box

Form tìm kiếm này được thiết kế theo phong cách sáng tạo gây ấn tượng mạnh cho người dùng bởi hiệu ứng của component. Khi người dùng nhấn vào thì nó loại bỏ mọi đường viền không cần thiết trong ô input và cũng đảo hướng icon tìm kiếm từ trái sang phải. 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 Fancy Search Box // SVG + CSS + jQuery by Tommy Small (@tommysmall92) on CodePen.

Nguồn

CSS3 Animated Search Box:

CSS3 Animated Search Box

Form tìm kiếm cũng giống như ở trên nhưng nó nổi bật bởi sự phối hợp giữa màu nền và các màu trong thành phần form. Ngoài ra hiệu ứng chuyển động là một điểm cộng cho form tìm kiếm 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 CSS3 Animated Search Box by Nuski Hazeem (@nuski) on CodePen.

Nguồn

Pure CSS Expanding Search:

Pure CSS Expanding Search

Nếu bạn cần một Form tìm kiếm mà chỉ sử dụng HTML, CSS và có những hiệu ứng chuyển động đẹp thì nên sử dụng component này. Cách thay đổi màu sắc hài hòa khi người dùng nhấn vào button với icon tìm kiếm tạo cảm giác thú vị cho người sử 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 Pure CSS expanding search with custom properties (no Edge support) by Ana Tudor (@thebabydino) on CodePen.

Nguồn

Colorlib Search Form v24:

Colorlib Search Form v24

Form tìm kiếm này ngoài việc cung cấp ô nhập chữ thì nó còn cung cấp thẻ select giúp cho người dùng giảm bớt phạm vi tìm kiếm cũng như hiển thị chính xác thông tin họ mong muốn hơn. Việc phối hợp màu ảnh nền với màu trong form tạo cảm giác hài hòa hơn cho trang web. 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

Colorlib Search Form v23:

Colorlib Search Form v23

Form tìm kiếm này được thiết kế đơn giản bởi HTML, CSS và được responsive trên màn hình thiết bị khác nhau. Bạn cũng có thể thêm các gợi ý từ khóa bên dưới ô nhập chữ. Nó tạo sự mềm mại và hiện đại bằng cách bo góc cho form cũng như sử dụng ảnh nền thú vị cho trang web. 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

Colorlib Search Form v9:

Colorlib Search Form v9

Form này rất phù hợp với các trang trang web có nội dung lớn và đa dạng. Nó sử dụng những công cụ tìm kiếm nâng cao bằng cách đưa ra sự lựa chọn cho từng thể loại cụ thể. Với thiết kế đơn giản giúp khách hàng có thể dễ dàng sử dụng và chức năng reset giúp làm mới lại toàn bộ nội dung trong form tìm kiếm. 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

Colorlib Search Form v18:

Colorlib Search Form v18

Đây là form tìm kiếm về khách sạn, xe hơi, chuyến bay với mỗi thể loại là các loại form tìm kiếm nâng cao tương ứng. Hiệu ứng ảnh nền làm cho form trong trang web nổi bật hơn và các form này bạn có thể hoàn toàn điều chỉnh để phù hợp với mục đích sử dụng của mình. 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 tìm kiếm 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ẻ!

Load WooCommerce Stores in 249ms!