See the proposal at:
http://dev.zope.org/Wikis/DevSite/Projects/ComponentArchitecture/CascadingStyleSheetStyleGuide
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> | |
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> |
|
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 |
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":
|
<div class="row"> |