Displaying the form

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>

Author Mark Baber Published : Updated : 01/06/10

Translations : English, Español, français