HTML CSS Field Layout

Question

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

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

​ JSfiddle link LNIK

Answer 1

1. 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)

2. 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)

3. 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)

4. 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 )

5. 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 :

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

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 > input selector.