Tag archive for: input

How to make a HTML search box with the input text field and search button within the same enclosing box

Since Google had indexed most of the content from my website, Google Custom Search is the easiest way for me to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search.

In addition to building the search page to display the search result, there is a need for a HTML search box beside the top navigation links:

Techcoil search box as at 20180616

Since I had spent quite a bit of time on building the search box, I decided to document the steps in this post for future references.

With this intention, this is how to make a HTML search box with the input text field and search button within the same enclosing box.