On the computers that I use the most, the browser home page is an HTML file with links to my favorite pages and a “single” form that lets me search the sites that I search the most. I can enter a search term in the field for any of the sites, press Enter, and then that site gets searched. The two tricks that I use to create these fields have been handy enough that I thought I’d share them in case they’re useful to others.

I quote the word “single” above because it appears to be a single form but is actually multiple little forms in the HTML. Here is an example with four of my entries; enter something into any of the fields and press Enter to see what I mean:

wikipedia

The first two fields search the way most search forms do, by passing a search string as a parameter to some back end process. To add one of these fields to my form, I just had to look at the source of the actual website’s search form to find out what variable it was passing to what URL and then reproduce that in a little form around that field in my home page file. For Wikipedia, I set the form’s action attribute to “http://en.wikipedia.org/wiki/Special:Search" and the input element’s name attribute to “search”. This way, if I enter “foobar” in my version of their search field above, the form creates the URL https://en.wikipedia.org/wiki/Special:Search?search=foobar to perform the search, and it works. (The input field of the Wikipedia field also has the autofocus field set to “autofocus” so that when a browser displays the page, the cursor is in that field, and I can then just press Tab a few times to quickly get to the others.) For YouTube there’s a different URL and the search parameter variable name is “search_query”, so I set the name attribute on that second little form’s input element to have that value.

The third and fourth input fields above search websites with a more RESTful interface, so instead of passing a value in a particular variable name to a CGI script, they just construct a URL with the search term at the end. From within the form, this is actually trickier than the CGI way to do it because some JavaScript must be embedded into the form’s action attribute to concatenate the entered value onto the appropriate URL and then send the browser to the resulting URL. You can see how this is done with a View Source of this blog entry. (Note how verbose the JavaScript way to grab that form value is–I’d appreciate any suggestions for a simpler way.) You’ll also see that to send the browser to the appropriate destination, the form sets the href property of the window.location object to the new URL.

Just about all the search forms I’ve found fall into one of these two categories, so for my master search forms at home and at work I’ve also added fields to search Google Maps, JIRA, Amazon, and more. You can see three more examples at the end of my entry from last April, The Wikidata data model and your SPARQL queries.

It all makes a nice example of doing a little fun scripting, instead of real work, to save upwards of minutes a day!