Một Search box sẽ giúp ích rất nhiều cho người đọc khi muốn tìm kiếm thông tin trên blog của bạn. Có nhiều cách để đưa công cụ tìm kiếm vào blog của bạn. Có lẽ phổ biến nhất là công cụ tìm kiếm tùy chỉnh của Google. Tuy nhiên nếu bạn muốn có một Search box đơn giản của riêng mình thì sao. Bài viết này sẽ giúp bạn thực hiện điều đó.

Bạn đưa đoạn code sau vào phần HTML/JavaScrip.

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" value="Nhập từ khóa" name="q" size="24" onclick="this.value=''" type="text"/>
<input id="search-btn" value="Go" type="submit"/>
</form>

Bạn có thể thay đổi giá trị "Nhập từ khóa", "Go" bằng từ khác nếu muốn. Thay đổi độ rộng của ô nhập liệu tìm kiếm cho phù hợp (Size).
Thành phần onclick="this.value='' giúp cho cụm từ "Nhập từ khóa" biến mất khị đặt trỏ chuột vào ô nhập liệu.
Kết quả:


Nếu muốn thay giá trị "Go" bằng hình ảnh (một chiếc kính lúp chẳng hạn). Bạn thực hiện một chút thay đổi cho đoạn code bên trên.

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" value="Nhập từ khóa" name="q" size="24" onclick="this.value=''" type="text"/>
<input id="search-btn" style="margin-left: 5px; margin: 3px 0 0 5px;" src="http://i306.photobucket.com/albums/nn272/Talkvietnam/Search.png" value="search" type="image"/>
</form>

Kết quả: