Estructura HTML
Un formulari de base està estructurat d’aquesta manera:
<div class="formulaire_spip formulaire_editer formulaire_editer_nomformulaire" id="formulaire_editer_nomformulaire-id">
<a id="nomformulaire" name="nomformulaire"></a>
<form action="#" method="post">
<fieldset>
<legend>Una llegenda</legend>
<p class="explication">Un text d'explicació</p>
<div class="editer-groupe">
<div class="editer editer_nomlabel obligatoire erreur">
<label for="nomlabel">Courriel</label>
<em class="aide">#AIDER{arttitre}</em>
<p class="explication"> Explication du label</p>
<span class="erreur_message">Missatge d'error</span>
<input type="type" class="type" name="nomlabel" id="nomlabel" value="" />
</div>
</div>
</fieldset>
</form>
</div>
El div englobant porta la classe genèrica formulaire_spip. Els formularis d’edició de l’espai privat porten a més la classe formulaire_editer que indica que es tracta d’un formulari per editar dades en una base de dades.
El primer fieldset és opcional i també es pot escriure sense el fieldset i sense els paràgrafs opcionals:
<div class="formulaire_spip formulaire_editer formulaire_editer_nomformulaire formulaire_editer_nomformulaire-id">
<a id="nomformulaire" name="nomformulaire"></a>
<form action="#" method="post">
<div class="editer-groupe">
<div class="editer editer_nomlabel obligatoire">
<label for="nomlabel">Courriel</label>
<input type="type" class="type" name="nomlabel" id="nomlabel" value="" />
</div>
</div>
</form>
</div>
Les classes especials
- «explication»: per indicar un missatge d’explicació (que pot ser o bé pel conjunt de camps o bé per una etapa). Exemple :
<p class="explication">. - «attention»: per mostrar un missatge relatiu a un camp d’edició critica. Exemple :
<em class="attention"><:texte_login_precaution:></em>. - «obligatoire»: per assenyalar un camp obligatori, a aplicar a l’element de la llista parent. Exemple:
<li class="obligatoire">. - «erreur»: per assenyalar una etapa en error, a aplicar a l’element de la llista parent. Exemple:
<li class="erreur">. cada error es beneficia d’un missatge explicatiu, que porta la class «erreur_message»:<span class="erreur_message">.
Marc englobant
Opcionalment, aquest formulari es pot incloure en un cadre-formulaire-editer, i llavors pot tenir un entete-formulaire:
<div class="cadre-formulaire-editer">
<div class="entete-formulaire"></div>
<div class="formulaire_editer formulaire_editer_site formulaire_editer_site-#ENV{id_site,nouveau}"></div>
</div>
Gestió dels missatges èxit/error
Missatges globals
Un formulari comporta obligatòriament dos paràgrafs que permeten mostrar els èxits i els erros globals que han pogut aparèixer. Les variables d’entorn message_ok i message_erreur són retorns enviats per SPIP (formularis CVT).
<div class="formulaire_editer formulaire_editer_site formulaire_editer_site-#ENV{id_site,nouveau}">
[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV*{message_ok})</p>]
[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
</div>
Missatges específics
Cada camp del formulari, encapsulat en un pot rebre un missatge d’error específic. Aquest es troba a la taula d’entorn ’erreurs’ i es pot obtenir d’aquesta manera:
[(#ENV**{erreurs}|table_valeur{nom_du_champ})]
Es pot atribuir la classe ’erreur’ al li i mostrar un error específic si existeix, d’aquesta manera:
<div class="editer editer_descriptif[ (#ENV**{erreurs}|table_valeur{descriptif}|oui)erreur]">
<label for="descriptif"><:texte_descriptif_rapide:></label>
[<span class='erreur_message'>(#ENV**{erreurs}|table_valeur{desctiptif})</span>]
<textarea name='descriptif' id='descriptif' rows='2' cols='40'>[(#ENV**{descriptif})]</textarea>
</div>
Particularitats pels estils CSS
Camps input
Cada <input /> diferent de hidden ha de posseir una classe idèntica al seu tipus (per tal de mitigar una deficiència del navegador Internet Explorer):
<input type="text" class="text" name="titre" id="titre" value="[(#ENV**{titre})]" />
Botons de submissió
Els botons de submissió estan inclosos en una caixa .boutons (que pot rebre diversos botons):
<p class="boutons"><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>
ràdio/checkbox
En el cas del botó ràdio o checkbox, podem no reprendre la mateixa estructura, per exemple per tenir el botó abans de l’etiqueta, o per tenir la llista ràdio horitzontalment.
Llavors cada entrada (ràdio + etiqueta) pot ser emmarcada per un bloc .choix
<div class="editer editer_syndication">
<div class="choix">
<input type='radio' class="radio" name='syndication' value='non' id='syndication_non'[ (#ENV{syndication}|=={non}|?{'checked="checked"'})] />
<label for='syndication_non'><:bouton_radio_non_syndication:></label>
</div>
<div class="choix">
<input type='radio' class="radio" name='syndication' value='oui' id='syndication_oui'[ (#ENV{syndication}|=={oui}|?{'checked="checked"'})] />
<label for='syndication_oui'><:bouton_radio_syndication:><em>#AIDER{rubsyn}</em></label>
</div>
</div>
Per defecte, la llista és vertical. Per fer que la llista sigui horitzontal, en tindrem prou especificant que .champ en qüestió és del tipus inline:
.formulaire_editer .editer_syndication .choix {display:inline;}