Estructura HTML
Un formulari de base està estructurat d’aquesta manera:
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:
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:
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).
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:
Es pot atribuir la classe ’erreur’ al li i mostrar un error específic si existeix, d’aquesta manera:
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):
Botons de submissió
Els botons de submissió estan inclosos en una caixa .boutons (que pot rebre diversos botons):
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
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;}