Hướng dẫn về Thanh tìm kiếm HTML. Ở đây chúng tôi thảo luận về cách thanh tìm kiếm trong HTML hoạt động với các ví dụ để triển khai với các mã và kết quả đầu ra phù hợp.

Bạn đang xem : thanh tìm kiếm hoạt động html

Thanh tìm kiếm HTML

Giới thiệu về Thanh tìm kiếm HTML

Thanh Tìm kiếm trong HTML là một trường văn bản để tìm kiếm nội dung nếu chúng ta biết từ khóa ở giữa câu thực tế. Nói chung, hộp tìm kiếm luôn được thêm vào trong thanh điều hướng. Chúng tôi cũng có thể thêm các nút, danh sách thả xuống và neo trong thanh điều hướng theo yêu cầu của khách hàng, cùng với hộp tìm kiếm. Nói chung, nó được đưa lên đầu trang để dễ điều hướng. Nó sẽ được tạo bởi & lt; input class = ”form-control” type = ”text” placeholder = ”Search” & gt ;. Tùy theo yêu cầu của khách hàng, màu sắc thiết kế sẽ khác nhau.

  • Tình huống thời gian thực: Ngày nay, hầu như tất cả các trang web đang sử dụng thanh điều hướng đều có cùng một điểm.
  • Ví dụ: https://www.educba.com/ từ trang web này, bạn có thể thấy bên dưới thanh tìm kiếm.

websites

Bắt đầu Khóa học Phát triển Phần mềm Miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Tại sao chúng tôi sử dụng CSS trong HTML?

Cung cấp Logic chung giữa tất cả các trang; thay vì viết cùng một kiểu logic trong mỗi trang HTML, chúng tôi sử dụng tệp CSS để viết logic chung. Và bao gồm trang CSS này trong mỗi trang HTML với & lt; liên kết & gt; thẻ.

Thanh Tìm kiếm hoạt động như thế nào trong HTML?

Điều này được sử dụng để tìm kiếm nội dung theo bất kỳ từ khóa nào; nếu từ khóa tìm kiếm được tìm thấy trên trang, kết quả sẽ được hiển thị. Nó có thể được thiết kế theo cú pháp dưới đây.

Cú pháp:

  & lt; div class = "navBar" & gt;
& lt; a class = "active" href = "#" & gt; Link1 & lt; / a & gt;
& lt; a href = "#" & gt; Link2 & lt; / a & gt;
& lt; a href = "#" & gt; Link3 & lt; / a & gt;
& lt; a href = "#" & gt; Link4 & lt; / a & gt;
.
.
.
.
& lt; input type = "text" placeholder = "tìm kiếm ở đây" & gt;
& lt; / div & gt;  

Ví dụ

Dưới đây là các ví dụ:

1. Thanh tìm kiếm

