HTML CSS Field Layout I've had some help designing my field boxes and I was hoping to get feedback on the code. The fields will increase in complexity which is why I thought to structure it this way (image upload fields, textbox with WYSIWYG controls etc.

CSS

.error { height: 27px; background-color: red; margin-bottom: 4px;} 
.lft { float: left; }
ul, li { list-style-type: none; vertical-align:middle; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333;}
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
.fieldwrapper{ padding: 0 5px 0 0; overflow: hidden;}
label{width:200px; display:inline-block; float:left}​


HTML

&lt;ul&gt;
    &lt;li &gt;
&lt;div class="r6 dc3 ts2 p4"&gt;
    &lt;div class="error r6"&gt;Error!&lt;/div&gt;
&lt;label field_id="None" for="sender"&gt;Sender email address&lt;/label&gt;
&lt;div class="fieldwrapper"&gt;
&lt;input class="field r2" placeholder="Email" type="text" value=""&gt;
    &lt;p&gt;This is just me explaining how to use this particular field. It is very interesting, don't you know...&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;/li&gt;&lt;/ul&gt;


​
JSfiddle link
LNIK
If the input with the placeholder="Email" is actually an email address, then the type attribute should be set to email, not text.  (Reference: http://www.w3.org/TR/html-markup/input.email.html)
Declare an id attribute and a name attribute on the email field.  This will be necessary if you want to access the elements or their posted values explicitly. (Reference: http://reference.sitepoint.com/html/input/name , http://reference.sitepoint.com/html/core-attributes/id)
Once you have declared an id on the input, set the for attribute on the label equal to that id.  This will enable a behavior such that clicking on the label will focus on the input for the corresponding field.  (Reference: http://reference.sitepoint.com/html/label)  
Use descriptive, semantic class names.  Good class names should indicate the nature of the content, not the format of the layout.  Instead of fieldwrapper try sender-email. (Reference : http://www.w3.org/QA/Tips/goodclassnames )
This depends on what HTML version you are using, but the HTML5 spec says that form elements should be wrapped in p tags, not divs.  (Reference: http://dev.w3.org/html5/spec/forms.html#writing-a-form's-user-interface)


The code that would correspond to my comments might look like : 

&lt;p class="email-input"&gt;
    &lt;label for="sender"&gt;Sender email address:&lt;/label&gt;
    &lt;input id="sender" name="sender" type="email" placeholder="Email" class="r2"&gt;
&lt;/p&gt;
&lt;p&gt;This is just me explaining how to use this particular field. It is very interesting, don't you know...&lt;/p&gt;


One thing you'll notice is that there are less CSS classes.  I have replaced the field-wrapper with email-input and completely removed the field class.  You can migrate the .field-wrapper CSS to the .email-input selector, and the field CSS to the .email-input &gt; input selector.