Tạo ô tìm kiếm trong html

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é!

Bạn đang xem: Tạo ô tìm kiếm trong html

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.


Bạn đang xem: Tạo ô tìm kiếm trong html

*

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 (

*

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 (

*

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 (

*

Đ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 (

*

Đâ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 (
Đâ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 (
Đâ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 (
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 (
Đ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 (
Đâ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 (
Đ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 (

Xem thêm: Cách Cài Driver Máy In Canon Lbp 1210 Miễn Phí Cho Máy, Hướng Dẫn Cài Đặt Máy In Canon Lbp 1210

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 (
Đâ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 (
Đâ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 (
Đâ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.

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 (
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 (
Ô 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 (
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 (
Đâ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ć (
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 (
Ô 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 (
Đ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 (
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 (
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 (
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 (
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 (
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 (
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 (
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ẻ!