Placing two buttons on the same line in HTML

Here is my login form:

As you can see the sign in and register buttons are on separate lines. I want them on the same line.

I placed register button code in the same paragraph element as sign in. It appeared on same line no doubt but when I click register it's asking me to fill out the username and password. How do I fix this?

This is my code:

<form method="post" > 
<p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
<p> <input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
<p><input class="swd-button" type="submit" value="Sign In">
 </p>
</form>
<a href="register.html"><button class="swd-button">Register</button></a>

Answers


Simply re-arrange as follows and add a type to your button :

<form method="post" > 

    <p>
        <input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required>
    </p>
    <p>
        <input id="password" type="password" placeholder="Password" style="margin:10px" required>
    </p>
    <p>
       <input class="swd-button" type="submit" value="Sign In">
       <a href="register.html"><button type="button" class="swd-button">Register</button></a>
    </p>

</form>

Normally if you add a button inside a form, it will take it as a submit button to trigger submit the form. So you need to specify it as type="button".

Demo : http://jsbin.com/EjEbihUDu/2/


The real problem is that the button inside your link is intercepting click events. That's why it doesn't work when you put the second button as a sibling to the first.

To fix this, I suggest you remove the button from the link, style the link to look like a button and move it back into the same paragraph as the "Sign in" button, with both set to have display: inline-block.

Here's the jsFiddle demo.

HTML:

<form method="post" > 
    <p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
    <p><input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
    <p>
        <button class="swd-button" type="submit">Sign In</button>
        <a class="swd-button" href="register.html">Register</a>
    </p>
</form>

CSS:

.swd-button {
    background: #11c3ff linear-gradient(to bottom, transparent, #009bcf);
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    display: inline-block;
    font: bold 12px Arial, Helvetica, sans-serif;
    padding: 10px 15px;
    text-decoration: none;
    text-transform: uppercase;
}

Added:

.swd-button {
    float:left;
}

http://jsfiddle.net/2es59/


add class to the element that style="display:inline-block;"


Just put your register button inside the <p> tag

<p><input class="swd-button" type="submit" value="Sign In">
    <a href="register.html"><button class="swd-button">Register</button></a>
 </p>

Fiddle


simply use table tag and try to do like this...

<table>
<tr>
<td><input type="button" value="Login"></td>
<td><input type="button" value="Register"></td>
</tr>
</table>

you can create all elements in a table for suitable view.


i got my answer. thanks to Roy M J. had to include just the type attribute type="button" in button element.

Like this:

<a href="register.html"><button class="swd-button" type="button">Register</button></a>

so the full working code is:

<form method="post" > 
<p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
<p> <input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
<p><input class="swd-button" type="submit" value="Sign In">
    <a href="register.html"><button class="swd-button" type="button">Register</button></a>
</p>
</form>

<form method="post" > 
<p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>  
<p> <input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
<div><input class="swd-button" type="submit" value="Sign In">

</form>
<a href="register.html"><button class="swd-button">Register</button></a></div>

fiddle


Need Your Help

Linq Selecting rows from a view?

c# linq linq-to-sql

I have a view in my sql database and it's mapped in my dbml file. Lets call ituserview