1
\$\begingroup\$

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

\$\endgroup\$
1
\$\begingroup\$
  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.

\$\endgroup\$
  • \$\begingroup\$ @JamesWillson no problem, good luck! \$\endgroup\$ – smartcaveman Oct 9 '12 at 17:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.