HTML structure
A basic form is structured as follows:
The surrounding div is assigned the generic class formulaire_spip. Data entry forms in the private zone are additionally assigned the class formulaire_editer, indicating that we’re dealing with a database data entry form.
The first fieldset being optional, we could also code it without the fieldset and without the optional paragraphs:
The special classes
- "explication": to indicate an explanatory message (which applies either to all of the fields, or to just one step). Example:
<p class="explication">. - "attention": to display a message concerning a essential entry field. Example:
<em class="attention"><:text_login_warning:></em>. - "obligatoire": to indicate a compulsory field to be applied to the parent list element. Example:
<li class="obligatoire">. - "erreur": to indicate a step causing an error, to be applied to the parent list element. Example:
<li class="erreur">. Each error uses an explanatory message tagged with the class "erreur_message":<span class="erreur_message">.
The surrounding frame
This form may optionally be included within a cadre-formulaire-editer (entry form frame), and can also therefore contain a entete-formulaire (form header):
Managing the success/error messages
Global messages
A form absolutely must include two paragraphs enabling the display of the global success and error messages which may arise after submitting the form. The environment variables message_ok and message_erreur are the parameters returned by SPIP (using the CVT forms).
Special messages
Each field on the form, wrapped within an li, can receive a special error message. This is contained in the ’erreurs’ environment table array and can be retrieved as follows:
We can assign the ’erreur’ class to the li and display a special error if there is one as shown below:
Particularities for CSS styling
Input fields
Every <input /> that is not hidden must have a class identical to its type (in order to remediate a deficiency in Internet Explorer):
Submit buttons
The submit buttons are included in a .boutons box (which can accept several buttons):
radio/checkbox
For radio buttons or checkboxes, we are permitted to not follow exactly the same structure, for example having the button before the label, or having radio buttons displayed horizontally.
Each (radio + label) entry may therefore be framed within a .choix block:
By default, the list is displayed vertically. To make the list horizontal, you only need to specify that the .champ (field) in question is an inline type:
.formulaire_editer .editer_syndication .choix {display:inline;}