I need the label to stay on the same line as the input field they are labeling. I want these elements to flow like they normally would when the window resizes, i just want the label to stick to the left of the input they are labeling. How would I do that? Any ideas?
<label for="id1">label1:</label>
<input type="text" id="id1"/>
<label for="id2">label2:</label>
<input type="text" id="id2"/>
ANSWERED: Josiah Ruddell's answer was on the right path, using a span instead of div gave me the correct behavior. Thanks!
<span style="white-space:nowrap">
<label for="id1">label1:</label>
<input type="text" id="id1"/>
</span>
<span style="white-space:nowrap">
<label for="id2">label2:</label>
<input type="text" id="id2"/>
</span>
put them both inside a div with nowrap.
<div style="white-space:nowrap">
<label for="id1">label1:</label>
<input type="text" id="id1"/>
</div>
Put the input in the label, and ditch the for attribute
<label>
label1:
<input type="text" id="id1" name="whatever" />
</label>
But of course, what if you want to style the text? Just use a span.
<label id="id1">
<span>label1:</span>
<input type="text" name="whatever" />
</label>
<style>
.nowrap {
white-space: nowrap;
}
</style>
...
<label for="id1" class="nowrap">label1:
<input type="text" id="id1"/>
</label>
Wrap your inputs within the label tag
http://jsfiddle.net/jwB2Y/123/
The following CSS class force the label text to flow inline and get clipped if its length is more than max-length of the label.
.inline-label {
white-space: nowrap;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
float:left;
}
HTML:
<div>
<label for="id1" class="inline-label">This is the dummy text i want to display::</label>
<input type="text" id="id1"/>
</div>
If you want they to be paragraph, then use it.
<p><label for="id1">label1:</label> <input type="text" id="id1"/></p>
<p><label for="id2">label2:</label> <input type="text" id="id2"/></p>
Both <label> and <input> are paragraph and flow content so you can insert as paragraph elements and as block elements.
What I did so that input didn't take up the whole line, and be able to place the input in a paragraph, I used a span tag and display to inline-block
html:
<span>cluster:
<input class="short-input" type="text" name="cluster">
</span>
css:
span{display: inline-block;}
Why don't You just use:
label {
display: block;
width: 50px;
height: 24px;
float: left;
}
Related
I am very new to HTML and hesitate before posting this question, because it very simple looking problem, but I am not getting good answer after Googling.
So following is my simple form code, I wanted to keep both the form input elements in different line. Problem is I literally need to use hardcoded 250px width to div, so that element will code in different lines.
How do I improve my code so it will be portable across different browsers and screens?
Secondly, distance between all the lines in very less, they are actually collapsing on each other. How to give more vertical space to elements?
<form id="frm">
<div style="width: 250px;">
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
If you want each label/input pair to appear on a line of its own, you should make that happen in markup using elements that actually cause line breaks, such as wrapping each of the pairs in a div or p element, or using <br> between them, or making each of them a row of a table. It is very unreliable to set just a width on a block and expect browsers to automatically wrap lines. Consider e.g. what happens in your example if the user sets font size to 60px (maybe due to eyesight problems).
To set vertical spacing, use CSS. There are many ways to do that, and the techniques partly depend on the markup chosen. Here is one example:
<style>
td { padding-bottom: 0.5em; }
</style>
<form id="frm">
<table>
<tr>
<td>
<label for="name">Name</label>
<td>
<input id="name" name="name" type="text" required="required">
<tr>
<td>
<label for="email">Email</label>
<td>
<input id="email" name="email" type="email"
placeholder="someone#example.com">
<tr>
<td colspan="2">
<input type="submit" value="submit">
</table>
</form>
Float the label and inputs and specify 50% width with border-box box sizing method. You also need a wrapper element for each label-input pair which is used to contain the floats.
form > div {
width: 250px;
margin: 1em 0;
overflow: hidden;
}
label,
input {
display: block;
float: left;
width: 50%;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
}
<form id="frm">
<div>
<label>Name</label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<div>
<input type="submit" value="submit" />
</div>
</form>
1) you can define the diplay style for the label to block, this will bring label onto new line,
http://jsfiddle.net/naeemshaikh27/rvg4jdbo/
label{
display:block;
}
<form id="frm">
<div>
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
2) Or if you want to keep the label with the input element, then just add a div element between them http://jsfiddle.net/naeemshaikh27/rvg4jdbo/1/
If each element (labels and inputs) has to have own line, set them display: block;
#frm label, #frm input {display: block}
or
#frm div > * {display: block;}
If you need to have the label and input on one line, you can try to work with floats and clear.
label, input {float: left;}
label {width: 80px; clear: left;} /* set width to align inputs and clear to 'set' a new line */
First use block elements for vertical placement of elements.
label{
display:block;
}
Use width in percentages not pixels if you can. It will keep it better, specially if they are in same line(inline).
<p style="width:50%"> </p> <p style="width:50%"> </p>
Can use media queries too for different resolutions.
label tags and input tags are inline by default. You can set them both to display: block to make them stack. You can also add some margin to space them out:
label, input{
display: block;
margin: 10px 0;
}
EXAMPLE 1
OR
If you want the label and input inline but each one stacked, you can simply wrap them with a block element like a div:
<form id="frm">
<div>
<div>
<label>Name </label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<input type="submit" value="submit" />
</div>
</form>
EXAMPLE 2
I'm trying to get radio buttons to stack on top of each other instead of display side by side.
I have several form labels defined as inline-block with a width of 150, for the purpose of aligning the input boxes.
I Know how to do this without a label, but when the labels sit to the left, I can't figure it out.
HTML:
<form action="here.php" method="POST">
<p>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value"male">Male
<input type="radio" name="gender" value"female">Female
</p>
<p>
<input type="submit" name="input" value="Submit">
</p>
</form>
CSS:
form {
width:356px;
margin: 0 auto;
}
label {
width:150px;
display: inline-block;
}
How do I get "female" to sit directly under "male".
I've gotten close but I don't think its the right way. I combined the radio button inputs in a <p> then floated its label and itself to the left, added a <br />, then cleared the submit button, but it doesn't look that great.
Advice please? Thanks a bunch,
Josh
I'd suggest reorganising your HTML, to the following:
form {
width: 356px;
margin: 0 auto;
}
fieldset {
margin: 0.5em auto;
width: 90%;;
}
label {
width: 150px;
display: inline-block;
}
fieldset fieldset label {
width: auto;
margin-left: 150px;
}
<form action="here.php" method="POST">
<fieldset>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
<!-- a fieldset groups related input elements together -->
<fieldset>
<!-- a <legend> labels a section of the <form>, identifying
the grouped <inputs>, a <label> was utterly wrong for
this, given it was, and can be, associated with only
one of the <input>s -->
<legend>Gender</legend>
<!-- wrapping the <input> associates the <input> with the appropriate
(parent) label -->
<label>
<input type="radio" name="gender" value="male">Male</label>
<!-- inciedentally, the '=' is not optional, and you were
missing them here to identify the value and its
associated attribute-value -->
<label>
<input type="radio" name="gender" value="female">Female</label>
</fieldset>
<input type="submit" name="input" value="Submit">
</fieldset>
</form>
Add a break?
<input type="radio" name="gender" value"male">Male<br />
<input type="radio" name="gender" value"female">Female
You can put each of the radio inputs in a div ( or other block element ) and then they will sit on top of each other. You could then style those divs using CSS for any other styling you want.
Im using jQuery Mobile and I have a horizontal toggle set.
I would like to center it in the page, or I would like to stretch it so that it takes up 100% of the width.
Either would be good for what I am doing.
I have tried a lot of different approaches but none have worked so far.
Using jQuery Mobile v1.0
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" class="custom"/>
<label for="monday">Monday</label>
<input type="checkbox" name="tuesday" id="tuesday" class="custom" />
<label for="tuesday">Tuesday</label>
<input type="checkbox" name="wednesday" id="wednesday" class="custom" />
<label for="wednesday">Wednesday</label>
<input type="checkbox" name="thursday" id="thursday" class="custom" />
<label for="thursday">Thursday</label>
<input type="checkbox" name="friday" id="friday" class="custom" />
<label for="friday">Friday</label>
<input type="checkbox" name="saturday" id="saturday" class="custom" />
<label for="saturday">Saturday</label>
<input type="checkbox" name="sunday" id="sunday" class="custom" />
<label for="sunday">Sunday</label>
</fieldset>
I just had this same problem and I solved it by adding by putting the fieldset within a div which has text-align: center and then setting the display of the fieldset to inline.
E.g.
HTML
<div class="custom">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="monday" id="monday" />
<label for="monday">Monday</label>
...
</fieldset>
</div>
CSS
.custom {
text-align: center;
}
.custom fieldset {
display: inline;
}
Setting the display of the fieldset to inline may have some other effects, for example I noticed that the margins/padding changed slightly, but apart from that it did what I wanted.
I want to adjust the appearance on same controls on the website which I am working on, but it seems that is not going good.
I want to use CSS to properly align the controls.
I want to have the checkbox and the label aligned left and then little bit room, then textbox is coming.
Also I want all the textboxes to be aligned same vertically.
How can I do that with css without using tables.
Thanks in advance for your help, Laziale
CSS
div{margin-bottom:2px;}
input[type="checkbox"]{display:block; float:left; margin-right:2px;}
label{display:block; float:left; width:150px;}
HTML
<div><input type="checkbox" /><label>Address</label><input type="text" /></div>
<div><input type="checkbox" /><label>State</label><input type="text" /></div>
<div><input type="checkbox" /><label>City</label><input type="text" /></div>
<div><input type="checkbox" /><label>ZIP</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
<div><input type="checkbox" /><label>Contact Person</label><input type="text" /></div>
Seriously, for you need, you should use tables. you'll have a lot more html and CSS trying the achieve this anyway.
The whole drive to not use tables in Html is for layout of pages and such where you may want to rearrange your page layout (move things around) using just CSS. but I doubt you'd want to rearrange the way your form is laid out.
Simplest way: Specify a width and float:left for the input containers (labels) http://jsfiddle.net/tCcff/2/
<style type="text/css">
label {
float: left;
width: 8em;
}
label.text {
width: 7em;
}
</style>
<div>
<label> <input type='checkbox' /> Short </label> <label class='text'>Field Label</label><input type='text' />
</div>
<div>
<label> <input type='checkbox' /> Long Label here </label> <label class='text'>Text2</label><input type='text' />
</div>
<div>
<label> <input type='checkbox' /> Label here </label> <label class='text'>Text Three-----</label> <input type='text' />
</div>
This article is a good reference for CSS based form layout: http://articles.sitepoint.com/article/fancy-form-design-css/3
I have input text's and label tags. I can't figure out the CSS to get the label text to align right below the input text. Here's a snippet of the HTML:
<form id="sg1">
<label for="member1">member 1</label>
<input name="member1" id="member1" value="jack" />
<label for="member2">member 2</label>
<input name="member2" id="member2" value="carter" />
<label for="member3">member 3</label>
<input name="member3" id="member3" value="jackson" />
<label for="member4">member 4</label>
<input name="member4" id="member4" value="tielk" />
</form>
Trying to get:
[input box 1] [input box 2]
label 1 label 2
etc, with all elements.
A quickly whipped up example that works:
input {
display: inline-block;
width: 6em;
position: relative;
top: -3em;
}
label {
display: inline-block;
width: 6em;
margin-right: .5em;
padding-top: 1.5em;
}
<form id="sg1">
<label>member 1 <input name="member1" id="member1" value="jack" /></label>
<label>member 2 <input name="member2" id="member2" value="carter" /></label>
<label>member 3 <input name="member3" id="member3" value="jackson" /></label>
<label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>
Could be improved, but I find it cleaner than extraneous divs, and it degrades much nicer than the label-after-input-approach when CSS support is absent. Personally, I prefer to nest the inputs in the labels anyway.
Use a table (one input/label pair per cell) or left-floating divs (one input/label pair per div). Example:
<div class="pair">
<input type="text" name="foo" value="bar" /><br />
<label for="foo">shabba</label>
</div>
<div class="pair">
…
</div>
CSS:
div.pair {
float:left;
}
You'd make the job a lot easier by wrapping each field (in this case, each input/label pair) in a div.
You can use pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.
The simplest way is to put the label beneath the input on the html:
<form id="sg1">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</form>
Then you can wrap each input/label pair with a div, and set the div like so:
<form id="sg1">
<div class="wrap">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
</div>
<div class="wrap">
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
</div>
<div class="wrap">
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
</div>
<div class="wrap">
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</div>
</form>
#sg1 div
{
clear: both;
float: left;
}
Next you can put
#sg1 label
{
float: right;
}
input
{
display:block;
}