Tạo thanh tìm kiếm trong HTML và CSS
Khi học HTML và CSS bài tập tạo thanh tìm kiếm rất cần thiết cho người mới. Hơn nữa trên mọi website đều có Form tìm kiếm vì thế bài viết này sẽ hướng dẫn bạn làm chức năng tìm kiếm trong HTML đơn giản.
Đều tiên bạn cần phải nắm được kiến thức về Form trong HTML. Cách viết một Search Form như sau:
<div class="wrap">
<form action="" class="search" method="post">
<input type="text" class="searchTerm" placeholder="Bạn muốn tìm gì?">
<button type="submit" class="searchButton">
Submit
</button>
</form>
</div>Nhìn qua đoạn code HTML bạn sẽ thấy
- bắt đầu bằng <form
- tiếp đến là action=””
- method là phương thức gửi form
- Bên trong đó là <input là trường để điền thông tin
- placeholder là đoạn văn bản chìm xuất hiện trong input
- Thẻ <button dùng để gửi thông tin đi sau khi điền đầy đủ vào input
Tiếp theo đó bạn cần Style bằng CSS cho đẹp mắt hơn
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00B4CC;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
width: 100px;
height: 36px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.wrap{
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Và kết quả cuối cùng sẽ như sau:
Trông cũng khá đẹp mắt đấy nhỉ!
Cách thức tạo form tìm kiếm trong HTML và CSS tương đối đơn giản đúng không nào. Đầu tiên bạn chỉ cần viết mã HTML cho thêm class vào, tiếp đến bạn sẽ vận dụng những kiến thức CSS đã học được như width, height, position, border, color vv…
Lời kết: Bài viết này là một phần kiến thức học HTML căn bản mà người mới nào khi tìm hiểu về lập trình website đều phải nắm vững. Với những gì mình đã chia sẻ hi vọng sẽ giúp bạn từng bước từng bước làm chủ được HTML trong tương lai không xa.
