I have this code below which I have built in order for it to be ALL on the same line. Problem is, for some reason the form input field is several spaces away from the label. Thus something like this happens:
https://jsfiddle.net/pswLLhru/
Any help so as to remove the extra spacing between the two input fields?
Thank you
label {
display:inline-block;
width: 130px;
}
<div class="block">
<label>Currently I am </label>
<input type="text" id="labelinput" style="width:60px;"/>
<label> in </label>
<input type="text" id="labelinput" style="width:60px"/>
</div>
Just deleting your CSS:
label {
display:inline-block;
width: 130px;
}
will remove the white space from your inputs and show your div with the 2 inputs on the same line.
Also I would recommend indenting your code to make it easier to read in larger/future projects.
Delete the width in your css and use comments in your markup
<div class="block">
<label>Currently I am </label><!--
--><input type="text" id="labelinput" style="width:60px;"/><!--
--><label> in </label><!--
--><input type="text" id="labelinput" style="width:60px"/>
</div>
Related
group to align a label and an input box. The idea is to put the label and the input box in different lines. The code snippets are like:
<form>
<div class="form-group">
<label for="input">Please enter names, separated by space:</label>
<div>
<div class="col-xs-8">
<input type="text" class="form-control" id="input" placeholder="Enter up to 10 names to search" ng-model="vm.searchRaw">
</div>
<div class="block-align-right">
<button class="btn btn-primary" style="width: 120px" ng-click="vm.search()" ng-disabled="vm.notEntered()">Search</button>
</div>
</div>
</div>
</form>
The divs inside the form group is mainly to align the input box and the button to one line. Now the problem is: the left edge of the label and the left edge of the input box don't align; the input box shifts to the right a bit. Without using padding how can I fix this? Or is it built in for the form-group? Thanks!
Use this type
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;
}
Add class to label. like:
<label class="col-xs-10" for="input">Please enter names, separated by space:</label>
Will solve your issue.
Because bootstrap class will add padding-left:15px.
Check image below.
Working Fiddle
Seems like you are using bootstrap. Just modify the <label> line as follows:
<label for="input" class="col-xs-12">Please enter names, separated by space:</label>
I've got a fieldset like this:
<fieldset>
<legend>Testsituation</legend>
Field 1: <input type="text"/><br>
My field 2: <input type="text" />
</fieldset>
Now my field 2's input field is displayed way right of field 1's.
My question here is: Is there an easy way to accomplish the input fields being displayed exactly under each other?
As a fiddle example for how it looks like and what I try to achieve:
http://jsfiddle.net/0pj92kxc/
(the effect that is accomplished by the table is what I'm looking for thus both input boxes at the same horizontal locatoin)
Try like this: Demo
<p> <label> Field 1:</label> <input type="text"></p>
<p> <label>My field 2: </label><input type="text"></p>
CSS:
p{
margin:5px;
display:block;
}
label{
width:100px;
display:block;
float:left;
}
You can archive this in different ways.
I think the Table way is not really wrong to do it, you also can just put them UNDER the the text like
*Loginname*
[ Enter your username.. ]
But if you want to stay the way you want to do, you can define a fixed width for the first text part like following:
HTML
<fieldset>
<legend>Testsituation</legend>
<p class="field">
<label for="f1"><span>Field 1:</span></label> <input id="f1" type="text">
</p>
<p class="field">
<label for="f2"><span>Field 1:</span></label> <input id="f2" type="text">
</p>
</fieldset>
CSS
.field span {
min-width: 75px;
width: auto;
display: inline-block;
}
JSFiddle: http://jsfiddle.net/cqrs10b5/4/
I am having a problem sorting this one out.
Here's my HTML
<form>
<p><label for="comp-name">Name:</label>
<input type="text" name="comp-name"></input>
</p>
<p>
<label for="company-address">Address:</label>
<textarea name="company-address"></textarea>
</p>
<p>
<label for="postcode">Postcode:</label>
<input type="text" name="postcode"></input>
</p>
<p>
<label for="phone">Phone Number:</label>
<input type="text" name="phone"></input>
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email"></input>
</p>
</form>
Here is what I want the form to look like:
I'm having hard time figuring out how to place the label on the top-left part of the input/textarea.
If I understand correctly, a simple:
label {
vertical-align: top;
}
should give you the results you want.
Fiddle: http://jsfiddle.net/N7e67/2/
You can just put the labels in the left column of a table and the fields in the right, then position them within their cells
<table>
<tr>
<td>(label)</td>
<td>(input)</td>
</tr>
...
</table>
Try to put your lable and input type inside the div tag
<p><div><label for="comp-name">Company Name:</label></div>
<div> <input type="text" name="comp-name"></input></div>
</p>
this should help you. if this si not what you expect please elaborate what you want to see.
You can try using this boilerplate http://www.csskarma.com/lab/contactForm/ or this tutorial http://designfestival.com/position-text-labels-on-forms-using%C2%A0css/
PS : for your information, the label for attribute should reference an id of an input.
PPS : you might find this article interesting http://www.lukew.com/ff/entry.asp?1502
you can use this code for positioning your object:
style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px"
change the left, top, height and width as per form design.
<label for="comp-name" style="z-index: 1; left: -3px; top: 202px; position: absolute; height: 132px; width: 494px>Company Name:</label>
The easiest is to put the <input> inside the <label>
<div>
<label for="comp-name">Company Name: <input type="text" name="comp-name" />
</label>
</div>
You have two options for placing label and input.
1) You can place the label and the input next to each-other as siblings.
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
2) You can place the input element inside the label so that the label becomes the parent element and the input the child element of the label.
<label>Do you like cheese?
<input type="checkbox" name="cheese">
</label>
Both solutions are valid HTML according to MDN, but when you go for solution one you need to explicitly link the label to the input element by adding an id to the input element and for attribute to the label element.
When you choose the second option you don't need to do this since the DOM automatically knows (because of the parent child relationship) that the label and element are related to each-other. That I would consider a clear advantage of the second solution.
Note. With css you can get the desired styling result for either of those solutions, so I would not use that as an argument for choosing between 1 and 2.
I'm really not that good at CSS, and I want to know how to correctly style a form in a manner that it puts each single text input and label in a line. like this :
<label for="input1">...</label>
<input type="text" id="input1"/>
<label for="input2">...</label>
<input type="text" id="input2"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
<label for="input3">...</label>
<input type="text" id="input3"/>
and it would be shown in the webpage like :
(label)(input)
(label)(input)
(label)(input)
(label)(input)
<label>foo</label>
<input type="text"/>
<label>foo</label>
<input type="text"/>
<style>
input, label { float:left }
label { clear:left; }
</style>
http://jsfiddle.net/RpRS5/
I recommend this tutorial by A List Apart about Prettier Accessible Forms. You can also use a definition list with some custom styling, e.g.,
<dl><dt><label></label></dt>
<dd><input></dd></dl>
And something like:
dl dt {
float: left;
width: 8em;
}
Edit: to sum up the A List Apart article, they suggest you put form fields in an ordered list ol. Labels are displayed as inline-block so they appear horizontally next to their associated fields.
Put them in a list, or in a structure like a list (that is to say, wrap each "row" in a div).
Put your inputs inside the label element and then you can simply display: block them or float them, I prefer display but it would be easy enough to change.
<label>Hello <input type="radio" name="what" value="Hello" /></label>
http://jsfiddle.net/Bpxfp/
http://jsfiddle.net/ud7YE/1/
you can control the space between the label and input by varying the width of the wrapper. Just set the height of the label and the top margin of the input same in value but negative
I find enclosing label and input or select tags in a div or list. And the label and select tags should be of type inline-block
<div>
<label>Name: </label><input type="text" />
</div>
<div>
<label>Place: </label><input type="text" />
</div>
CSS:
label {
display: inline-block;
}
input {
display: inline-block;
padding: 2px;
}
div {
display: block;
margin: 2px 0;
}
This would work out well.
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.