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