Een bestand formulaires/mooi.html
wordt in een skelet aangeroepen met #FORMULAIRE_MOOI
waarna het formulier wordt weergegeven.
Vanaf SPIP 3.x is deze structuur aangepast! Bekijk hiervoor de volgende documentatie: De HTML-structuur van formulieren in SPIP
De HTML volgt een standaard schrijfwijze voor alle formulieren in SPIP. De formuliervelden worden opgenomen in een ul/li
structuur.
Vanaf SPIP 3.1 werd deze ul/li
structuur vervangen door div
voor een betere toegankelijkheid.
<div class="formulaire_spip formulaire_demo">
<form action="#ENV{action}" method="post"><div>
#ACTION_FORMULAIRE{#ENV{action}}
<ul class="editer-groupe">
<li class="editer editer_la_demo obligatoire">
<label for="la_demo">De 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>
Voor een goede werking van het formulier wordt attribuut action
automatisch door SPIP berekend en via #ENV{action}
beschikbaar gemaakt. Ook moet het baken #ACTION_FORMULAIRE{#ENV{action}}
aanwezig zijn. Dit berekent en voorziet veiligheidssleutels die weer worden gecontroleerd wanneer gegevens aan het formulier worden aangeleverd.
Enkele opmerkingen:
- Het formulier wordt omhuld door een CSS class
formulaire_spip
en een andere met zijn eigen naam, hierformulaire_demo
. Deze naam kan op een eenvoudige manier worden opgehaald uit de context:#ENV{form}
(of direct#FORM
), wat resulteert in:<div class="formulaire_spip formulaire_#FORM">
. - De container
<ul>
krijgt CSS classediter-groupe
. - De tags
<li>
krijgen CSS classediter
,editer_xx
waarbij xx de naam van het veld is, en eventueelobligatoire
om (visueel) aan te geven dat het een verplicht veld is. - De tags
input
hebben een CSS class naar hun type (om Internet Explorer te helpen datinput[type=text]
niet begrijpt). - De knoppen bevinden zich binnen een CSS class
boutons
.
Eenvoudig AJAX gebruiken
Het geheel omkaderen met een CSS class ajax
vertelt SPIP dat AJAX moet worden gebruikt en niet de gehele pagina opnieuw te laden.
<div class="ajax">
#FORMULAIRE_MOOI
</div>