CODEWITHSUNDEEP
htmlcss
Harish Pareek
Harish Pareek

Reputation: 120

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

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?

Upvotes: 0

Views: 2922

Answers (4)

FluxEngine
FluxEngine

Reputation: 13280

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

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

Upvotes: 0

Manish Mishra
Manish Mishra

Reputation: 12375

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

Upvotes: 1

ioums
ioums

Reputation: 1395

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/

Upvotes: 0

cowls
cowls

Reputation: 24334

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)

e.g.

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

Keep it simple.

Upvotes: 0

Related Questions