Hướng dẫn how do i add the search bar symbol in html? - làm cách nào để thêm biểu tượng thanh tìm kiếm vào html?

Trong hướng dẫn này, chúng tôi sẽ thêm một thanh tìm kiếm trong HTML vào trang web của bạn!

Tôi sẽ hướng dẫn bạn qua tất cả các thành phần bạn cần để thêm một 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 vội vàng, 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, hãy tiếp tục đọc!

• Hình thức HTML
• CSS
• JavaScript
• Giải pháp hoàn chỉnh
• Cách thêm thanh tìm kiếm trong HTML, suy nghĩ cuối cùng

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

Hình thức HTML

CSS

• JavaScript
• Giải pháp hoàn chỉnh
• Cách thêm thanh tìm kiếm trong HTML, suy nghĩ cuối cùng

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

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

Đ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 chúng ta sẽ sử dụng ngày hôm nay 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à những gì HTML sẽ trông như thế nào:

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>

Loại - Điều này đặt cách đầu vào trông như thế nà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 bạn dễ dàng tham khảo hộp đầu vào từ JavaScript mà chúng tôi sẽ sử dụng sau

Tên - Người ta thường sử dụng tên Q Q Q cho tên hộp truy vấn tìm kiếm

người giữ chỗ - đây là một số văn bản đưa ra gợi ý cho người dùng về đầu vào dành cho

1. Khi HTML hiển thị trên trình duyệt, có vẻ như sau:
2. Đố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. Nó có thể là một chút khó hiểu mà bạn nên chọn. Hai loại đầu vào gần như giống nhau ngoại trừ loại tìm kiếm có một số chức năng bổ sung. 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, thật hợp lý khi 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.

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

Hình thức của chúng tôi vẫn chưa hoàn thành, chúng tôi cần đảm bảo rằng người đọc màn hình có thể sử dụng nó để tiếp cận.

CSS

JavaScript

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

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

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

Đ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 {
  background-color: #4654e1;
  width: 300px;
  height: 44px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

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

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

input {
  all: unset;
  font: 16px system-ui;
  color: #fff;
  height: 100%;
  width: 100%;
  padding: 6px 10px;
}

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

Đây là những gì HTML sẽ trông như thế nào:

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>

::placeholder {
  color: #fff;
  opacity: 0.7; 
}

Loại - Điều này đặt cách đầu vào trông như thế nà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 bạn dễ dàng tham khảo hộp đầu vào từ JavaScript mà chúng tôi sẽ sử dụng sau

<form role="search" id="form">
  <input type="search" id="query" name="q"
   placeholder="Search..."
   aria-label="Search through site content">
  <button>
    <svg viewBox="0 0 1024 1024"><path class="path2" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z">path>svg>
  button>
form>

Tên - Người ta thường sử dụng tên Q Q Q cho tên hộp truy vấn tìm kiếm

button {
  all: unset;
  cursor: pointer;
  width: 44px;
  height: 44px;
}

svg {
  color: #fff;
  fill: currentColor;
  width: 24px;
  height: 24px;
  padding: 10px;
}

người giữ chỗ - đây là một số văn bản đưa ra gợi ý cho người dùng về đầu vào dành cho

Khi HTML hiển thị trên trình duyệt, có vẻ như sau:

Đố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. Nó có thể là một chút khó hiểu mà bạn nên chọn. Hai loại đầu vào gần như giống nhau ngoại trừ loại tìm kiếm có một số chức năng bổ sung. 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, thật hợp lý khi 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.

Hình thức của chúng tôi vẫn chưa hoàn thành, chúng tôi cần đảm bảo rằng người đọc màn hình có thể sử dụng nó để tiếp cận.

Để làm điều này, chúng tôi phải thực hiện hai thay đổi theo biểu mẫu:

Chúng ta cần thêm

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

• Chúng tôi thêm một 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 một giá trị mô tả văn bản nào mà biểu mẫu tìm kiếm trả về như tìm kiếm thông qua nội dung trang web của chúng tôi.
• Nhận giá trị văn bản từ hộp truy vấn
• Xây dựng 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;
}

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

Đ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ả Google và không có trang web nào khác sẽ 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 chúng tôi.

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

const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'pagedart.com';

function submitted(event) {
  event.preventDefault();
  const url = google + site + '+' + q.value;
  const win = window.open(url, '_blank');
  win.focus();
}

f.addEventListener('submit', submitted);

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

const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=site%3A+';
const site = 'pagedart.com';

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;
}

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

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. Hàm sau đó sẽ mở Google trong một tab mới trong trình duyệt:

function submitted(event) {
  event.preventDefault();
  const url = google + site + '+' + q.value;
  const win = window.open(url, '_blank');
  win.focus();
}

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>

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

Bây giờ khi bạn nhập truy vấn tìm kiếm và nhấn 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 một 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ể thấy một ví dụ về codepen làm việc.

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

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

Bạn đã học đượ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 cách bạn có thể 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.

Sử dụng tìm kiếm trang web đặc biệt trên Google, bạn chỉ có thể nhận được kết quả của Google cho trang web của mình.