Thứ Ba, ngày 08 tháng 12 năm 2015

Share CODE tìm kiếm (Search Form) Đẹp với CSS3 và HTML

Để tăng thêm tính thẫm mỹ độc đáo cũng như tính chuyên nghiệp thì ngày càng có nhiều design thiết kế ra những hiệu ứng bắt mắt từ CSS3HTML. Mình cũng không muốn nói nhiều về cấu trúc mà ở đây là sự kết hợp hài hòa. Bạn nào thích có thể sử dụng. Lưu ý các bạn cũng nên so sánh xem giao diện của web mình như thế nào để đưa vào cho phù hợp. Một số css có thể xung đột nên các bạn cần đặc biệt lưu ý
Hầu hết trên các website đều có một phần không thể thiếu đó là Search Form (Khung tìm kiếm) với chức năng tìm kiếm nội dung trong website. Ở đây tôi không bàn đến vấn đề action của form search, mà chỉ tập trung vào một số mã CSS và HTML để thiết kế môt khung tìm kiếm đơn giản mà bắt mắt hơn rất nhiều so với khung các mẫu form mặc định.


Kiến thức cần có: CSS/HTML
Dưới đây là mã HTML của khung tìm kiếm tại trang CSS 
1<div id="search">
2<form class="searchform" action="" method="get">
3<input class="s" onfocus="if (this.value == 'Search this website …') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website …';}" type="text" name="s" value="Search this website …" />
4<input class="searchsubmit" type="submit" value="Search" />
5</form>
6</div>
Về cơ bản chỉ cần mã HTML như thế là search form cũng có thể hoạt động được. Tuy nhiên lại không có tính thẩm mỹ cao. Vì thế chúng ta cần viết thêm vài dòng CSS để có được kết quả như mong muốn.
01.searchform {
02floatleft;
03margin-top20px;
04border:#00afdd 2px solid;
05height:27px;
06width:350px;
07}
08.searchform input[type=text]
09 
10 
11 
12 
13 
14 
15 
16{
17width:270px;
18height:21px;
19border:0px;
20background:#ffffff;
21float:left;
22margin:0px;padding:3px;
23}
24.searchform input[type=submit]
25 
26 
27 
28 
29 
30 
31{
32border:#00afdd 2px solid;
33float:right;
34margin:2px 2px 2px 2px;
35height:23px;
36padding-top:1px;
37background:#4fbfdc;
38}
Đoạn css trên ảnh hưởng trực tiếp đến 3 đối tượng class, tôi sẽ giải thích cụ thể từng phần bên dưới.
1. searchform
Class này tác động đến thẻ HTML <form> cấu hình các thông tin như viền ngoài (border) màu xanh. Căn các lề trên dưới trái phải (margin). Chiều rộng (width) và chiều cao (height) của form.
2. searchform input[type=text] 
Khung nhập từ khóa, thẻ <input type=”text” />. Tạo ra một khung nhập dữ liệu chìm trong <form> searchform phía trên.
3.searchform input[type=submit]
Phần còn lại của bộ tìm kiếm, nút submit. Với các thông số như màu nền (background) giúp nổi nật nút này lên.
Bạn có thể dùng đoạn mã hoàn chỉnh bên dưới để kiểm nghiệm lại khung search này:
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...l.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05<title>Search Form Test</title>
06<style>
07.searchform {
08float: left;
09margin-top: 20px;
10border:#00afdd 2px solid;
11height:27px;
12width:350px;
13}
14.searchform input[type=text]
15 
16 
17 
18 
19 
20 
21 
22{
23width:270px;
24height:21px;
25border:0px;
26background:#ffffff;
27float:left;
28margin:0px;padding:3px;
29}
30.searchform input[type=submit]
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48{
49border:#00afdd 2px solid;
50float:right;
51margin:2px 2px 2px 2px;
52height:23px;
53padding-top:1px;
54background:#4fbfdc;
55}
56</style>
57</head>
58<body>
59<div id="search">
60<form class="searchform" action="" method="get">
61<input class="s" onfocus="if (this.value == 'Search this website …') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website …';}" type="text" name="s" value="Search this website …" />
62<input class="searchsubmit" type="submit" value="Search" />
63</form>
64</div>
65</body>
66</html>
Nếu mọi thứ hoàn hảo, bạn đã có một search form tương tự như codeSEO đang sử dụng. Chúc các bạn thành công, nếu có thắc mắc hoặc cần hỗ trợ xin vui lòng comment phía dưới bài viết này.