Thanh tìm kiếm trong html codepen

Tôi sẽ hướng dẫn bạn tất cả các thành phần bạn cần để thêm thanh tìm kiếm trong HTML và kết nối nó với Google để tìm kiếm

Google sẽ mở trong một tab mới và chỉ hiển thị kết quả cho trang web của bạn

Đối với những người đang vội, giải pháp hoàn chỉnh nằm ở cuối trang. Đối với những người muốn lặn sâu tiếp tục đọc

Hãy bắt đầu với HTML mà chúng ta cần để tạo biểu mẫu

Biểu mẫu HTML

Điều đầu tiên chúng ta cần thêm là chính thanh. Điều này sử dụng một vài yếu tố HTML

• <form id="form" role="search">
    <input type="search" id="query" name="q"
     placeholder="Search..."
     aria-label="Search through site content">
    <button>Searchbutton>
  form>

  2 - Phần tử này dành cho đầu vào của người dùng

• <form id="form" role="search">
    <input type="search" id="query" name="q"
     placeholder="Search..."
     aria-label="Search through site content">
    <button>Searchbutton>
  form>

  3 - Phần tử này có nhiều loại mà hôm nay chúng ta sẽ sử dụng là tìm kiếm

• <form id="form" role="search">
    <input type="search" id="query" name="q"
     placeholder="Search..."
     aria-label="Search through site content">
    <button>Searchbutton>
  form>

  4 - Phần tử này sẽ gửi biểu mẫu và bắt đầu tìm kiếm

Đây là giao diện của HTML

<form id="form"> 
  <input type="search" id="query" name="q" placeholder="Search...">
  <button>Searchbutton>
form>

HTML ở trên là tất cả những gì chúng ta cần để tạo một thanh tìm kiếm. Có một vài thuộc tính mà chúng tôi đang sử dụng trên thẻ

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

3. Hãy xem xét những điều này chi tiết hơn

• type - Cái này đặt giao diện của đầu vào trên màn hình. Có nhiều loại như mật khẩu, hộp kiểm và radio nhưng ở đây chúng tôi đang sử dụng tìm kiếm
• id - Đặt ID có thể giúp dễ dàng tham chiếu hộp nhập liệu từ JavaScript mà chúng ta sẽ sử dụng sau này
• tên - Người ta thường sử dụng “q” cho tên hộp truy vấn tìm kiếm
• giữ chỗ - Đây là một số văn bản đưa ra gợi ý cho người dùng về mục đích của đầu vào

Khi HTML hiển thị trên trình duyệt, nó trông như thế này

Đối với đầu vào, chúng tôi đã sử dụng tìm kiếm loại nhưng cũng có loại văn bản. Có thể hơi khó hiểu về việc bạn nên chọn cái nào. Hai loại đầu vào gần như giống nhau ngoại trừ loại tìm kiếm có thêm một số chức năng. Ví dụ: một số trình duyệt sẽ thêm nút xóa vào thẻ đầu vào cho bạn

Đối với các hộp tìm kiếm, nên sử dụng loại đầu vào tìm kiếm và đó là những gì chúng ta sẽ sử dụng ở đây

Biểu mẫu của chúng tôi chưa hoàn thành, chúng tôi cần đảm bảo rằng trình đọc màn hình có thể sử dụng biểu mẫu này để truy cập

Để làm điều này, chúng ta phải thực hiện hai thay đổi đối với biểu mẫu

1. Chúng ta cần thêm một

   <form id="form" role="search">
     <input type="search" id="query" name="q"
      placeholder="Search..."
      aria-label="Search through site content">
     <button>Searchbutton>
   form>

   6 vào biểu mẫu với giá trị là “tìm kiếm”. Cài đặt này sẽ khiến trình đọc màn hình thông báo rằng biểu mẫu này là biểu mẫu tìm kiếm
2. Chúng tôi thêm thuộc tính

   <form id="form" role="search">
     <input type="search" id="query" name="q"
      placeholder="Search..."
      aria-label="Search through site content">
     <button>Searchbutton>
   form>

   7 vào phần tử

   <form id="form" role="search">
     <input type="search" id="query" name="q"
      placeholder="Search..."
      aria-label="Search through site content">
     <button>Searchbutton>
   form>

   3. Trình đọc màn hình sẽ đọc to giá trị của thuộc tính này. Đặt giá trị mô tả văn bản mà biểu mẫu tìm kiếm trả về, chẳng hạn như “Tìm kiếm qua nội dung trang web của chúng tôi”

Đây là HTML cuối cùng của chúng tôi

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

Tiếp theo, chúng ta sẽ xem xét việc tạo một biểu mẫu đẹp bằng cách tạo kiểu cho biểu mẫu bằng CSS

CSS

CSS thêm phong cách vào thanh tìm kiếm thay đổi giao diện của nó

Một bổ sung có thể giúp người dùng tìm thấy hộp tìm kiếm là thêm kính lúp hoặc biểu tượng tìm kiếm. Chúng tôi sẽ thêm một trong số này vào nút và tạo hộp tìm kiếm giống như thế này

Thật tuyệt vời khi một chút màu sắc và một biểu tượng có thể làm được. Có vẻ tốt hơn nhiều phải không?

Hãy xem những gì chúng tôi đã thay đổi để làm cho nó trông như thế này

Đầu tiên, chúng tôi đã thêm một số màu vào biểu mẫu

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

