html form content and css alignment issues

Question

I have a user registration form with a submit button and a cancel button,

Problem 1) I can't have those two buttons inside the single form, if I have the cancel button inside the form with submit button , when I click the cancel button , it execute the action of the form instead of going to home and cancelling the registration page.

Can't we have these two buttons inside a single form..?

Problem 2) Because of Problem 1, I added the cancel button outside the form and linking to the home page, it works as I expect, but, I need to have those two button in the same row on the screen.

<div id="main-content">
    <div id="login-container">
        <form id="user-registration-form" method="POST">
            // Some other fields, like username, etc.
            <fieldset class="edit" id="submit-button-fieldset">

                <input type="submit" id="submit-regiser"/>

            </fieldset>

        </form>
        <fieldset id="Cancel-field">
          <button id='cancel-registration' onclick=window.location.href='link-to-home'>Cancel</button>
        </fieldset>
      </div>
  </div>

I need to have those #submit-regiser and #cancel-registration in the same row in the screen. And this is for mobile browser, so should obey XHTML rules

Thanks in advanced.

Answer 1

That's the intended behavior. Cancel buttons are supposed to clear the form, not to take one back to what page ever.

Still you can do it this way using the <button> element:

<form id="user-registration-form" method="POST">
    <fieldset class="edit" id="submit-button-fieldset">
        <button type="submit" id="submit-regiser">submit</button>
        <button id="cancel-regiser" onClick="window.location.href='http://example.com'; return false;">Back</button>
    </fieldset>
</form>