Tag archive for: HTML form

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:

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.

How to use jQuery to intercept form submissions and validate form input

There came a time where I had to create a HTML form to accept inputs from users in order to generate a report. Before submitting the form to the back end server, there are some validations that I can perform on the data at the client side to reduce the number of HTTP responses that my server had to generate for unwanted inputs. The cost savings is especially significant when the form submission contains large file as part of the HTTP request.

I chose to use jQuery for intercepting the form submissions and do some data validation before I allow the browser to create a HTTP request to the server. This post documents a proof of concept, as a stepping stone, to realize my objective.