{"id":225,"date":"2018-06-16T14:43:53","date_gmt":"2018-06-16T06:43:53","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=225"},"modified":"2018-09-09T12:56:16","modified_gmt":"2018-09-09T04:56:16","slug":"how-to-make-a-html-search-box-with-the-input-text-field-and-search-button-within-the-same-enclosing-box","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-make-a-html-search-box-with-the-input-text-field-and-search-button-within-the-same-enclosing-box\/","title":{"rendered":"How to make a HTML search box with the input text field and search button within the same enclosing box"},"content":{"rendered":"

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

Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search.<\/p>\n

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: <\/p>\n

\"Techcoil<\/p>\n

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. <\/p>\n

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.<\/p>\n

The HTML codes for rendering the HTML search box with the input text field and search button within the same enclosing box<\/h2>\n

Firstly, let us craft the HTML codes for rendering the HTML search box with the input text field and search button within the same enclosing box:<\/p>\n

\r\n<div class="site-search">\r\n    <form role="search" method="get" class="search-form" action="https:\/\/www.techcoil.com\/search">\r\n        <span class="screen-reader-text">Search Techcoil for:<\/span>\r\n        <input type="search" class="search-field" placeholder="Search Techcoil" name="q" title="Search Techcoil for">\r\n        <button type="submit" class="button"><span class="screen-reader-text">Submit<\/span>\r\n            <img src="\/ph\/img\/search-icon.png"\/>\r\n        <\/button>\r\n    <\/form>\r\n<\/div>\r\n<\/pre>\n
As shown above, the outermost div element (div.site-search<\/code>) is for serving as the enclosing box. <\/p>\n
Within the enclosing box, there is a HTML form that is marked with the role of being a search form. <\/p>\n
In addition, the form tells the browser to send a HTTP GET to the server endpoint<\/a> at https:\/\/www.techcoil.com\/search<\/a> when the user submits this form. <\/p>\n
Within the form<\/code> element, there are three other elements:<\/p>\n