SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [vi] [zh] Espace de traduction

Télécharger

Structure HTML des formulaires de SPIP 2

Formulaires d’édition utilisés dans l’espace privé

Juin 2009 — mis à jour le : Juillet 2009

Toutes les versions de cet article :

Document de références précisant comment les formulaires dans SPIP doivent être structurés


Structure HTML

Un formulaire de base est ainsi structuré :

Le div englobant porte la classe générique formulaire_spip. Les formulaires d’édition de l’espace privé portent de plus la classe formulaire_editer indiquant qu’on a affaire à un formulaire d’édition de données d’une base.

Le premier fieldset étant optionnel, on peut aussi écrire, sans le fieldset et sans les paragraphes optionnels :

Les classes spéciales

  • « explication » : pour indiquer un message d’explication (qui porte soit pour l’ensemble des champs, soit sur une étape). Exemple : <p class="explication">.
  • « attention » : pour afficher un message concernant un champ d’édition critique. Exemple : <em class="attention"><:texte_login_precaution:></em>.
  • « obligatoire » : pour signaler un champ obligatoire, à appliquer à l’élément de liste parent. Exemple : <li class="obligatoire">.
  • « erreur » : pour signaler une étape en erreur, à appliquer à l’élément de liste parent. Exemple : <li class="erreur">. chaque erreur bénéficie d’un message explicatif, portant la class « erreur_message » : <span class="erreur_message">.

Cadre englobant

Ce formulaire peut optionnelement être inclu dans un cadre-formulaire-editer, et peut alors contenir un entete-formulaire :

Gestion des messages réussite/erreur

Messages globaux

Un formulaire comporte obligatoirement deux paragraphes permettant d’afficher les réussites et erreurs globales qui ont pu apparaître à la soumission. Les variables d’environnements message_ok et message_erreur sont des retours envoyés par SPIP (formulaires CVT).

Messages spécifiques

Chaque champ de formulaire, encapsulé dans un li peut recevoir un message d’erreur spécifique. Celui-ci est contenu dans la le tableau d’environnement ’erreurs’ et peut être obtenu de la sorte :

On peut attribuer la classe ’erreur’ au li et afficher une erreur spécifique si elle existe de la sorte :

Particularités pour les styles css

Champs input

Chaque <input /> différent de hidden doit posséder une classe identique à son type (afin de palier à un déficience du navigateur Internet Explorer) :

Boutons de soumission

Les boutons de soumissions sont inclus dans une boîte .boutons (qui peut recevoir plusieurs boutons) :

radio/checkbox

Dans le cas de bouton radio ou checkbox, on peut ne pas reprendre tout a fait la même structure, par exemple pour avoir le bouton avant le label, ou pour avoir la liste radio en horizonal

Chaque entrée (radio + label) peut alors être encadrée par un bloc .choix

Par défaut, la liste est verticale. Pour rendre la liste horizontale, il suffit de spécifier que .champ en question est de type inline :

.formulaire_editer .editer_syndication .choix {display:inline;}

P.-S.

Principes généraux de ces formulaires pour avoir les labels alignés à gauche

On se retrouve dans un cas où l’on a :

1) on applique un padding gauche au LI supérieur à la taille du label (ex:120px)

2) on demande au label d’être flottant et décalé sur la gauche (via un margin négatif)

3) lorsqu’un fieldset suit un li, on le décale aussi vers la gauche (seul IE n’en tient pas compte) pour que le fieldset prenne toute la largeur aussi


Voir le squelette de cette page Site réalisé avec SPIP | Espace de traduction | Espace privé