Chúng tôi đã đặt chiều rộng và chiều cao của biểu mẫu. Chúng tôi cũng sắp xếp các mục trong biểu mẫu bằng cách sử dụng màn hình

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

9

Tiếp theo, chúng tôi thay đổi giao diện của hộp tìm kiếm đầu vào

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

1

Dòng đầu tiên ở trên đặt lại thiết kế hộp tìm kiếm

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

0. Nhiều trình duyệt thêm thiết kế của riêng chúng và có thể khó tạo kiểu. Điều này có thể giúp tạo kiểu dễ dàng hơn khi chúng ta cần

Sau đó, chúng tôi đặt phông chữ và đảm bảo rằng thanh tìm kiếm lấp đầy khoảng trống với chiều cao và chiều rộng. Cuối cùng, chúng tôi đã thêm một chút đệm

Quy tắc CSS tiếp theo hơi lạ. Nó cho phép chúng tôi đặt kiểu văn bản giữ chỗ bên trong hộp tìm kiếm. Mặc định là văn bản màu xám, để thay đổi điều này, chúng ta cần sử dụng quy tắc này

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

3

Các quy tắc CSS cuối cùng thay đổi giao diện của nút. Bạn có thể thấy ở đây chúng tôi đã thay thế nút tìm kiếm bằng biểu tượng tìm kiếm

Để làm điều này, tôi đã thay đổi HTML của nút để bao gồm một

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

1.

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

1 là hình ảnh của biểu tượng tìm kiếm, bây giờ nó trông như thế này

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

6

Sau đó, chúng ta có thể tạo kiểu cho hai phần tử html này như thế này

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

7

Chúng tôi đã sử dụng lại quy tắc

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

0 để đặt lại nút về mặc định. Sau đó đặt chiều cao và chiều rộng là

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

4, đây là kích thước phù hợp cho các ngón tay trên màn hình cảm ứng

Sau đó, chúng tôi đặt chiều cao và chiều rộng của biểu tượng và đặt màu thành màu trắng ("#fff”)

Bây giờ thanh tìm kiếm của chúng tôi gần như đã sẵn sàng. Ngoại trừ không có gì xảy ra khi chúng tôi nhấn nút tìm kiếm

Bước cuối cùng đối với chúng tôi là kết nối nút với JavaScript

JavaScript

Chúng tôi sẽ thực hiện tìm kiếm Google khi ai đó tìm kiếm trong thanh tìm kiếm của chúng tôi

Để làm điều này, chúng ta cần viết một số mã sẽ

• Thêm trình xử lý sự kiện vào biểu mẫu để chúng tôi biết khi ai đó nhấn nút tìm kiếm
• Lấy giá trị văn bản từ hộp truy vấn
• Xây dựng một URL Google tìm kiếm một trang web cụ thể
• Mở một tab mới với Google và truy vấn tìm kiếm

Google cho phép bạn tìm kiếm một trang web cụ thể nếu bạn thêm

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

5 vào truy vấn. Ví dụ: nếu bạn muốn tìm kiếm PageDart cho cụm từ lazy loading, bạn có thể thêm cụm từ này vào Google

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

6

Điều tuyệt vời về truy vấn tìm kiếm này là nó chỉ trả về kết quả cho trang web bạn chỉ định. Bạn lọc kết quả của Google và sẽ không có trang web nào khác xuất hiện trong kết quả. Chúng tôi có thể sử dụng thủ thuật này để tạo trang kết quả tìm kiếm từ thanh tìm kiếm của mình

Đây là mã có thể làm điều này

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

2

Điều đầu tiên chúng tôi làm là đính kèm một số biến vào biểu mẫu và hộp nhập tìm kiếm. Sau đó, chúng tôi đặt URL Google và đặt biến trang web

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

3

Nếu bạn muốn tìm kiếm trang web của mình thì hãy thay đổi

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

7 thành trang web của bạn

form {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

8

Sau đó, chúng tôi tạo một chức năng sẽ chạy mỗi khi ai đó nhấn nút tìm kiếm. Sau đó, chức năng sẽ mở Google trong một tab mới trên trình duyệt

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

6

Dòng cuối cùng trong mã

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

0

Thêm người nghe vào biểu mẫu. Nó sẽ lắng nghe nút gửi và chạy chức năng mỗi lần

Giờ đây, khi bạn nhập truy vấn tìm kiếm và nhấn vào biểu tượng tìm kiếm, một tab mới sẽ mở ra với trang web của bạn và truy vấn tìm kiếm

Giải pháp hoàn chỉnh

Bây giờ chúng tôi đã bao gồm tất cả các phần của thanh tìm kiếm

• HTML của biểu mẫu
• CSS để thêm màu sắc và thiết kế
• JavaScript để xử lý đầu vào biểu mẫu

Bạn có thể xem một ví dụ về codepen đang hoạt động

Đây là HTML hoàn chỉnh

<form id="form" role="search">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>Searchbutton>
form>

1

Cách thêm thanh tìm kiếm trong HTML, suy nghĩ cuối cùng

Bạn đã học trong hướng dẫn này cách thêm thanh tìm kiếm trong HTML. chúng tôi đã bảo hiểm

• Cách tạo một biểu mẫu HTML nhỏ
• Cách thiết kế biểu mẫu bằng CSS
• Cách viết JavaScript để tương tác với biểu mẫu

Bạn cũng đã học cách sử dụng JavaScript để kết nối biểu mẫu với Google. Chỉ thực hiện tìm kiếm trên trang web của bạn