In order to ensure that the browser does not highlight the input text field and button when they are being focused, we include the third CSS rule-set. Removing the border highlight on the input text field and button Creating the illusion that the search button is contained within the text input fieldįollowing that, the second CSS rule-set applies a Gray 80 1 pixel border around the outermost div to create the enclosing box. Hiding the text that are meant for screen readersįirstly, we include the first CSS rule-set ensures that the text that are meant for screen readers does not appear on the browser. Therefore, we need to include the following CSS codes to the web page: As a matter of fact, without CSS, the search box will look like the following:Īs can be seen, that is definitely not how we want the search box to look like. Undeniably, the CSS codes is the gist of making the input text and button appear inside an enclosing box. The CSS codes for styling the HTML search box with the input text field and search button within the same enclosing box Within the button HTML element there is another span element for screen readers and an HTML image that renders the magnifying glass.
Within the form element, there are three other elements: In addition, the form tells the browser to send a HTTP GET to the server endpoint at when the user submits this form. Within the enclosing box, there is a HTML form that is marked with the role of being a search form. The HTML codes for rendering the HTML search box with the input text field and search button within the same enclosing boxįirstly, 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:Īs shown above, the outermost div element ( div.site-search) is for serving as the enclosing box.
INPUT BUTTON TEXT HTML HOW TO
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. 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. 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: Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.
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. How to make a HTML search box with the input text field and search button within the same enclosing box
0 kommentar(er)
