How do i put the element in same line if i put it outside a form

Question

I want the register button to be in same line as login but it wont work when it is placed outside of the form.

<div style="float:right;min-width:440px;width:30%;padding-top:30px;">
<form>
Username:<input name="username" type="text" name="username" style="min-width:120px;"></input>
Password:<input name="password" type="text" name="password" style="min-width:120px;"></input>
<input type="submit" value="Login"></input>
</form>
<button>Register</button>
</div>

Answer 1

Deried from Vitorino Fernandes' comment. Try following -

<div style="float:right;min-width:440px;width:30%;padding-top:30px;">
<form>
    Username:<input name="username" type="text" name="username" style="min-width:120px;"></input><br />
Password:<input name="password" type="text" name="password" style="min-width:120px;"></input>
    <br /> <input type="submit" value="Login"></input>
</form>
    <button style="position:absolute; left:140px; top:80px">Register</button>
</div>

Answer 2

I'm guessing that you want to put the button outside the form since you don't want to submit the form on clicking the Register button.

This can be achieved by keeping the register button inside the form - use this for the register button:

<input type="button" value="Register"></input>

Check this JSFiddle. The form will submit on clicking the login button but it won't submit on clicking the register button.

Also see: Difference between <input type='button' /> and <input type='submit' />

Answer 3

Try This : JSFIDDLE

<div style="float:right;min-width:565px;width:30%;padding-top:30px;">
<form style="float:left">
Username:<input name="username" type="text" name="username" style="min-width:120px;"></input>
Password:<input name="password" type="text" name="password" style="min-width:120px;"></input>
<input type="submit" value="Login"></input>
</form>
<button  style="float:left">Register</button>
</div>