Thanh tìm kiếm HTML CSS

Question

Hộp tìm kiếm có mặt khắp nơi trong mọi trang web. Nó thuận tiện cho việc tìm kiếm dữ liệu cụ thể. Nó có thể có các chức năng tự động hoàn thành để hỗ trợ người dùng tìm kiếm

Nội dung chính Show

Create search boxes
Kết quả
Create search boxes
Create search box

Trong đoạn mã này, chúng ta sẽ nói về cách tạo các hộp tìm kiếm bằng CSS và HTML từng bước

Tạo atag được sử dụng để thêm các biểu mẫu HTML vào trang web để người dùng nhập liệu
Thêm một thẻ trong phần tử
Ngoài ra, bao gồm trình giữ chỗ có nội dung "Tìm kiếm tại đây. " và một lớp "tìm kiếm"
Thêm cái khác với lớp "gửi" và giá trị "tìm kiếm"

Bây giờ, chúng ta có hộp tìm kiếm, nhưng chúng ta nên áp dụng một phong cách cho nó

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

Sau khi thêm tất cả các thuộc tính, hãy chạy mã và xem bạn đã tạo hộp tìm kiếm như thế nào



  
    Title of the document
    
  
  
    Create search boxes

Kết quả



  
    Awesome Search Box

Trong ví dụ đã cho, chúng tôi đã sử dụng biểu tượng Tìm kiếm từ Font Awesome

Hãy xem một ví dụ khác về hộp tìm kiếm được tạo bằng HTML và CSS thuần túy



  
    Title of the document
    
    
  
  
    Create search boxes



  
    Title of the document
    
  
  
    Create search box

Trong phần này, chúng ta sẽ viết phần mã HTML. Trong HTML, chúng tôi sẽ chỉ liên kết Biểu định kiểu và tệp JavaScript của chúng tôi. Thẻ đầu vào được sử dụng để tạo thanh tìm kiếm và nó bao gồm một số thuộc tính như loại, trình giữ chỗ, tên. Chúng tôi cũng cần một danh sách các vật phẩm chứa các tên động vật khác nhau cho phép chúng tôi tìm kiếm động vật thông qua danh sách này. Các lớp và ID được sử dụng trong thẻ sẽ được xác định trong biểu định kiểu bên dưới.

HTML

<html>

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0

<

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

2____9

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<<0>

<2____73

<2____75

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<7____70>

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4html2

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<_______85 html6html7html8 html9html7>1 >2html7>4>

<7____12>

>9

<

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

01>

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

05

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

08

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

09html7<1 <2html7<4 html9html7<7

<2______79____87

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

21

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

22html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

24>

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

28

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<>1

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

09html7>4>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

42>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<1>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<00>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<09>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<18>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<27>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<36>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<45>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<54>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<63>8>

<2______7>8 >9html7

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

41<72>8>

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<7____91>

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<81

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4<<84 <85html7<87<88<84>

<7____101>

>9

<7____8>

đầu ra

Sử dụng CSS

Mặc dù thẻ đầu vào ở trên và danh sách được sắp xếp có vẻ ổn, nhưng nó vẫn cần một số kiểu dáng. Đối với kiểu dáng của thanh tìm kiếm, một số lề và phần đệm được thêm vào để làm cho nó trông rõ ràng. Các phép đo được tính theo tỷ lệ phần trăm để nó tự điều chỉnh khi được sử dụng ở mọi kích thước màn hình (Di động, Máy tính để bàn, v.v.). Quá trình chuyển đổi Webkit được sử dụng để thay đổi độ rộng của thanh Tìm kiếm khi được nhấp vào. Độ rộng ban đầu của thanh tìm kiếm là 30%, nhưng khi được nhấp vào, nó sẽ thay đổi thành 70% với chuyển đổi dễ dàng vào dễ dàng là 0. 15 giây

CSS

<98<99

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0_______801____802html03html04

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0_______806html02html08html04

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0____811____812html04

html14html15

html14html17

html18html19____802html21html04

html18html24html25html26

html18html28html25html26

html14html15

html14html34

<2____836

html14html38

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0____819____802html42html04

html14html15

<98html47

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4html49____850html51html04

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4html01____802html56html04

html14html15

html60

html14html62html02html64html65

<98html67

Đầu ra
Sau khi thêm Kiểu dáng, trang của chúng ta sẽ trông như thế này.

Ghi chú. Nếu kiểu trang của bạn không thay đổi, hãy đảm bảo rằng kiểu. tệp css nằm trong cùng thư mục với chỉ mục. html.
Nó vẫn chưa hoàn thiện vì chúng tôi vẫn cần JavaScript để hoàn thành chức năng của thanh tìm kiếm này.

Sử dụng JavaScript

Trong mã HTML của thanh tìm kiếm, chúng tôi đã cung cấp đầu vào id=”searchbar” và onkeyup mà chúng tôi gọi là hàm “search_animal”. onkeyup gọi chức năng này mỗi khi nhả phím trên bàn phím.

Trước tiên, chúng tôi nhận đầu vào của mình bằng cách sử dụng getElementById. Đảm bảo chuyển đổi nó thành chữ thường để tránh phân biệt chữ hoa chữ thường trong khi tìm kiếm. Một mảng tài liệu được lưu trữ trong x. Điều này chứa mọi danh sách có id=”animals”. Sau đó, một vòng lặp được chạy để kiểm tra xem InternalHTML của mọi tài liệu có bao gồm chuỗi con đầu vào hay không, thuộc tính hiển thị được đặt thành 'Không' để nó ẩn ở giao diện người dùng.

Javascript

html68

html69 html70

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4html72____873html74

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4html76

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4html78html79html80

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

0

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4html83 html84

________ 72 ________ 886 ________ 887

html88html89html90html04

<2____815

________ 72 ________ 895 ________ 896

html88html89html99>00

<2____815

body {
  background-color: #8ebf42;
}

form {
  width: 400px;
  margin: auto;
  margin-top: 250px;
}

input {
  padding: 4px 10px;
  border: 0;
  font-size: 16px;
}

.search {
  width: 75%;
}

.submit {
  width: 70px;
  background-color: #1c87c9;
  color: #ffffff;
}

4____815

html15

đầu ra.

JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này

HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

programming html

Thanh tìm kiếm HTML CSS

Create search boxes

Kết quả

Create search boxes

Create search box

HTML

CSS

Javascript

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội