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 understandinput[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>