Mã:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Thanh Tìm kiếm & lt; / title & gt;
& lt; phong cách & gt;
h1 {
text-align: center;
màu sắc: xanh lam;
}
* {
dàn ý: không có;
}
html, nội dung {
chiều cao: 100%;
chiều cao tối thiểu: 100%;
}
thân hình {
lề: 0;
màu nền: nâu;
}
.tableBar {
hiển thị: bảng;
chiều rộng: 100%;
}
.tableDivision {
display: table-cell;
vertical-align: giữa;
}
đầu vào, nút {
lề: 0;
viền: 0;
background-color: trong suốt;
màu xanh lá cây;
font-family: sans-serif;
đệm: 0;
}
.đứng đầu {
vị trí: tuyệt đối;
top: 50%;
bán kính đường viền: 20px;
biến đổi: thang đo (0,6);
margin: -83px auto 0 auto;
nền-màu: trắng;
trái: 0;
đúng: 0;
chiều rộng: 550px;
box-shadow: 0 10px 40px aqua, 0 0 0 20px blue;
đệm: 35px;
}
hình thức {
chiều cao: 96px;
}
input [type = "text"] {
font-size: 60px;
chiều cao dòng: 1;
chiều rộng: 100%;
chiều cao: 96px;
}
input [type = "text"] :: placeholder {
màu đỏ;
}
#mã số của tôi {
padding-left: 35px;
chiều rộng: 1px;
}
cái nút {
chiều rộng: 84px;
chiều cao: 96px;
con trỏ: con trỏ;
chức vụ: thân nhân;
hiển thị: khối;
}
#myCircle {
chiều cao: 43px;
margin-top: 0;
chiều rộng đường viền: 15px;
chức vụ: thân nhân;
đầu trang: -8px;
border: 15px solid #fff;
background-color: trong suốt;
bán kính biên giới: 50%;
trái: 0;
chiều rộng: 43px;
chuyển tiếp: 0,5 giây dễ dàng tất cả;
background-color: trong suốt;
bán kính biên giới: 50%;
}
nhịp nút {
vị trí: tuyệt đối;
đầu trang: 68px;
bán kính đường viền: 10px;
biến đổi: xoayZ (52deg);
chuyển tiếp: 0,5 giây dễ dàng tất cả;
chiều rộng: 45px;
trái: 43px;
hiển thị: khối;
chiều cao: 15px;
background-color: trong suốt;
hiển thị: khối;
}
nút nhịp: trước, nhịp nút: sau {
Nội dung: '';
vị trí: tuyệt đối;
màu nền: #fff;
bán kính đường viền: 10px;
đáy: 0;
đúng: 0;
biến đổi: xoayZ (0);
chuyển tiếp: 0,5 giây dễ dàng tất cả;
chiều rộng: 45px;
chiều cao: 15px;
chuyển tiếp: 0,5 giây dễ dàng tất cả;
}
#myID: di chuột #myCircle {
đầu trang: -1px;
chiều rộng: 67px;
chiều cao: 15px;
chiều rộng đường viền: 0;
màu nền: #fff;
bán kính đường viền: 20px;
}
#myID: nhịp di chuột {
top: 50%;
chiều rộng: 25px;
margin-top: 3px;
trái: 56px;
biến đổi: xoayZ (0);
}
#myID: thời lượng nút di chuột: trước {
biến đổi: xoayZ (52deg);
dưới cùng: 11px;
}
#myID: nhịp nút di chuột: sau {
dưới cùng: -11px;
biến đổi: xoayZ (-52deg);
}
#myID: nhịp nút di chuột: trước, #myID: nhịp nút di chuột: sau {
phải: -6px;
chiều rộng: 40px;
nền-màu: vôi;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Tìm kiếm Nội dung bằng Thanh Tìm kiếm & lt; / h1 & gt;
& lt; div class = "top" & gt;
& lt; form method = "get" action = "#" & gt;
& lt; div class = "tableBar" & gt;
& lt; div class = "tableDivision" & gt;
& lt; input type = "text" placeholder = "Tìm kiếm tại đây" bắt buộc & gt;
& lt; / div & gt;
& lt; div class = "tableDivision" id = "myID" & gt;
& lt; button type = "submit" & gt;
& lt; div id = "myCircle" & gt; & lt; / div & gt;
& lt; span & gt; & lt; / span & gt;
& lt; / nút & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / form & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Thanh tìm kiếm HTML - 2

