i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.
So far i have:
<form action="#">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
http://jsfiddle.net/A8RaG/
So i need inputs on the same line and labels must be on the top of each input.
How do i do that?
Another solution is putting a div around each label/input combination and setting the css to float left
HTML
<form action="#">
<div>
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div>
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
CSS
form div{
float: left
}
jsFiddle
you can put a div around each label and block, and in the css put this div in inline-bloc
like :
<form action="#">
<div class = "css">
<label for="city">City</label>
<input type="text" id="city"/>
</div><div class="css">
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
and in the CSS:
.css{
display : inline-block;
}
You could also just use <br />. It will work for a form as well.
If you use Bootstrap you need to use the css of bootstrap !
Use class="form-horizontal" or class="form-inline"
You can try this with no css added :
<form action="#" class="form-horizontal">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
Simple no ?
Related
When using several forms control together with "fieldset" tag the line around them doesn't appear. I have tried it in Firefox, Chrome, Explorer and Safari and the same thing happens in all of them. This is the code I am using for it:
<form name="form" id="form" method="get">
<fieldset>
<legend>Contact details:</legend><br>
<label for="name">Name:</label>
<input type="text" name="nom" id="name"><br><br>
<label for="surname">Surname:</label>
<input type="text" name="ape" id="surname"><br><br>
<label for="age">Age:</label>
<input type="number" name="ed" id="age" min="1" max="95"><br><br>
<label for="email">Email:</label>
<input type="email" name="em" id="email"><br><br>
<input type="submit">
</fieldset>
</form>
Are you using bootstrap? i have tried to comment out bootstrap link from my file and the fieldset border appear.
If you included Bootstrap you might need some additional customization.
thats my code
<form class="contactForm">
<label> Your name
<input type="text" name="name" placeholder="Your name">
</label>
</form>
I want my input element to be shown beneath my label element. Thought its a problem of block element but when i style in css input or label to be shown as a block nothing happens. Thanks for help
While the label can be setup that way, try making it the input's sibling instead of parent. Also, give it the for attribute to match an input's name attribute.
<form class="contactForm">
<label for="name">Your name</label>
<input type="text" style="display:block" name="name" placeholder="Your name">
</form>
Once the label is being used like this, you can see display:block works as intended. Just want to add: in a final solution it's poor practice to use style tags directly, and I recommend creating easy to understand CSS classes.
Hope that helps.
A <span> with display: block set on it should do the trick - and, unlike using a <div>, it's valid HTML. Just make sure the parent label isn't still set to display: inline - which is default.
Example:
label,
label > span {
display: block;
}
<form>
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
Would a <br /> work?
<form class="contactForm">
<label> Your name
<br />
<input type="text" name="name" placeholder="Your name">
</label>
</form>
<form class="contactForm">
<label> Your name
<input style="display:block;" type="text" name="name" placeholder="Your name">
</label>
</form>
The text in the label doesn´t have a tag. If you add a <span>, you can add some style to that.
label span{
display: block;
}
<form class="contactForm">
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
You just have to use the input fields within div
<form class="contactForm">
<label> Your name </label>
<div>
<input type="text" name="name" placeholder="Your name">
</div>
</form>
My current code is :
<div class="row" id="loginForm">
<p>Username : </p>
<input type="text" class="form-control input" id="usr">
</div>
This shows the input box in the next line, how can i display the p tag and the input box on the same line?
Paragraphs are usually displayed as a block of their own.
While you can change the styling of it to change that, what you have is not a paragraph, so you shouldn't mark it up with the p element.
Use a label element instead. Aside from being the correct markup, it is an inline element so will render on the same line by default.
<div class="row" id="loginForm">
<label for="usr">Username : </label>
<input type="text" class="form-control input" id="usr">
</div>
display: inline-block is your friend:
p {
display: inline-block;
}
<div class="row" id="loginForm">
<p>Username:</p>
<input type="text" class="form-control input" id="usr">
</div>
You can use table without border. So it looks very tasteful and easy.
<div class="row" id="loginForm">
<table border="0">
<tr>
<td><p>Username : </p></td>
<td><input type="text" class="form-control input" id="usr"></td>
</tr>
</table>
</div>
Use Bootstrap form-horizontal
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="usr">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control input" id="usr">
</div>
</div>
</form>
You can simply wrap your input into tag so you don't need to use for attribute.
HTML:
<div class="row" id="loginForm">
<label
>Username :
<input type="text" class="form-control input" id="usr">
</label>
</div>
CSS:
label {
display: block;
}
label > p {
display: inline-block;
}
You could just use a span tag,
<div class="row" id="loginForm">
<p>Username : <span><input type="text" class="form-control input" id="usr"></span></p>
</div>
with boostrap you only add class form-horizontal and this work for you
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
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 name on the same line rather then one below the other.
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div>
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
<div>
<label for="pass1">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
Put style="float:left" on each of your divs:
<div style="float:left;">...........
Example:
<div style="float:left;">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div style="float:left;">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div style="clear:both;"> </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:
<div class="left">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="left">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div class="clear"> </div>
More Info:
CSS Float Clear Tutorial
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
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
... rest is same
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
<div class="form">
<label for="product_name">Name</label>
<input id="product_name" name="product[name]" size="30" type="text" value="4">
<label for="product_stock">Stock</label>
<input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
<label for="price_amount">Amount</label>
<input id="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:
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 ;-)
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;
}
You could use the {display: inline-flex;}
this would produce this:
inline-flex