Multi Search Engine Form?

Is it possible to use only html and css to build a form that has one input field but two buttons. Depending on the button, you’ll get different engine results?

You can see my form on codepen here:

You can see it’s a basic search form but I would like to also have a button to search a different search engine. Like the google button, the results can show on that engines page.

Thanks in advance.

Just make a second form element.

1 Like

I think I got it? Is this the best way to achieve what I want?

<!-- Start Search Form -->
<form name="sf" method="get" action="">
  <input class="search-input" type="text" name="q" size=31 maxlength=255 onclick="this.value='';" value="">
  <div class="search-btn">
    <button class="btn" type='submit' name="sites" onclick="sf.action='">DuckDuckGo</button>
    <button class="btn" type='submit' onclick="sf.action=''; return true;">Google</button>
<!-- End Search Form -->

You can see it here:

that’s using javascript now. I thought you only wanted html/css?

1 Like

Yeah, I’m lost. I found an example on some page and pieced that together. I don’t want java script and I’m not familiar with it.

But it was the only way I could figure it out. Any ideas? Anyone?

I think I was over thinking and over complicated it. This is correct now, right? Should work in any browser?

<form method="get" action="">
  <input class="search-input" type="text" name="q" size=31 maxlength=255 value="">
  <div class="search-btn">
    <button class="btn" type="submit">Google Search</button>
    <button class="btn" type="submit" formaction="">DuckDuckGo</button>

Again, you can see it here:

Thank you!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.