Zope3 - Cascading Style Sheets - Style Guide

Introduction

See the proposal at:
http://dev.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/CascadingStyleSheetStyleGuide

Used styles in forms and widgets

No. Tag Class Description Sample HTM code Rendered result
HTML elements
This elements are declared for useing in standard page templates used in ZCML directives. Schema widgets useing also this styles.
1 a -- Link <a href="#">a link</a> a link
2 p -- Block text <p>block text</p>

block text

Form elements
1 form -- form <form>some text</form>
some text
2 div row Contains a input field with label <div class="row">
   label and input field
</div>
label and input field
2.1 div row div.label Contains a input field with label <div class="row">
   <div class="label">
      <label for="yx" title="xy">
           Label text
       </label>
   </div>
</div>
2.2 div row div.field Contains a input field with label <div class="row">
   <div class="field">
       <input type=text" id="xy">
   </div>
</div>
2.3 div row div.label div.field Contains a input field with label <div class="row">
   <div class="field">
      <label for="yx" title="xy">
           Label text
       </label>
       <input type=text" id="xy">
   </div>
</div>
           

Formating rules

No. Description Sample HTML code
Form rules
Form fields
1

Use the following coding style to define form fields and labels.

<div class="row">
   <div class="label">
       <label for="yx" title="xy">
           Label text
       </label>
   </div>
   <div class="field">
       <input type=text" id="xy"...>
   </div>
</div>
Associate labels explicitly with their controls
3


In other words it means: use <label> along with your <input type="text"/>, your <input type="checkbox"/> and your <input type="radio"/> elements.

Using labels makes it possible to use the pointer on the label (clicking on the label) to active the input, so that it is easier to select a text input, a check box or a radio box, just like it is in heavy client applications such as Firefox.

Mor information about "Labeling form controls":
http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels

 

<div class="row">
   <div class="label">
       <label for="yx" title="xy">
           Label text
       </label>
   </div>
   <div class="field">
       <input type=text" id="xy"...>
   </div>
</div>