Chắc hẳn bạn đã gặp rất nhiều các mẫu Tìm kiếm trong các website, và cũng chắc hẳn bạn sẽ nhận thấy một điều rõ ràng là các Mẫu hay các Form đa số đều tương tự nhau với môt nút mặc định màu xám chán ngắt.
Tuỳ chỉnh phong cách Style cho các Search form là không khó. Ban có thể sử dụng CSS để tuỳ chỉnh nút Search hoặc thay thế nó bằng một hình ảnh sẵn có.
Trong bài viết này xin hướng dấn các bạn thực hiện cách tạo phong cách đơn giản cho Search bằng cách thêm các dòng thông tin vào trong hộp tìm kiếm và thay đổi button của nó.
Như bạn thấy tiện ich Search widget là một dạng form, cấu trúc của nó bào gồm hộp tex box là nơi để bạn đánh, gõ văn bản tìm kiếm vào đó và một nút submit button hay tiếng việ mình có thể gọi là nút Tìm kiếm, ngoài ra cong một sô yếu tố tiềm ẩn để gửi thông tin tới máy chủ tìm kiếm thực hiện.
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Các yếu tố này được đánh dấu màu đỏ, trong đó yếu tố "search-box" là hộp chứa text mà người sử dụng gõ vào để tìm kiếm và "search-btn" là nút truy vấn tìm kiếm tới server.
Theo mặc định, tiện ích search sẽ có dạng dưới:
Tuy nhiên, bạn chỉ cần sử dụng một số tuỳ chỉnh mang tính kỹ thuật nhỏ, bạn có thể tuỳ chỉnh nó nhìn sẽ đẹp và chuyện nghiệp hơn!
Sử dụng CSS để định dạng style cho tiện ích search
Cách tuỳ chỉnh dễ dàng nhất là dụng CSS nội tuyến: nghĩa là tuỳ chỉnh search box và nút trong mã sử dụng cho search box.
Ví dụ: nếu bạn muốn hộp search box cps màu nền xanh blue và các border màu xanh đậm thì đơn giản bạn chỉ cần tuỳ chỉnh vài yếu tố code trong "search-box" giống như dưới:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Khi đó hộp search box có dạng dưới:
NGoài ra, bạn còn có thể tuỳ chỉnh nút Submit (Search) giống như trên, chẳng hạn bạn có thể thay đổi nút với màu nền sẫm và có border màu đỏ thì code có dạng:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>
Chú ý rằng: trong mã màu đỏ trên. "outset" được sử dụng thay cho "solid" đối với tính năng border; điều này giứp cho nút nhìn dễ dàng hơn, giúp người đọc nhìn vào dễ dàng hơn đối với nút thể hiện click để chọn tìm kiếm.
Hình dạng của hộp Search bõ có dạng dưới"":
Trên đây chỉ là ví t\dụ cho ban rõ hơn về việc tuỳ chỉnh các yếu tố trong code, bạn hoàn toàn có thể thay đổi các giá trị này để có được một hộp Search box độc đáo và đẹp mắt.
Thay đổi đoạn mã hiện trong form
Theo mặc định giá trị text trong hộp Search là trắng, không có giá trị nào hiển thị, tuy nhiên bạn có thể hoàn toàn thay đổi giá trị này để làm cho hộp sẻâch box có đoạn mã văn bản hiển thị hướng dẫn người tìm kiếm.
Ví dụ với đoạn mã dưới:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Bạn thêm vào value="Enter search terms" như trong code trên thì kết quả sẽ là:
Bạn có thể thay đổi tên của nút bằng các đoạn mã: Dưới đây là định nghĩa để nút Search hiển thị chữ “Search” :
<input id="search-btn" value="Search" type="submit"/>
Còn nếu bạn muốn thay đổi nút “Search” thành “Go” thì bạn có đoạn mã như sau:
<input id="search-btn" value="Go!" type="submit"/>
Sử dụng hình ảnh thay thế cho nút Search
Ngoài ra bạn cũng có thể thay đổi nút tìm kiếm “Search” bằng các hình ảnh. Nhưng trước tiên bạn phải có hình ảnh tương ứng phù hợp với chức năng tìm kiếm.
Bạn có thể tham khảo các hình ảnh nhỏ và biểu tượng icon (16x16px) hoặc lớn hơn tại Iconlet, hoặc bạn có thế download an icon pack và chọn lựa chúng.
Ví dụ với icon dưới đây:
Để dử dụng nó thay thế cho Nút tìm kiếm search, bạn có thể dùng đoạn mã có dạng sau:
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Enter search terms"/>
<input id="search-btn" value="Search" type="image" src="http://bloggerbuster.com/images/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>
Và hộp tìm kiếm sẽ có dạng:
Trên đây là toàn bộ thủ thuật giúp bạn tuỳ biến hộp tìm kiếm mà tôi được tham khảo và thử nghiệm. Mời các bạn tham khảo và cho ý kiến.
Theo VnPressNet
