A file
formulaires/joli.html is called from a template file using the syntax
#FORMULAIRE_JOLI, which then calls and displays the form.
The HTML of the form follows a standard format for all SPIP forms. The fields of the form are surrounded in a list of elements using
ul/li HTML markup.
<div class="formulaire_spip formulaire_demo">
<form action="#ENV{action}" method="post"><div>
#ACTION_FORMULAIRE{#ENV{action}}
<ul>
<li class="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>
For the form to work properly, the
action attribute must be provided by the
#ENV{action} variable which is automatically calculated by SPIP. In the same fashion, the
#ACTION_FORMULAIRE{#ENV{action}} tag must be present, as it calculates and adds the security key which will be automatically verified when the form is received.
{{A few comments:}}
The form is surrounded by a CSS class called
formulaire_spip and by a second with its own name, in this case
formulaire_demo. The name can be recovered more easily using the context function:
#ENV{form} (or directly with #FORM), which could generate:
<div class="formulaire_spip formulaire_#FORM">.
The
<li> mark-up tags are assigned CSS classes of
editer_xx, where xx is the field name, and possibly the
obligatoire class to indicate (visually) that this field must be provided before submitting the form.
-* The
input tags are assigned a CSS class appropriate to the each field type (to remediate a deficiency in Internet Explorer with CSS that does not understand
input[type=text])
-* The submission buttons are framed with a CSS class of
boutons
{{Easily employing AJAX}}
Surrounding the form’s tag with an "ajax" CSS class tells SPIP to use AJAX, thereby making it possible to reload only the form and not the whole page.
<div class="ajax">
#FORMULAIRE_JOLI
</div>