Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
31 Search Form Đẹp Cho Trang Web Phần 2

31 Search Form Đẹp Cho Trang Web Phần 2


Ngày 27 Tháng 8 Năm 2020

Search component là một thành phần quan trọng trong trang web. Nó giúp người dùng dễ dàng có thể tìm thấy nội dung mà họ mong muốn ở trong website của bạn. Trong bài viết hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những thiết kế search component đẹp mắt được xây dựng bằng HTML, CSS và Javascript nhé!

Các Mẫu Search Form Đẹp Cho Website

Nếu bạn muốn tìm hiểu thêm về những thiết kế search component phần 1 thì có thể tham khảo bài viết ở đây nhé!

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay 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é. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. 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.

Tổng Hợp Các Search Form Đẹp CSS Javascript

Search Form Đẹp CSS Javascript

Tổng hợp đầy đủ các hiệu ứng chuyển động dành cho search form được xây dựng bằng CSS và Javascript.

See the Pen CSS Animated Search Box Concepts by Brandon Kennedy (@brandonkennedy) on CodePen.

Nguồn

Tạo Hiệu Ứng Chuyển Động Cho Search Form Và Icon

Animation Search Form

Khi bạn nhấn vào icon tìm kiếm thì nó sẽ tự động hiển thị ô input để cho người dùng nhập từ khóa vào ô tìm kiếm. Đồng thời cũng thay đổi icon tìm kiếm sang icon mũi tên.

See the Pen Search button animation by Kristy Yeaton (@kristyjy) on CodePen.

Nguồn

Search Form Bằng HTML CSS

Search Form HTML CSS

Search Form này được tạo từ HTML CSS, do đó bạn có thể áp dụng cho nhiều loại dự án web khác nhau. Điểm mình thích ở nó là có thể dễ dàng thu hút sự chú ý của người dùng bằng việc dùng màu đỏ làm chủ đạo.

See the Pen Search Form With Animated Search Button by Himalaya Singh (@himalayasingh) on CodePen.

Nguồn

Tạo Input Search Form

Điểm nổi bật của input search form này là khi người dùng gõ nội dung vào ô tìm kiếm thì border ở dưới sẽ tự động chuyển màu với độ rộng bằng đúng kích thước ký tự đã nhập.

See the Pen Tripadvisor input highlight by Petr Gazarov (@petrgazarov) on CodePen.

Nguồn

Tạo Animation Cho Search Form Bằng CSS

Animated Search Box

Đây có thể được xem là search form được sử dụng phổ biến hiện nay. Với việc chỉ sử dụng icon tìm kiếm để hiển thị chức năng thì nó tiết kiệm cho bạn khá nhiều diện tích trên website. Khi người dùng nhấn vào icon này thì nó sẽ tự động hiển thị ra ô iput với hiệu ứng chuyển động đẹp mắt.

See the Pen Animated Search Box by Alex Tkachev (@alexpopovich) on CodePen.

Nguồn

Tạo Search Form Kết Hợp Icon

Search Form Icon

Đây là một search form giúp người dùng có thể dễ dàng tìm kiếm hơn bằng cách sử dụng các icon để biểu thị cho từng loại nội dung riêng biệt như hình ảnh, người dùng...

See the Pen DailyUI #022 - Search by Fabio Ottaviani (@supah) on CodePen.

Nguồn

Tạo Search Form Theo Kiểu Material

 Search Form Material

Đây là loại search form được thiết kế theo kiểu material. Bên trái của ô tìm kiếm bạn có thể sử dụng để đặt logo của công ty hay website của mình. Điểm đặc biệt của nó là khi người dùng nhấn vào ô input thì nó sẽ tự động mở rộng theo cả chiều cao và chiều rộng. Từ đó sẽ giúp mọi người có thể dễ dàng nhập các nội dung có nhiều ký tự.

See the Pen Material Design: Search Bar by Matt (@uixmat) on CodePen.

Nguồn

Cách Tạo Search Form Bằng Jquery

Search Form Jquery

Nếu bạn cần tiết kiệm diện tích trên website thì có thể sử dụng search form này. Nó sẽ được hiển thị bên dưới thanh tiêu đề khi người dùng nhấn vào icon tìm kiếm.

See the Pen Sliding Search Form by Thierry Dulieu (@Linuance) on CodePen.

Nguồn

