Zope3 - Cascading Style Sheets - Style Guide

Introduction

See the proposal at: http://dev.zope.org/Zope3/CascadingStyleSheetStyleGuide

Used styles in forms and widgets

No. Tag Class Description Sample HTML code Rendered result
HTML elements
These elements are declared for use in standard page templates used in ZCML directives. Schema widgets also use these 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 (by clicking on the label) to activate the input field, so that it is easier to focus a text input, a check box or a radio box, just like it is in heavy client applications such as Firefox.

More 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>