The HTML structure of forms in SPIP

Data entry forms used in the private zone

A reference document detailing how forms in SPIP [1] should be structured

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):


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;}


[1starting with version SPIP 2.0

The general principles for these forms to have labels left-aligned.

Suppose we find ourselves with this scenario:

1) We apply a left padding to the first LI equal to the width of the label (e.g. 120px)

2) We ask that the label be floating and displaced to the left (using a negative margin)

3) Whenever a fieldset follows an LI, we also displace it to the left (only IE doesn’t recognise this) so that the fieldset also fills up the width

Author Mark Published : Updated : 14/06/15

Translations : català, English, français, Nederlands