Structure HTML

Un formulaire de base est ainsi structuré :

<div class="formulaire_spip formulaire_editer formulaire_editer_nomformulaire" id="formulaire_editer_nomformulaire-id"> <a id="nomformulaire" name="nomformulaire"></a> <form action="#" method="post"> <fieldset> <legend>Une légende</legend> <p class="explication">Un texte d'explication</p> <ul> <li class="editer_nomlabel obligatoire erreur"> <label for="nomlabel">Courriel</label> <em class="aide">#AIDER{arttitre}</em> <p class="explication"> Explication du label</p> <span class="erreur_message">Message d'erreur</span> <input type="type" class="type" name="nomlabel" id="nomlabel" value="" /> </li> </ul> </fieldset> </form> </div>

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 :

<div class="formulaire_spip formulaire_editer formulaire_editer_nomformulaire formulaire_editer_nomformulaire-id"> <a id="nomformulaire" name="nomformulaire"></a> <form action="#" method="post"> <ul> <li class="editer_nomlabel obligatoire"> <label for="nomlabel">Courriel</label> <input type="type" class="type" name="nomlabel" id="nomlabel" value="" /> </li> </ul> </form> </div>

Les classes spéciales

• « explication » : pour indiquer un message d'explication (qui porte soit pour l'ensemble des champs, soit sur une étape). Exemple :

  .

• « attention » : pour afficher un message concernant un champ d'édition critique. Exemple : <:texte_login_precaution:>.
• « obligatoire » : pour signaler un champ obligatoire, à appliquer à l'élément de liste parent. Exemple :
• .
• « erreur » : pour signaler une étape en erreur, à appliquer à l'élément de liste parent. Exemple :
• . chaque erreur bénéficie d'un message explicatif, portant la class « erreur_message » : .

Cadre englobant

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

<div class="cadre-formulaire-editer"> <div class="entete-formulaire"></div> <div class="formulaire_editer formulaire_editer_site formulaire_editer_site-#ENV{id_site,nouveau}"></div> </div>

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

<div class="formulaire_editer formulaire_editer_site formulaire_editer_site-#ENV{id_site,nouveau}"> [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>] [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>] </div>

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 :

[(#ENV**{erreurs}|table_valeur{nom_du_champ})]

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

<li class="editer_descriptif[ (#ENV**{erreurs}|table_valeur{descriptif}|oui)erreur]"> <label for="descriptif"><:texte_descriptif_rapide:></label> [<span class='erreur_message'>(#ENV**{erreurs}|table_valeur{desctiptif})</span>] <textarea name='descriptif' id='descriptif' rows='2' cols='40'>[(#ENV**{descriptif})]

Particularités pour les styles css

Champs input

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

<input type="text" class="text" name="titre" id="titre" value="[(#ENV**{titre})]" />

Boutons de soumission

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

<p class="boutons"><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></div>

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

<li class="editer_syndication"> <div class="choix"> <input type='radio' class="radio" name='syndication' value='non' id='syndication_non'[ (#ENV{syndication}|=={non}|?{'checked="checked"'})] /> <label for='syndication_non'><:bouton_radio_non_syndication:></label> </div> <div class="choix"> <input type='radio' class="radio" name='syndication' value='oui' id='syndication_oui'[ (#ENV{syndication}|=={oui}|?{'checked="checked"'})] /> <label for='syndication_oui'><:bouton_radio_syndication:><em>#AIDER{rubsyn}</em></label> </div> </li>

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 :

- Déclarer un tableau :

- Récupérer la valeur associée à une clef en utilisant le filtre |table_valeur :

- Remplir un tableau dynamiquement en utilisant le filtre |push :

ou encore en forçant la valeur des clefs avec la fonction php utilisée comme filtre |array_merge :

Attention 1 : le filtre |array_merge ne tient pas compte de la clef à forcer (#COMPTEUR_BOUCLE dans l'exemple ci-dessus) si cette clef est de type numérique. Auquel cas deux solutions :

• soit préfixer cette clef avec une valeur alphabétique :#ARRAY{k#COMPTEUR_BOUCLE, #ID_MOT} ;
• soit inverser clef et valeur (à condition que valeur ne soit pas elle aussi numérique) puis appliquer la fonction php comme filtre |array_flip sur le tableau final :[(#SET{mots_choisis, #GET{mots_choisis}|array_flip)]

Attention 2 : il faut déclarer le tableau avant son remplissage dans la boucle.

Note 1 : l'ordre de remplissage du tableau est déterminé par l'ordre d'apparition des données dans la boucle, donc est dépendant du ou des critères de tri qui sont appliqués à celle-ci.
Note 2 :[(#GET{mon_tableau}|table_valeur{6})] affichera la valeur associée à la clef numéro 6 du tableau ; c'est-à-dire la 7ème valeur : la numérotation des clefs débutant à zéro.

- Utiliser le tableau dans une boucle avec l'opérateur IN :

- Affichage conditionnel en fonction des valeurs d'un tableau :

---

autre exemple avec une variable 'lolo' passée dans l'url :
http://le_site/-ma-rubrique-?lolo=6

---

Pour ne pas risquer de générer une erreur « Warning : in_array() [function.in-array] : Wrong datatype for second argument. » dans le cas où la variable passée ne serait pas de type array on pourra utiliser le filtre |in_any qui rattrape l'erreur sans afficher l'alerte, et permet d'afficher une valeur alternative.