The situation:
I have a site with a long list of questions across multiple pages.
Each question is within a made up of a label and an input. Groups of question divs are within an additional div to provide grouping and bordering styles, etc.
The problem:
I want to number my questions, but want to avoid hard coding the numbering. However, it is invalid html to place the <li> inside the divs or labels.
In addition some question divs are conditionally hidden and revealed depending on user input. The divs therefore provide key functionality, and the number must be hidden and revealed along with these divs, (so positioning each <li> outside a divs would be problematic.
Code:
Here is an example of a pared down structure of my form, showing two question "blocks":
<form id="myform" method="post" action="/destinaion/page.php">
<div class="formfield">
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2">Question 1</label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1">Question 2</label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</div>
</form>
The div class form field contains the form page, and page1 various styling particulars for page 1.
I'd like to make an ordered list from my questions, perhaps something like
Attempt at achieving goal:
<form id="myform" method="post" action="/destination/page.php">
<div class="formfield">
<ol>
<div class="page1">
<div class="lowerborder">
<div class="question">
<label for="q2"><li>Question 1</li></label>
<input type="number" id="q1" name="q1"/>
</div>
<div class="question">
<label for="q1"><li>Question 2</li></label>
<input type="number" id="q2" name="q2"/>
</div>
</div>
</div>
</ol>
</div>
</form>
But as you can see I am putting the <li> inside the <label> which a) is not valid html, and b) doesn't play well with all browsers.
How can I avoid putting <li> elements inside invalid parents, when my list items are separated by many nested divs?
jsFiddle:
See a fiddle of my above attempt. Including some styling and functionality I am trying to achieve (styling via nested divs, hidden questions that reveal etc)
Please see this fiddle demonstrating how to do everything you want without interposing any other elements. I found no need for even a single div anywhere.
Note: I initially used float:left for the question to make the answers line up properly. However, this caused IE to render the numbers just left of the answers instead of left of the questions. I switched to using display:inline-block and now everything works in IE as well.
Comments:
I cleaned up the style sheet, which had some sections repeated and conflicting style rules. I removed unnecessary rules.
I created the lines separating groups of questions using a class, and I also made it apply to the top border of a question rather than the bottom, so that you can use it even if there are hidden questions ending a group, since a hidden question would probably never begin a group. There was no need for additional elements to have borders.
In my opinion the label for the "Reveal" checkbox should be the text next to it, so that you can click that text to check and uncheck the box. Thus, I added a "question" class to the items that are the question, rather than using a label. You must apply the style "question" to the questions to make them style properly. You can apply that to a label element (which is for something else or not), or you can use a span or other element to contain the text when it is not a label.
IE 7 stupidly puts the numbers at the bottom of the line, even though the questions are styled with vertical-align:top. I don't know how to fix that at this time, but it could be another question to those more expert than I in CSS quirks.
IE was not handling the "hidden" method very well, taking up extra space and then when revealing not showing the child elements, so I used absolute positioning instead (which, by taking it out of the document flow, has the same effect). See the CSS for how it works.
I modified the way you were applying the reveal script. Instead of manually wiring up each individual item, instead I put a data value on the checkbox itself, then at the ready event I use that to wire up the page appropriately. Now you can have checkboxes that reveal more questions just by adding an id to the revealed question (or use class instead if you need to reveal more than one at a time) and a data expando attribute like data-togglehidden="l4" to specify the id to toggle right in the checkbox element. No script changes required.
It looks a little like you may have "div-itis" which is the tendency to multiply divs all over the place. No need to be embarrassed, I have had div-itis too, when I was new to html development. You'll grow out of it due to experiences like this. In general, you should use normal non-div page elements and style them directly, rather than wrap things in divs and styling those. Divs are useful when you need to style a group of related functionality or provide a box for different elements. One hint that you may be using divs improperly is when they only have a single item in them (especially another div). Sometimes that is necessary, but ask yourself: can I move the style to the parent or child element instead?
I need to know more about how the "pages" work that you mentioned and that were in your original html markup. There are no pages in html, only when html is printed. So I'm not quite sure what that means or how to style your pages for you.
Here is the cleaned-up html, without the need of additional elements between ol and li:
<form id="myform" method="post" action="/destination/page.php">
<ol class="formfield">
<li>
<label class="question" for="q1">What is your first name?</label>
<input type="text" id="q1" name="q1"/>
</li>
<li>
<label class="question" for="q2">A very long question 2 that is sure to run to a second line just to prove that such a thing will work properly and not mess up the layout, described in your own words?</label>
<input type="text" id="q2" name="q2"/>
</li>
<li class="begingroup">
<span class="question">Are you the type of person who likes to needlessly answer extra questions?</span>
<input type="checkbox" id="q3" name="q3" data-togglehidden="l4"/>
<label for="q3">Yes, yes, that's me!!!</label>
</li>
<li id="l4" class="hidden">
<label class="question" for="q4">Why do you like to do extra needless work?</label>
<input type="text" id="q4" name="q4"/>
</li>
<li class="begingroup">
<label class="question" for="q5">What was your first pet's name?</label>
<input type="text" id="q5" name="q5"/>
</li>
</ol>
</form>
Here's what it looks like in Firefox 16.0.2:
And in IE 7.0.5730.13CO:
The CSS:
ol.formfield {
width: 500px;
margin: 10px auto;
padding: 16px 16px 16px 0;
border: 5px groove #005E9B;
list-style: decimal outside;
color: black;
background-color: #6Fc2F7;
font-family: 'Oxygen', sans-serif;
font-size:15px;
}
ol.formfield li {
clear: both;
padding: 2px;
margin-left: 1.7em;
}
ol.formfield li.begingroup {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #005E9B;
}
.question {
display:inline-block;
width:300px;
vertical-align:top;
}
.hidden {
position: absolute;
height: 0;
width: 0;
overflow: hidden;
}
ol.formfield input {
border-radius:5px; /* css 3 */
-moz-border-radius:5px; /* mozilla */
-webkit-border-radius:5px; /* webkit */
}
And the script to wire up your hide/reveal based on data values on elements:
$('ol.formfield input:checkbox')
.each(function() {
var d = $(this).data('togglehidden');
if(d) {
$(this).on('change', function() {
if ($(this).attr('checked')) {
$('#' + d)
.removeClass('hidden')
.find(':input')
.focus();
} else {
$('#' + d).addClass('hidden');
}
});
}
});
Related
I have created a "CSS-only" Website that uses only CSS/HTML/PHP, with a CSS Menu, dynamic loading content (images) and a CSS Magnifier. I don´t want to use Javascript/jQuery or Cookies and the Website works perfectly so far. The layout was really hard to adjust to fit correctly to all browsers but finally I got the Apple-InternetExplorer (Safari) working too.
For the menu I used the "Checkbox Hack". But instead of checkboxes I´m using radio-buttons to display only one content-page. That looks like this:
<!--
We need these input-fields to trigger display:block on another element
The radio-buttons must use the same "name" to jump between different content-pages.
(only 1 Radio-Button can be active)
-->
<input type="radio" id="radioactive-1" name="radioactive">
<input type="radio" id="radioactive-2" name="radioactive">
<!-- This simple menu triggers the radio-button with the id (for=id) -->
<label for="radioactive-1">Menu-Entry 1</label>
<label for="radioactive-2">Menu-Entry 2</label>
<!-- Heres the content to display, but it is set to display: none;
so the content only gets displayed if the correct radio-button is active -->
<div id='content-wrapper'>
<div id='not-radioactive-1' style='display:none;'></div>
<div id='not-radioactive-2' style='display:none;'></div>
</div>
That markup was shortened, but I think its clear enough. Now we need the CSS which is important to get this to work:
input[id="radioactive-1"]:checked ~ #content-wrapper #not-radioactive-1 {
display:block!important;
}
input[id="radioactive-2"]:checked ~ #content-wrapper #not-radioactive-2 {
display:block!important;
}
You can see that these CSS-Declarations can get very long and I´m triggering multiple styles to different elements with one click. The code for the menu is ~20 KB and thats massive.(50% the size of my CSS-File)
Now my question: Is there any way to get the number of the class for the input field to use it for the content class?
Example:
input[id="radioactive-$value"]:checked ~ #not-radioactive-$value
I know one way to ignore the number and use all id´s including a defined string.
Example:
input[id^="radioactive-"]:checked
I also know that I can use PHP and just do a loop but in the end the CSS have the same size, because the whole code gets echoed. I´m searching for a CSS-only solution if this is possible. I only want to shorten my code and speed up page-loading.
You can do that without relying on those numbers by inserting the radio buttons directly before each section:
HTML:
<div id="content-wrapper">
<input type="radio" id="radioactive-1" name="radioactive">
<div class="content"></div>
<input type="radio" id="radioactive-2" name="radioactive">
<div class="content"></div>
</div>
CSS:
.content {
display: none;
}
input[name="radioactive"]:checked + .content {
display: block;
}
It doesn't matter where the labels are, as long as the for attributes matches to some input.
One solution is that you can use the PHP loop in the HTML file and using the loop, print following piece of code,
<div id='content-wrapper'>
<input type="radio" id="radioactive-1" name="radioactive">
<label for="radioactive-1">Menu-Entry 1</label>
<div id='not-radioactive-1' style='display:none;'></div>
<input type="radio" id="radioactive-2" name="radioactive">
<label for="radioactive-2">Menu-Entry 2</label>
<div id='not-radioactive-2' style='display:none;'></div>
</div>
And the CSS file would have the following,
input[type="radio"]:checked ~ div {
display:block!important;
}
I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).
I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:
This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.
Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.
EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?
grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle
try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}
by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}
More modern version is display: inline-flex;
I'm wondering what are the best solutions to structure a html form with labels and inputs.
I used to do this with float: left to the label and float: right for the inputs. And each line is surround with a block clear: both.
But i don't think these CSS property were made for something like that..
So what are the others solutions ? Tables ?
Well it really depends on what you want the form to look like. For example, if you want a clear grid with borders I recommend using a table.
To duplicate what you have, you can do this:
<label for='textbox'>Label</label><input type='text' id='textbox' />
And then this css:
label { display: inline-block; width: 100px; }
This will make the label stay on the same line as in input element but will push it the appropriate distance.
Personally, I try to avoid using floats to align elements. I would rather use position absolute and set left or right and top or bottom. To me floating is like asking the browser to do it for you, and maybe some browsers (cough ie cough) will decide to draw it a little differently.
Form markup and CSS will always be a personal choice. Sure, there are some rights and wrongs semantically and technically from a CSS point of view, but there certainly isn't one (or even a few) "right" techniques.
My personal preference is to float the label left and contain my inputs inside lists, which I personally consider more semantic than a div or p tag.
HTML:
<form>
<fieldset>
<ol>
<li>
<label for="input1">Label 1</label>
<input type="text" name="input1" id="input1">
</li>
<li>
<label for="input2">Label 2</label>
<input type="text" name="input2" id="input2">
</li>
<li>
<label for="input3">Label 3</label>
<input type="text" name="input3" id="input3">
</li>
</ol>
<button type="submit">Submit</button>
</fieldset>
</form>
CSS:
li {
clear: left;
margin-bottom: 10px;
}
label {
float: left; /* You could use "display: inline-block;" instead. */
margin-right: 10px;
width: 80px;
}
tables is also a solution.
also , Div with 2 inner divs( left and right)
or 1 div with both elements with float:left with margin-left.
Is there a solution to the problem illustrated in the code below? Start by opening the code in a browser to get straight to the point and not have to look through all that code before knowing what you're looking for.
<html>
<head>
<title>Input ID creates problems</title>
<style type="text/css">
#prologue, #summary { margin: 5em; }
</style>
</head>
<body>
<h1>Input ID creates a bug</h1>
<p id="prologue">
In this example, I make a list of checkboxes representing things which could appear in a book. If you want some in your book, you check them:
</p>
<form>
<ul>
<li>
<input type="checkbox" id="prologue" />
<label for="prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="chapter" />
<label for="chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="summary" />
<label for="summary">summary</label>
</li>
<li>
<input type="checkbox" id="etc" />
<label for="etc">etc</label>
<label>
</li>
</ul>
</form>
<p id="summary">
For each checkbox, I want to assign an ID so that clicking a label checks the corresponding checkbox. The problems occur when other elements in the page already use those IDs. In this case, a CSS declaration was made to add margins to the two paragraphs which IDs are "prologue" and "summary", but because of the IDs given to the checkboxes, the checkboxes named "prologue" and "summary" are also affected by this declaration. The following links simply call a javascript function which writes out the element whose id is prologue and summary, respectively. In the first case (prologue), the script writes out [object HTMLParagraphElement], because the first element found with id "prologue" is a paragraph. But in the second case (summary), the script writes out [object HTMLInputElement] because the first element found with id "summary" is an input. In the case of another script, the consequences of this mix up could have been much more dramatic. Now try clicking on the label prologue in the list above. It does not check the checkbox as clicking on any other label. This is because it finds the paragraph whose ID is also "prologue" and tries to check that instead. By the way, if there were another checkbox whose id was "prologue", then clicking on the label would check the one which appears first in the code.
</p>
<p>
An easy fix for this would be to chose other IDs for the checkboxes, but this doesn't apply if these IDs are given dynamically, by a php script for example.
Another easy fix for this would be to write labels like this:
<pre>
<label><input type="checkbox" />prologue</label>
</pre>
and not need to give an ID to the checkboxes. But this only works if the label and checkbox are next to each other.
</p>
<p>
Well, that's the problem. I guess the ideal solution would be to link a label to a checkboxe using another mechanism (not using ID). I think the perfect way to do this would be to match a label to the input element whose NAME (not ID) is the same as the label's FOR attribute. What do you think?
</p>
</body>
</html>
it's been resolved here:
https://stackoverflow.com/a/8537641
just do it like this
<label><input type="checkbox">Some text</label>
The best, to my mind, what you can do, is to rename all the checkboxes, by adding some prefix to their ids, for example input
<ul>
<li>
<input type="checkbox" id="input_prologue" />
<label for="input_prologue">prologue</label>
</li>
<li>
<input type="checkbox" id="input_chapter" />
<label for="input_chapter">chapter</label>
</li>
<li>
<input type="checkbox" id="input_summary" />
<label for="input_summary">summary</label>
</li>
<li>
<input type="checkbox" id="input_etc" />
<label for="input_etc">etc</label>
</li>
</ul>
This way you will not have any conflicts with other ids on a page, and clicking the label will toggle the checkbox without any special javascript function.
EDIT: In retrospect, my solution is far from ideal. I recommend that you instead leverage "implicit label association" as shown in this answer: stackoverflow.com/a/8537641/884734
My proposed, less-than-ideal solution is below:
This problem can be easily solved with a little javascript. Just throw the following code in one of your page's js files to give <label> tags the following behavior:
When a label is clicked:
If there is an element on the page with an id matching the label's for attribute, revert to default functionality and focus that input.
If no match was found using id, look for a sibling of the label with a class matching the label's for attribute, and focus it.
This means that you can lay out your forms like this:
<form>
<label for="login-validation-form-email">Email Address:</label>
<input type="text" class="login-validation-form-email" />
</form>
Alas, the actual code:
$(function(){
$('body').on('click', 'label', function(e){
var labelFor = $( this ).attr('for');
if( !document.getElementById(labelFor) ){
e.preventDefault(); e.stopPropagation();
var input = $( this ).siblings('.'+labelFor);
if( input )
input[0].focus();
}
})
});
Note: This may cause issues when validating your site against the W3C spec, since the <label> for attribute is supposed to always have a corresponding element on the page with a matching ID.
Hope this helps!
Simply put, an ID is only supposed to be used once on a page, so no they wouldn't design a workaround for multiple ID's on a single page which aren't supposed to exist.
To answer the rest of the question: no, the ID attribute is the only thing a label's 'for' attribute will look at. You can always use a JavaScript onclick event to fetch the input by name and change it, though that seems overly complicated when you can just fix your ID issue, which would make a lot more sense.
Maybe easy straightforward solution would be using uniqueid() php or other programming language alternative function.
Unlike the accepted answer, I agree with the solution proposed by FantomX1, generate a random id for every checkbox and use this id for the label associated to the checkbox.
But I would generate the random id using a uuid (see Create GUID / UUID in JavaScript?)
i was struggling with this today and thought i could share my result, because it seems there're no others in googles top-ranks. So here's my first Stack-Post (the trick is to stretch the checkbox over the other elements but keeping them clickable by using z-index):
first: credits for the base accordion:
https://code-boxx.com/simple-responsive-accordion-pure-css/
.tab{
position: relative;
max-width: 600px;
z-index:1;
}
.tab input{
padding: 100%;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index:2;
cursor: pointer;
}
.tab label{
display: block;
margin-top: 10px;
padding: 10px;
color: #fff;
font-weight: bold;
background: #2d5faf;
}
.tab label span{
position:relative;
z-index:3;
cursor:text;
}
.tab .tab-content{
position:relative;
background: #ccdef9;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
z-index:3;
}
.tab .tab-content p{
padding: 10px;
}
.tab input:checked ~ .tab-content{
max-height: 100vh;
}
.tab label::after{
content: "\25b6";
position: absolute;
right: 10px;
top: 10px;
display: block;
transition: all 0.4s;
}
.tab input:checked ~ label::after{
transform: rotate(90deg);
}
<div>
<div class="tab">
<input type="checkbox">
<label><span>Tab 1</span></label>
<div class="tab-content"><p>Should the pace attack?</p></div>
</div>
<div class="tab">
<input type="checkbox">
<label><span>Tab 2</span></label>
<div class="tab-content"><p>Some other Text</p></div>
</div>
</div>
EDIT:
sorry for not answering the original question but i'm on work and i think the principle is clear, right?
Regarding html forms, a very common markup pattern is:
<form ...>
<p>
<label>Name:</label>
<input .../>
</p>
<p>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
How much markup (classes, etc.) do you typically provide to allow for the most flexible visual formatting of the form? That is, how much markup do you add to help with your css selectors and do you use generic selectors?
<form ...>
<p class='name'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
vs.
<form class='person' ...>
<p class='name string'>
<label>Name:</label>
<input .../>
</p>
<p class='birthdate date'>
<label>Birthdate:</label>
<input .../>
</p>
..
<input type=submit/>
</form>
In the second case, adding generic types ("date") straight from the database can make it more easy to consistently format date fields. Wrapping a grouping ("person") to show the model from which the fields come, can help too. (Or I could have used an internal DIV.) Yet, to increase css reuse, I find myself adding extra markup. In some books I've read I hear that the less markup, the better (and that line can be very gray though it rings true to me). For example, I could very well have used the markup from one of the prior blocks and added a lot more selectors to the css.
What are your principles for deciding just how much markup makes sense? Or how much to put on the css side?
Also, I know that I can select against the name of the input, but since that's a nested element I lose my ability to control formatting from the outer wrapper ("p") which is usually where I want that extra control.
I tend to use definition list tags to style my forms.
<form>
<dl>
<dt><label for="name">Name:</label></dt>
<dd><input name="name" /></dd>
<dt><label for="birthdate">Birthdate:</label></dt>
<dd><input name="birthdate" /></dd>
...
</dl>
</form>
I also use the following CSS:
FORM DT {
clear:both;
width:33%;
float:left;
text-align:right;
}
FORM DD {
float:left;
width:66%;
margin:0 0 0.5em 0.25em;
}
More information here: http://www.clagnut.com/blog/241/
It's a lot of markup, but the effect is consistent and effective.
Another arguably acceptable method of styling forms is to use tables. Just think of the form as "interactive tabular data."
I wouldn't use a <p> tag to group a label and its field, since it's not a paragraph. If you have no other use for <fieldset> you could use one per "row". If you have three inputs for birthday then a fieldset is totally appropriate.
A definition list as Gavin suggested isn't a bad idea but it does seem like unnecessary markup - you can just style the labels and inputs to the right widths and float them.
Adding wrapper classes is also perfectly valid - remember that you don't have to use them in CSS, they add a semantic layer regardless. There may even be a microformat you can use in some cases.
You can also use attribute selectors to style inputs nicely:
input[type="text"], input[type="password"] {
border: 1px solid #ccc;
background: #fff;
}
input[type="submit"], input[type="reset"] {
border: 1px solid #666;
background: #ccc;
}
I do try and keep html markup to a minimum.
HTML forms are the hardest thing to keep html and css to a minimum, as it is very hard to target all the various inputs across all browsers without adding classes to them, such as Textbox to textboxes etc.
If all your forms for that site use simple textboxes and not much of anything else, the minimal mark-up approach works just fine. However controls with complex mark-up such as the telerik RAD controls don't play with simple mark-up and often extra markup and classes are needed.
These small tricks add mark-up, but also make the css much cleaner and will no doubt making styling such elements much easier.
For other general html/css, I tend to use as few classes as possible, such as
.Menu {}
.Menu li {}
.Menu li a {}
This sort of pattern can be re-used a lot for repeated data, and templates can be made and designed with very little html mark-up.
Sometimes its un-avoidable adding classes and whatnot, but I think if your generally thinking about both css and html you should end up with slick markup.
From site to site, I rarely re-use CSS. Its so quick and easy knocking up styles for whatever you wish, re-designing an existing skin to fit a new site is often not worth it IMO.
Mainly with CSS I tend to take the knowledge i've learnt from previous sites and apply it to the new sites, to make coding for all browsers easy :)
After many years, I've arrived at:
<fieldset>
<div>
<label for="Whatever">A text field</label>
<input type="text" id="Whatever" />
</div>
<div class="required">
<label for="RequiredField">A required field</label>
<input type="text" id="RequiredField" />
</div>
<div class="stretch">
<label for="LongField">A long field (stretched across 100% form width)</label>
<input type="text" id="LongField" />
</div>
<div class="cmd">
<button type="submit">Do whatever</button>
</div>
<fieldset>
Additionally, I have two CSS classes that I can apply:
fieldset div {
clear: both;
}
fieldset.block label {
display: block;
font-weight: bold; /* labels above fields */
}
fieldset.aligned label:first-child {
width: 20%;
float: left;
}
fieldset.block .stretch input,
fieldset.block .stretch textarea,
fieldset.block .stretch select {
width: 100%;
}
fieldset.aligned .stretch input,
fieldset.aligned .stretch textarea,
fieldset.aligned .stretch select {
width: 79%; /* leave space for the label */
}
Personally I just do:
<form>
<label for="foo">Foo</label>
<input type="text" id="foo" name="foo" />
<br />
<label for="foo2" class="block">Foo 2</label>
<textarea id="foo2" name="foo2"></textarea>
<br />
Then for css it depends whether or not I want the element to be inline with it or not
form label.block{
display: block;
}
Or you can block + float them like #DisgruntledGoat wrote. (I really hate extra markup)