2. Thanh Tìm kiếm Hoạt hình

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Thanh Tìm kiếm & lt; / title & gt;
& lt; phong cách & gt;
@import url (https://fonts.googleapis.com/css?family=Open+Sans);
thân hình {
nền: trắng;
font-family: tưởng tượng;
}
h1 {
màu đỏ;
text-align: center;
}
.chính {
đường viền: màu nâu đặc 2px;
font-size: 28px;
màu: hạt dẻ;
chiều rộng: 600px;
lề: 150px;
}
.searchTop {
chiều rộng: 100%;
hiển thị: flex;
chức vụ: thân nhân;
}
.Thanh tìm kiếm {
chiều rộng: 100%;
biên giới: hải quân rắn 3px;
chiều cao: 20px;
bán kính đường viền: 5px 0 0 5px;
border-right: không có;
đệm: 5px;
dàn ý: không có;
màu xanh lá cây;
}
.searchBar: tiêu điểm {
màu tím;
}
.nút tìm kiếm {
chiều rộng: 40px;
chiều cao: 36px;
font-size: 20px;
text-align: center;
màu trắng;
border: 1px màu xám đặc;
bán kính đường viền: 0 5px 5px 0;
con trỏ: con trỏ;
nền: màu xám;
bán kính đường viền: 0 5px 5px 0;
con trỏ: con trỏ;
}
.topDiv {
chiều rộng: 30%;
top: 50%;
trái: 50%;
biến đổi: dịch (-50%, -50%);
vị trí: tuyệt đối;
trái: 50%;
biến đổi: dịch (-50%, -50%);
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Thanh Tìm kiếm Hoạt hình với Một số Nội dung & lt; / h1 & gt;
& lt; div class = "topDiv" & gt;
& lt; div class = "searchTop" & gt;
& lt; input type = "text" class = "searchBar"
placeholder = "Nhập một số văn bản để tìm kiếm?" & gt;
& lt; button type = "submit" class = "searchButton" & gt;
& lt; i class = "" & gt; & lt; / i & gt;
& lt; / nút & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; div class = "main" & gt; Ngày nay, hầu như tất cả các trang web đều
Sử dụng thanh điều hướng đang có thanh tìm kiếm HTML. Thí dụ:
https://www.educba.com/.</div>
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Navigation

3. Thanh Tìm kiếm Hoạt hình

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Thanh Tìm kiếm & lt; / title & gt;
& lt; phong cách & gt;
h1
{
màu: hạt dẻ;
text-align: center;
}
thân hình {
background-image: linear-gradient (sang phải, xanh lục, nâu);
}
.topDiv {
vị trí: tuyệt đối;
top: 50%;
trái: 50%;
biến đổi: dịch (-40%, 40%);
chiều cao: 40px;
bán kính đường viền: 40px;
đệm: 10px;
nền: # 2f3640;
bán kính đường viền: 40px;
đệm: 10px;
}
.topDiv: di chuột & gt; .searchBar {
chiều rộng: 250px;
đệm: 0 5px;
}
.topDiv: di chuột & gt; .button {
nền: trắng;
màu sắc: xanh lam;
}
.cái nút {
màu đỏ;
float: phải;
chiều cao: 45px;
bán kính biên giới: 50%;
nền: nước;
chiều rộng: 45px;
justify-content: trung tâm;
align-các mục: trung tâm;
chuyển tiếp: 0,35s;
hiển thị: flex;
align-các mục: trung tâm;
chuyển tiếp: 0,35s;
}
.Thanh tìm kiếm {
biên giới: không có;
nền: không có;
float: trái;
đệm: 0;
màu trắng;
dàn ý: không có;
chuyển tiếp: 0,4s;
chiều cao dòng: 40px;
font-size: 16px;
chiều rộng: 0px;
chiều cao dòng: 40px;
đệm: 0;
màu trắng;
}
@media screen and (max-width: 630px) {
.topDiv: di chuột & gt; .searchBar {
chiều rộng: 160px;
đệm: 0 5px;
}
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 & gt; Thanh Tìm kiếm Hoạt hình có bán kính & lt; / h1 & gt;
& lt; div class = "topDiv" & gt;
& lt; input class = "searchBar" type = "text" name = "" placeholder = "Tìm kiếm" & gt;
& lt; button class = "button" href = "#" & gt;
& lt; i class = "material-icon" & gt; tìm kiếm & lt; / i & gt;
& lt; / nút & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Hoạt ảnh với bán kính

Giải thích: Khi chúng tôi nhấp, di chuyển con trỏ vào nút tìm kiếm, sau đó nó có thể mở một trường văn bản để nhập một số nội dung.

Kết luận

Nó được sử dụng để tìm kiếm nội dung trong cùng một trang hoặc toàn bộ trang bằng cách sử dụng các chức năng khác nhau. Chúng tôi cũng có thể thêm một số hoạt ảnh và màu sắc vào thanh tìm kiếm bằng cách sử dụng các thuộc tính CSS.

Các bài báo được đề xuất

Đây là hướng dẫn về Thanh Tìm kiếm HTML. Ở đây chúng tôi thảo luận về cách thanh tìm kiếm trong HTML hoạt động với các ví dụ để triển khai với các mã và kết quả đầu ra phù hợp. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề html thanh tìm kiếm đang hoạt động

HCJ#1 – Tạo thanh tìm kiếm animation bằng HTML-CSS-JS (create a search bar by web tech)

alt

  • Tác giả: Crazy Code
  • Ngày đăng: 2020-08-16
  • Đánh giá: 4 ⭐ ( 1409 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Do mới làm nên code còn hơi chậm, ae thông cảm ^^.
    Từ này mình sẽ đi theo hướng web nên mình sẽ thường xuyên ra video về design 1 cái gì đó bằng HTML, CSS và JS nha.
    Nếu thích thì nhớ đăng kí, xin 1 like luôn :3 (bấm1 lần thôi chứ k phải bấm 2 lần nhaaaaaaa)

    Web tech: HTML, Css, Js
    Framework: Jquery

    Link của SVG file trong video: (Các bạn download về rồi import vào)
    https://www.flaticon.com/free-icon/search_565590?term=search&page=1&position=6

    Mình sẽ không đăng source code, bởi vì nếu bạn thực sự muốn cải thiện khả năng code thì hãy code theo, bạn sẽ ngẫm được nhiều điều ^^

Google – Tùy chỉnh hoạt động tìm kiếm

  • Tác giả: www.google.com.vn
  • Đánh giá: 3 ⭐ ( 2312 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo thanh tìm kiếm co dãn với HTML và CSS

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 4086 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo thanh tìm kiếm co dãn với HTML và CSS, bạn sẽ học được cách tạo thanh tìm kiếm co dãn với HTML và CSS rất nhanh

Hướng tạo Ô tìm kiếm trong html, hướng dẫn tạo hộp tìm kiếm bằng bootstrap

  • Tác giả: jdomain.vn
  • Đánh giá: 4 ⭐ ( 4064 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Search component là một thành phần quan trọng trong trang web, Nó giúp người dùng dễ dàng có thể tìm thấy nội dung mà họ mong muốn ở trong website của bạn

Tạo thanh tìm kiếm co dãn với HTML và CSS

  • Tác giả: hoctapsgk.com
  • Đánh giá: 4 ⭐ ( 7579 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo thanh tìm kiếm co dãn với HTML và CSS, bạn sẽ học được cách tạo thanh tìm kiếm co dãn với HTML và CSS rất nhanhTrang tài liệu, đề thi, kiểm tra website giáo dục Việt Nam. Giúp học sinh rèn luyện nâng cao kiến thức.

Thực hành CSS với một Form Tìm kiếm

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 5 ⭐ ( 1971 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, chúng ta sẽ khám phá cách trang trí một form tìm kiếm đơn giản. Chúng ta sẽ không làm bất cứ điều gì cao siêu cả, thay vào đó khám phá bốn cách khác nhau để có thể trang…

Cách hoạt động của bộ máy tìm kiếm Google

  • Tác giả: atpsoftware.vn
  • Đánh giá: 4 ⭐ ( 9696 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cơ chế hoạt động của bộ máy tìm kiếm Google. Để SEO website lên TOP cần có rất nhiều yếu tố kỹ thuật, con người, tài chính…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  27 Ví dụ về Gradient Nền CSS Phong cách - mã nền gradient css

By ads_php