Cách Tạo Search Form Responsive

Search Form Responsive

Điểm mình thích ở search Form này là việc có thể mở rộng hay rút gọn ô tìm kiếm thông qua icon. Với ô input chỉ sử dụng border bottom, nó mang lại cho người dùng cảm giác thiết kế đơn giản và hiện đại cho website. Ngoài ra nó còn được thiết kế responsive để áp dụng hiển thị trên nhiều loại màn hình thiết bị khác nhau.

See the Pen Hidden search box slide down by Matt Saling (@msaling) on CodePen.

Nguồn

Thiết Kế Search Form HTML Cho Website

 Search Form HTML Cho Website

Đây là một loại search form được thiết kế theo kiểu Bootstrap. Nó chỉ hiển thị khi người dùng nhấn vào icon tìm kiếm.

See the Pen Animated Search Interaction by Jon Kantner (@jkantner) on CodePen.

Nguồn

Xây Dựng Search Form Kết Hợp Với Background CSS

Search Form Background CSS

Điểm nổi bật nhất của search form này là cách phối màu giữa background và ô input. Khi người dùng nhấn vào icon thì ô tìm kiếm sẽ từ từ hiện ra kèm theo hiệu ứng chuyển động đẹp mắt. Ngoài ra nó còn có chức năng đóng giúp người dùng có thể dễ dàng hủy việc tìm kiếm của mình.

See the Pen Search box animation by Denis Pasko (@faustdp) on CodePen.

Nguồn

Tạo Search Form Kết Hợp Với Border CSS

Search Form Border CSS

Hiệu ứng của search form này được thiết kế dựa trên đường viền và box shadow. Khi người dùng nhấp vào ô tìm kiếm thì border bên dưới và bên phải sẽ thay đổi kích thước, màu sắc tạo ra cảm giác 3D dành cho ô input.

See the Pen :focus-within and :placeholder-shown selectors by Mert Cukuren (@knyttneve) on CodePen.

Nguồn

Thiết Kế Search Form UI

Search Form UI

Đây là dự án tập hợp các search form UI dành cho website. Có 4 loại hiệu ứng chính dành cho ô tìm kiếm là thay đổi màu nền, thay đổi độ rộng, phóng to icon và hiển thị icon tìm kiếm khi người dùng nhấp vào search form.

See the Pen rlnvz by Paula Borowska (@paulaborowska) on CodePen.

Nguồn

Tạo Search Box Bằng Thư Viện Scene.js

Search Box Scene.js

Đây là search box được xây dựng dựa trên thư viện scene.js. Khi bạn nhấp vào icon thì ô iput sẽ được mở rộng từ chính giữa kèm theo sự di chuyển của icon tìm kiếm và placeholder input.

See the Pen Scene.js example search box animation by Daybrush (@daybrush) on CodePen.

Nguồn

Kết Hợp Seach Form Với Navigation

Seach Form Navigation

Đây là dự án tập hợp các ví dụ về việc kết hợp search form với thanh tiêu đề trong website. Nó có thể sẽ hiển thị ô tìm kiếm nằm bên dưới, chính giữa, bên phải... so với navigation.

See the Pen Header Search by Aleksandar Čugurović (@choogoor) on CodePen.

Nguồn

Tạo Search Box Bằng CSS Và Javascript

Search Box CSS Javascript

Search box này được thiết kế bằng CSS và Javascript. Điểm nổi bật của nó là hiệu ứng chuyển động khi chuyển từ icon tìm kiếm sang icon đóng.

See the Pen Search box v.2 by Takane Ichinose (@takaneichinose) on CodePen.

Nguồn

Tạo Search Form Input Bằng Javascript

Search Form Input Javascript

Search form input được xây dựng bằng Javascript với thiết kế nổi bật là sử dụng đường viền kết hợp với shadow cho ô input.

See the Pen Expanding Input by Steve Gardner (@ste-vg) on CodePen.

Nguồn

Tạo Hiệu Ứng Chuyển Động Cho Search Icon

Animation Search Icon

Ô tìm kiếm này được thiết kế bằng html và css. Khi người dùng nhấn vào icon thì ô input sẽ tự động được mở rộng.

See the Pen Search bar by Takane Ichinose (@takaneichinose) on CodePen.

Nguồn

Tạo Form Search Box Bằng CSS Javascript

Form Search Box CSS Javascript

