Putting button outside form but in the same line of submit button

Question

I'm trying to put a button in the in the same line of a form.

<form name="search_form" method="get" action="results1.php">
Organism <select name="organism_list" size="1" id="organism_list" >
      <option selected="selected">All</option>
      <option id="human" name="organism_human">Human </option>
      <option id="mouse" name="organism_mouse">Mouse </option>
      <option id="rat"  name="organism_rat">Rat </option>
</select>        
Query <input name="query_textbox" type="text" id="textbox1" value="" />
<input name="search_button" type="submit" id="search_button" value="Go" />
</form>
<input name="ad_search_button" type="submit" id="ad_search_button" value="Advance Search" />

I want the ad_search_button to be adjacent to search_button. But due to the form it is not being placed at my desired position. What should I do?

Answer 1

if you cannot keep your input button ad_search_button inside the form, then you can make it position:absolute and adjust its top, right, left , bottom properties to come in line with the search_button .

Otherwise, these are the only two possibilities you got.

• make your entire form float:left , which will cause the 'ad_search_button' to come to the right of it. Also in this case, width of the entire form should be less than the total width of the screen, so that ad_search_button can be accomodated.

• or you can simply keep your ad_search_button inside the form. it should get rendered to the left of search_button

• ad_search_button kept inside

• ad_search_button kept outside

Answer 2

I would suggest changing that button to an anchor tag and then placing it inside the form, it will have no affect on the form then.

This is assuming that the advanced search doesnt have to be inside its own form (which in your example it is not)

eg

    <input name="search_button" type="submit" id="search_button" value="Go" />
    <a href="/ad_search.php">Advanced Search</a>
</form>

Keep it simple.

Answer 3

You could just put the whole thing in a table:

<table>
  <tr>
    <td><form>...</form></td>
    <td>other button here</td>
  </tr>
</table>

http://jsfiddle.net/V273j/

Answer 4

Put the buttons in a div inside the form, then add some css styling.

http://jsfiddle.net/25u4c/1/