Hướng dẫn search box html css - hộp tìm kiếm html css

Search Bar (thanh tìm kiếm) là chức năng không thể thiếu trong mọi trang web. Search bar giúp người dùng dễ dàng tìm kiếm thông tin họ cần mà không phải tìm trong tất cả các danh mục của trang web. Có một thanh search bar sẽ giúp cho trang web của bạn thân thiện với người dùng hơn, giảm thời gian tải trang khi người dùng thực hiện tìm kiếm.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

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

Giờ mình cùng vào làm ví dụ cụ thể nhé các bạn

Bài viết này được đăng tại [free tuts .net]

Search Bar 

Đầu tiên mình làm một thanh tìm kiếm đơn giản đặt trong thanh navigation cho các bạn dễ hình dung nhé.

HTML

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

HTML

  Trang chủ
  Về chúng tôi
  Liên hệ
  

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

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

CSS

* {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[type=text] {
  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[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

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

Các bạn để ý trong CSS mình có thuộc tính @media. Đây là phần css mình thiết kế để cho thanh navigation phù hợp với độ phân giải của từng màn hình (responsive). Mình thiết kế responsive cho 2 độ phân giải là >600px và 600px, thanh navigation sẽ hiển thị theo khối ngang. Khi thanh trình duyệt ở độ phân giải

Các chỉnh sửa kích thước của màn hình để thấy được sự thay đổi nhé.

Kết quả

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

- Áp dụng responsive, mình thu nhỏ màn hình trình duyệt

Các bạn run để so sánh kết quả nhé.

Search Bar với Icon button

HTML

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

HTML

  Trang chủ
  Về chúng tôi
  Liên hệ
  

    

      
      
    
  

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

CSS

* {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 .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

Các chỉnh sửa kích thước của màn hình để thấy được sự thay đổi nhé.

Kết quả

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

HTML

HTML

  Trang chủ
  Về chúng tôi
  Liên hệ
  

    

      
      Submit
    
  

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

* {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 .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

Các chỉnh sửa kích thước của màn hình để thấy được sự thay đổi nhé.

Kết quả

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