Un fichier formulaires/demo.html
s’appelle dans un squelette par #FORMULAIRE_DEMO
qui affiche alors le formulaire.
Le HTML du formulaire suit une écriture standard pour tous les formulaires SPIP.
<div class="formulaire_spip formulaire_demo">
<form action="#ENV{action}" method="post"><div>
#ACTION_FORMULAIRE{#ENV{action}}
<div class="editer-groupe">
<div 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" />
</div>
</div>
<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">
. - Un conteneur global
<div>
reçoit la classe CSSediter-groupe
. - Chaque champ est entouré d’une balise
<div>
avec les classes CSSediter
,editer_xx
où xx est le nom du champ, et éventuellementobligatoire
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 pasinput[type=text]
) - Les boutons de soumission sont encadrés d’une classe CSS
boutons
- Par le passé, avant SPIP 3.1, les champs étaient dans une structure
<ul><li>
, qui a été remplacé par de simples<div>
pour une meilleure accessibilité.
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_DEMO
</div>