This question already has answers here:
How to align input forms in HTML
(17 answers)
Closed 2 years ago.
I have a HTML form like:
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
I am okay with using CSS if that can help achieving this.
Working JS Fiddle
HTML:
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
You could use a label (see JsFiddle)
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
Or you could use those labels in a table (JsFiddle)
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
http://jsfiddle.net/T6zhj/1/
Using display table-cell/row will do the job without any width needed.
The html :
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
The Css :
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.
I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.
JSFiddle
HTML
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
CSS
td{
text-align:right;
}
in my case i always put these stuffs in a p tag like
<p>
name : < input type=text />
</p>
and so on and then applying the css like
p {
text-align:left;
}
p input {
float:right;
}
You need to specify the width of the p tag.because the input tags will float all the way right.
This css will also affect the submit button. You need to override the rule for this tag.
I have just given width to Label and input type were aligned automatically.
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}
<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>
Related
In the below code my span is showed at the right side of the text box I want it below the text box. Please let me know what can be done?
<fieldset class="no_border">
<div class="float_left">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
#nominee_details span {
margin-left: 0px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
display:none;
}
fieldset.no_border {
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
.float_left {
float:left;
width:33%;
}
other spans without DIV
<fieldset class="no_border">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</fieldset >
JS Fiddle
I actually have 2 situation
1st where are inside fieldset and div as shown above and
2nd where are inside fieldset
span for 1st case are not getting rendered below text box
span for second are displayed properly
if you see my jsfiddle you shall understand what i am trying to explain
http://jsfiddle.net/dwWww/5/
Are you looking for this?
.float_left span {
display: block;
}
If you can use jquery, First you set display: none;
$(".float_left span").css("display","none");
But when you detect an error just do:
$(".float_left span").css("display","block");
Or just:
.addClass() //set display block
.removeClass() //set display none
Or:
$(".float_left span").text("Error!!");
and
$(".float_left span").text('');
Update:
.float_left span, #nominee_details span {
display: block;
}
http://jsfiddle.net/M8XQ6/
span is an inline element, you may want to use a block level element like div or p or set display:block to the span or put a <br/> just before the span.
I am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.
Take a look here:
http://jsfiddle.net/QtVwr/
What am I doing wrong?
I'm not very familiar with CSS.
Part of the problem is that there are issues with your HTML. Here's a start:
make sure all the divs are closed.
remove the floats from your css
add display:inline-block;
remove the inline styles from your HTML.
correct the .wrapper class to be .wrapper1 (matching the HTML)
So, this is more what you want, I assume:
.wrapper1 {
height:70px;
width: 800px;
background: #ffffff;
border: 1px solid grey;
color: #BDBDBD;
}
.resultbox {
width: 300px;
background: #ffffff;
color: #BDBDBD;
display: inline-block;
}
.submit {
height:15px;
width: 32px;
margin-top:10px;
background: #ffffff;
border: 1px solid;
color: #BDBDBD;
display: inline-block;
}
and the HTML
<div class="wrapper1">
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="width:35px;" >
<div class="submit"></div>
</div>
</div>
Example: http://jsfiddle.net/QtVwr/2/
You will still need to fiddle with it. But this is a start.
To make div inline you should use the following CSS style:
.mydiv{ display: inline; }
Note: Change width of your wrapper (make it smaller) and you will see the results
There are several issues with the code you have provided.
you have defined css rules for a class wrapper but use class wrapper1 in your html
class wrapper doesn't have enough width for both of the result boxes plus the submit
There are extra quotes on the second result box style="margin-left: 5px; margin-top: 3px;""
form tags are malformed and being intertwined with your div tags
form tags aren't closed
locationresult div tag isn't closed
floats need to be cleared
here is a fiddle
http://jsfiddle.net/e3dg6/
The width of your results boxes combined exceeds the width of your wrapper. You need to either make the wrapper wider or reduce the width on the resultboxes.
Why do you have the submit div within a resultbox div?
Why the margin-left:10px, only with the first div?
I'd do it like this:
<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>
And set the width and height of the wrapper, and let the other divs float. It's just a longshot, not exactly sure what you're trying to accomplish. I just think your nesting is not okay.
I don't have experience as a web designer, but in effort to learn more about CSS, I'm doing the stylesheet for my own page. I am aware the way I'm doing it now probably sucks, is not the recommended way, but please help me understand why this isn't working.
I have this form:
<form action="/register" method="POST" id="registration_form">
<p>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
</p>
</form>
I have included Eric Meyer's CSS reset, before including my own stylesheet, and I have this rule in my CSS:
#registration_form label {
width: 100px;
}
I also tried to put:
label {
width:100px;
}
I tried changing the value to more than 100px, but still it doesn't get applied. If it helps, I have a layout, which contains something like this:
<body>
<div id="navigation">
...
</div>
<div id="pagebox">
{% block body %}{% endblock %}
</div>
</body>
This is a jinja2 template, and the content of body is added by some different view, when it's rendered. Here are the styles for these id's:
#navigation {
text-align:center;
}
#navigation ul li {
display:inline;
margin-left:50px;
}
#pagebox {
margin-left:50px;
margin-right:50px;
height:600px;
background-color: #20f000;
}
Why isn't my label style getting applied?
I believe that <label> has the display:inline by default, so width and height do not affect it. Try adding display: inline-block to it.
Added: As member Geoff Adams noted in the comments, there are some browser compatibility issues with display: inline-block. In this specific scenarion it should work, but see here for more information.
The label element is an inline element, so the width style doesn't apply to it.
You could make the label and input element float inside the p elements. Applying overflow to the p element makes it work as a container for the floating elements:
#registration_form p {
overflow: hidden;
}
#registration_form p label {
float: left;
width: 100px;
}
#registration_form p input {
float: left;
}
Eventually, our team would like to move away from tables, but it seems like div tags are so much harder to use. In the above image, the layout was created using a table, but I cant figure out how to get a basic column structure working using div tags. How can I get those buttons on the same line? HTML newbie here.
Not too difficult:
HTML:
<form id="login">
<div>
<label for="user">Username:</label>
<input id="user" type="text" size="20">
</div>
<div>
<label for="pass">Password:</label>
<input id="pass" type="password" size="20">
</div>
<div>
<input id="cancel" type="reset" value="Cancel">
<input id="submit" type="submit" value="Login">
</div>
</form>
CSS:
#login {
background-color: #FEFEDD;
border: 3px solid #7F7F7F;
display: inline-block;
padding: 20px;
text-align: right;
}
#login div {
padding: 5px;
}
#login label {
font-weight: bold;
margin-right: 5px;
}
#login #cancel {
float: left;
}
Live Demo
To be short, if you want to put many elements with div tags in the same line you should give for each div a left float and a width. For example:
<div style="width:50px; float:left;"> Element 1</div>
<div style="width:50px; float:left;"> Element 2</div>
...
As bad as it is to use tables for positioning elements on a page, forms is one exception I often make. Sure you can float your DIVs, but you're going to write a lot more code to do that than using tables. Plus we're talking about a tabular format with rows and columns. If you're not supposed to use tables for a tabular format, then why have the tags in the HTML at all?
If you give the elements a position:absolute then you can set the left: value and the top:value to align the buttons.
div#cancelbutton {
position: absolute;
top:50px;
left:30px;
}
div#loginbutton {
position:absolute;
top:50px;
left:300px;
}
This will place the element quote: relative to the first parent element that has a position other than static.
Check out http://www.w3schools.com/Css/css_positioning.asp
Maybee is better to use float:let then display: inline-block; because IE9 could display textboxes in two rows.
Check http://interestingwebs.blogspot.com/2012/10/div-side-by-side-in-one-line.html for examples.
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form