Un fichier
formulaires/joli.html s’appelle dans un squelette par
#FORMULAIRE_JOLI qui affiche alors le formulaire.
{{ Attention ce standard est modifié depuis SPIP 3.x }} Se reporter à la documentation suivante :
Structure HTML des formulaires de SPIP
Le HTML du formulaire suit une écriture standard pour tous les formulaires SPIP. Les champs du formulaire sont encadrés dans une liste d’éléments
ul/li.
{{À partir de SPIP 3.1, la structure
ul/li présentée ici est remplacée par des
div pour une meilleure accessibilité.}}
<div class="formulaire_spip formulaire_demo">
<form action="#ENV{action}" method="post"><div>
#ACTION_FORMULAIRE{#ENV{action}}
<ul class="editer-groupe">
<li class="editer editer_la_demo obligatoire">
<label for="la_demo">La demo</label>
<input type='text' name='la_demo' id='la_demo' value="#ENV{la_demo}" class="text" />
</li>
</ul>
<p class="boutons"><input type="submit" class="submit" value="<:pass_ok:>" /></p>
</div></form>
</div>
Pour le bon fonctionnement du formulaire, l’attribut
action doit être renseigné par la variable
#ENV{action} calculée automatiquement par SPIP. De même, la balise
#ACTION_FORMULAIRE{#ENV{action}} doit être présente, elle calcule et ajoute des clés de sécurité qui seront vérifiées automatiquement à la réception du formulaire.
{{Quelques remarques :}}
-* Le formulaire est encadré d’une classe CSS
formulaire_spip et d’une autre de son propre nom,
formulaire_demo ici. Le nom peut être récupéré plus agréablement par le contexte
#ENV{form} (ou
#FORM directement), ce qui peut donner :
<div class="formulaire_spip formulaire_#FORM">.
-* Le conteneur
<ul> reçoit la classe CSS
editer-groupe.
-* Les balises
<li> reçoivent des classes CSS
editer,
editer_xx où xx est le nom du champ, et éventuellement
obligatoire pour indiquer (visuellement) que ce champ est obligatoirement à remplir.
-* Les balises
input ont une classe CSS nommée comme leur type (pour pallier une déficience d’Internet Explorer en CSS qui ne comprenait pas
input[type=text])
-* Les boutons de soumission sont encadrés d’une classe CSS
boutons
{{{Utiliser AJAX facilement}}}
Entourer la balise formulaire d’une classe CSS ajax indique à SPIP d’utiliser AJAX permettant de ne recharger que le formulaire et non toute la page.
<div class="ajax">
#FORMULAIRE_JOLI
</div>