Question

I have a <form /> with a text box, and an <input /> button.

an example can be seen here: http://jsfiddle.net/94sJa/

I’d like to have another button to the right of the first button, but outside the context of the form. Its sole purpose is to reload the page, so it doesn’t need to be in the form. Plus, I don’t want to submit a search query when the user clicks Reset, as would be the case when they click Search.

Is there an easy way for me to align the two buttons?

for the sake of it, the HTML and CSS are here also:

<div class="layout-fund-search-groupfactsheet">

    <form method="get" action="/uk/groupfactsheet/schroders">
        <input type="text" value="" name="Search" id="Search" />

        <input type="submit" class="button-medium" value="Search" />
    </form>

    <input type="submit" class="button-medium" value="Reset" />
</div>

.layout-fund-search-groupfactsheet
{
    padding: 10px 20px;

    border: 1px solid #E7DFD0;

    height: 20px;    
}

.layout-fund-search-groupfactsheet input[type=text]
{
    width: 300px;
}

Answer 1

If you just need to reload the page with that button, you can well put it INSIDE the form and it would not make any problem. Just don’t add a name attribute to that reload button.

The actual reloading would be done by javascript (I guess), so no problem. Like this:

<form method="get" action="/uk/groupfactsheet/schroders">
        <input type="text" value="" name="Search" id="Search" />

        <input type="submit" class="button-medium" value="Search" />
        <input type="button" class="button-medium" value="Reset"
                               onclick="window.location.reload()" />
</form>

Working fiddle: http://jsfiddle.net/fthAS/