SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [uk] [vi] [zh] Espace de traduction

Descarregar

Estructura HTML dels formularis d’SPIP

Formularis d’edició utiiltzats a l’espai privat

Abril de 2010 — mis à jour le : Juny de 2015

Totes les versions d’aquest article:

Document de referència que precisa com han de ser estructurats els formularis a SPIP


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;}

P.-S.

Principis generals d’aquests formularis per tenir les etiquetes alineades a l’esquerre.

Ens trobem en el cas on tenim:

1) s’aplica un padding esquerre al LI superior a la mida de l’etiqueta (ex:120px)

2) es demana que l’etiqueta sigui flotant i decalada a l’esquerre (via un marge negatiu)

3) quan fieldset segueix un li, cal decalar-lo també cap a l’esquerre (només IE no ho té en compte) per tal que el fieldset prengui també tota l’amplada


Descarregar l’esquelet d’aquesta pàgina Lloc Web fet amb l’SPIP | Espace de traduction | Espai privat