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
2 - Phần tử này dành cho đầu vào của người dùngSearch
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ếmSearch
4 - Phần tử này sẽ gửi biểu mẫu và bắt đầu tìm kiếmSearch
Đây là giao diện của HTML
Search
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ẻ
Search
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
- Chúng ta cần thêm một
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ếmSearch
- Chúng tôi thêm thuộc tính
7 vào phần tửSearch
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”Search
Đây là HTML cuối cùng của chúng tôi
Search
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
Search
9Tiếp theo, chúng tôi thay đổi giao diện của hộp tìm kiếm đầu vào
Search
1Dò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ầnSau đó, 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
Search
3Cá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
Search
6Sau đó, chúng ta có thể tạo kiểu cho hai phần tử html này như thế này
Search
7Chú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 ứngSau đó, 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 Googleform {
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
Search
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
Search
3Nế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;
}
8Sau đó, 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
Search
6Dòng cuối cùng trong mã
Search
0Thê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
Search
1Cá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