Programmer avec SPIP 3.0
Documentation technique sur SPIP 3.0

> > > > Afficher le formulaire

Afficher le formulaire

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

  1. <div class="formulaire_spip formulaire_demo">
  2.  
  3. <form action="#ENV{action}" method="post"><div>
  4. #ACTION_FORMULAIRE{#ENV{action}}
  5. <ul class="editer-groupe">
  6. <li class="editer editer_la_demo obligatoire">
  7. <label for="la_demo">La demo</label>
  8. <input type='text' name='la_demo' id='la_demo' value="#ENV{la_demo}" class="text" />
  9. </li>
  10. </ul>
  11. <p class="boutons"><input type="submit" class="submit" value="<:pass_ok:>" /></p>
  12. </div></form>
  13. </div>

Télécharger

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.

  1. <div class="ajax">
  2. #FORMULAIRE_JOLI
  3. </div>

Télécharger