Html Form With Side By Side Input Fields

I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last

Solution 1:

Put style="float:left" on each of your divs:

<divstyle="float:left;">...........

Example:

<divstyle="float:left;"><labelfor="username">First Name</label><inputid="user_first_name"name="user[first_name]"size="30"type="text" /></div><divstyle="float:left;"><labelfor="name">Last Name</label><inputid="user_last_name"name="user[last_name]"size="30"type="text" /></div>

To put an element on new line, put this div below it:

<divstyle="clear:both;">&nbsp;</div>

Of course, you can also create classes in the CSS file:

.left{
  float:left;
}

.clear{
  clear:both;
}

And then your html should look like this:

<divclass="left"><labelfor="username">First Name</label><inputid="user_first_name"name="user[first_name]"size="30"type="text" /></div><divclass="left"><labelfor="name">Last Name</label><inputid="user_last_name"name="user[last_name]"size="30"type="text" /></div>

To put an element on new line, put this div below it:

<divclass="clear">&nbsp;</div>

More Info:

• CSS Float Clear Tutorial

Solution 2:

The default display style for a div is "block." This means that each new div will be under the prior one.

You can:

Override the flow style by using float as @Sarfraz suggests.

or

Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the "last_name" field

<formaction="/users"method="post"><divstyle="margin:0;padding:0"><div><labelfor="username">First Name</label><inputid="user_first_name"name="user[first_name]"size="30"type="text" /><labelfor="name">Last Name</label><inputid="user_last_name"name="user[last_name]"size="30"type="text" /></div>
  ... rest is same

Solution 3:

For the sake of bandwidth saving, we shouldn't include <div> for each of <label> and <input> pair

This solution may serve you better and may increase readability

<divclass="form"><labelfor="product_name">Name</label><inputid="product_name"name="product[name]"size="30"type="text"value="4"><labelfor="product_stock">Stock</label><inputid="product_stock"name="product[stock]"size="30"type="text"value="-1"><labelfor="price_amount">Amount</label><inputid="price_amount"name="price[amount]"size="30"type="text"value="6.0"></div>

The css for above form would be

.form > label
{
  float: left;
  clear: right;
}

.form > input
{
  float: right;
}

I believe the output would be as following:

Solution 4:

I would go with Larry K's solution, but you can also set the display to inline-block if you want the benefits of both block and inline elements.

You can do this in the div tag by inserting:

style="display:inline-block;"

Or in a CSS stylesheet with this method:

div { display:inline-block; }

Hope it helps, but as earlier mentioned, I would personally go for Larry K's solution ;-)

Solution 5:

You should put the input for the last name into the same div where you have the first name.

<div>
    <label for="username">First Name</label>
    <input id="user_first_name" name="user[first_name]" size="30"type="text" />
    <input id="user_last_name" name="user[last_name]" size="30"type="text" />
</div>

Then, in your CSS give your #user_first_name and #user_last_name height and float them both to the left. For example:

#user_first_name{
    max-width:100px; /*max-width for responsiveness*/float:left;
}

#user_lastname_name{
    max-width:100px;
    float:left;
}