Seach box được xây dựng bằng css va javascript. Với hiệu ứng chuyển động đẹp mắt và icon tìm kiếm được thiết kế tinh xảo giúp mang lại cảm giác hiện đại cho trang web.

See the Pen Expanding Animated search box Using Jquery by rajeshdn (@RajRajeshDn) on CodePen.

Nguồn

Xây Dựng Hiệu Ứng Chuyển Động Cho Icon Trong Search Form

Hiệu Ứng Chuyển Động Cho Icon Trong Search Form

Đây là ô search form được thiết kế bằng việc sử dụng transparent background cho ô input.

See the Pen Search Form Animation by Aleksandar Čugurović (@choogoor) on CodePen.

Nguồn

Cách Tạo HTML Form Seach

HTML Form Seach

Background của ô tìm kiếm sẽ được tự động thay đổi khi người dùng focus vào ô input.

See the Pen Search Box by Roy Motloutsi (@emelent) on CodePen.

Nguồn

Cách Tạo Search Form Kết Hợp Box Shadow

Search Form Box Shadow

Ô tìm kiếm được thiết kế bằng việc áp dụng box shadow cho ô input và icon.

See the Pen Expandable Search box using jquery by rajeshdn (@RajRajeshDn) on CodePen.

Nguồn

Cách Tạo Search Form Email

Search Form Email

Điểm nổi bật của nó là hiệu ứng chuyển động cho ô tìm kiếm email. Ô input sẽ được hiển thị bên dưới icon tìm kiếm.

See the Pen expanding search box - toggle animated search box by rajeshdn (@RajRajeshDn) on CodePen.

Nguồn

Cách Tạo Search Form Bằng Input HTML

Search Form Bằng Input HTML

Search form kết hợp icon đóng mở giúp người dùng có thể dễ dàng mở rộng hay thu gọn ô input tìm kiếm.

See the Pen Search Form with Toggle Button by Mark Zolton (@mczolton) on CodePen.

Nguồn

Thiết Kế Search Bar Cho Website

Search Bar Cho Website

Search bar được thiết kế tinh tế bằng việc sử dụng màu placeholder input trùng với màu của trang web. Ngoài ra ô tìm kiếm cũng được xây dựng theo kiểu material bằng việc sử dụng một đường viền bên dưới cho ô input.

See the Pen Animated search bar by Austin Dudas (@austin_dudas) on CodePen.

Nguồn

Thiết Kế Animated Search Box

Animated Search Box CSS Javascript

Các tạo hiệu ứng chuyển động đẹp mắt dành cho ô tìm kiếm.

See the Pen Search overlay by Steve (@stevemckinney) on CodePen.

Nguồn

Thiết Kế Search Form Bootstrap

Search Form Bootstrap

Thiết kế và tạo hiệu ứng chuyển đồng dành cho search form bootstrap.

See the Pen Expanding text box/button by Sam Daitzman (@sdaitzman) on CodePen.

Nguồn

Thiết Kế Search Bar Bằng CSS Và Javascript

Search Bar CSS Và Javascript

Thiết kế search bar kết hợp với hiệu ứng chuyển động dành cho button tìm kiếm.

See the Pen Emoji Search Bar by Lashan Dias (@lashan) on CodePen.

Nguồn

Tạo Animation Search Bar Bằng GSAP

Animation Search Bar Bằng GSAP

Thiết kế hiệu ứng chuyển động cho ô tìm kiếm bằng cách sử dụng thư viện gsap.

See the Pen Search Animation GSAP by Valery Alikin (@AlikinVV) on CodePen.

Nguồn

Tạo Searchbox Bằng Jquery

Searchbox Bằng Jquery

Searchbox được xây dựng bằng Jquery với hiệu ứng chuyển đổi từ icon tìm kiếm sang icon đóng đẹp mắt.

See the Pen Search icon animation by Bram Krekels (@BramKrekels) on CodePen.

Nguồn

Thiết Kế Search Form Input Javascript

Search Form Input Javascript

Search form input xây dựng bằng Javascript. Với thiết kế đẹp mắt bằng việc kết hợp màu nền với font chữ cho ô tìm kiếm.

See the Pen ⚡️ Search Input ⚡️ #We❤️Frontend by 0guzhan (@0guzhan) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những component search hữu ích dành cho việc phát triển, thiết kế 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ẻ!

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.