Databases
StackOverflow2013
Postsdbo
POCSS - Formatting Forms with label tags
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS - Formatting Forms with label tags
    text
    copied!<p>I've got a form that I'm trying to layout semantically and format with CSS. As it's produced dynamically (from ASP.NET MVC) some elements may be rendered as text rather than input tags as they may be read-only for that screen. I am trying to add a width to the label tags to neaten up the form and align the values/value boxes, but it seems I can only do this if I float them (is that correct?). That works OK for when I have rendered values after the label tag, but if the value is blank the left float seems to stack against the previous label, even though both are contained within p tags (these should be block level, yes?). What, if anything, am I doing wrong?</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /&gt;&lt;title&gt; Edit &lt;/title&gt; &lt;!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file --&gt; &lt;style type="text/css"&gt; div.FieldGroup {background-color: Blue; } p.Field { display: block; } span.NoteHeader { font-style: italic;} label { float: left; width: 150px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main"&gt; &lt;h2&gt;Edit&lt;/h2&gt; &lt;form action="" method="post"&gt; &lt;div id="MainSection" class="FieldGroup"&gt; &lt;fieldset&gt; &lt;legend&gt;Person Identification&lt;/legend&gt; &lt;p class="Field"&gt; &lt;label&gt;Name:&lt;/label&gt; Name &lt;/p&gt; &lt;p class="Field"&gt; &lt;label for="Colour"&gt;ChildStatus:&lt;/label&gt; &lt;select id="Colour" name="Colour"&gt; &lt;option value="10"&gt;Red&lt;/option&gt; &lt;option value="20"&gt;Yellow&lt;/option&gt; &lt;option selected="selected" value="30"&gt;Orange&lt;/option&gt; &lt;/select&gt; &lt;/p&gt; &lt;p class="Field"&gt; &lt;label for="Age"&gt;Age:&lt;/label&gt; &lt;input id="Age" name="Age" type="text" value="" /&gt; &lt;/p&gt; &lt;p class="Field"&gt; &lt;label&gt;Birthplace:&lt;/label&gt; &lt;/p&gt; &lt;p class="Field"&gt; &lt;label for="Reference"&gt;Reference:&lt;/label&gt; &lt;input id="Reference" name="Reference" type="text" value="" /&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Cheers</p> <p>MH</p> <p>(P.S. - I can't add in readonly textboxes to contain these blanks as they want plain text if they can't change the value)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload