Multi Search Engine Form?

[hassified]

Hello,
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: https://codepen.io/hassified/pen/yLEpqRK

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.

[hbar1st]

Just make a second form element.

[hassified]

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

<!-- Start Search Form -->
<form name="sf" method="get" action="https://duckduckgo.com">
  <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='https://duckduckgo.com/?q=">DuckDuckGo</button>
    <button class="btn" type='submit' onclick="sf.action='https://www.google.com/search'; return true;">Google</button>
  </div>
</form>
<!-- End Search Form -->

You can see it here: https://codepen.io/hassified/pen/yLEpqRK

[hbar1st]

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

[hassified]

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?

[hassified]

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

<form method="get" action="http://www.google.com/search">
  <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="https://duckduckgo.com/?q=">DuckDuckGo</button>
  </div>
</form>

Again, you can see it here: https://codepen.io/hassified/pen/yLEpqRK

Thank you!