Using Multiple Search Engines From A Single HTML Form
April 6, 2018

Just two days ago, I removed the search bar from the top of every page on this site. I wanted to have more than one search engine but I did not have a compact way to do it. Then I thought of an input box for the search words followed by three buttons for each of the search engines, as can be seen above.

However, I did not want to handle the buttons with Javascript. I prefer avoiding scripts that can be disabled. Obviously, others had already found the way to do this, it was only necessary to concoct the magic incantation to obtain two good references from the usual search engines.

Form submitting data to new window and to two different pages
on plus2net before June 27, 2014.
Separate Form Submit Buttons That Go To Different URLs
by Chris Coyier on CSS-TRICKS, August 2, 2017.

Here is what ensued from this reading: a fairly simple HTML form.

<form name="sf" method="get" target="_blank" action=""> <input type="text" name="q" value="" size=25 onclick="this.value='';" placeholder="..." > <button type='submit' name="sites" value="">DuckDuckGo</button> <button type='submit' name="sitesearch" value="" onclick="sf.action=''; return true;">Google</button> <button type='submit' name="q1" value="" onclick="sf.action=''; return true;">Bing</button> </form>

The first three lines correspond roughly to a typical form for search. In fact, it's like the first one found here on the Archives page. The two other lines, defining the buttons associated with the other engines, are substantially the same except for the addition of the onclick attribute that redefines the form action. This is how the URL is modified to reach the targeted search engine. Differences in the values of the name and value attributes correspond to the different requirements of engines:

It's simple, it's clever and I would not have arrived at this solution without the help of others. Once again, thank you to everyone who generously shares their knowledge.