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