Estructura HTML dels formularis d’SPIP

Formularis d’edició utiiltzats a l’espai privat

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:

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

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

Ens trobem en el cas on tenim:

<div class="editer-groupe">
	<div class="editer">
		<label />
		<input />
	</div>
	<div class="editer">
		<label />
		<em />
		<span />
		<input />
	</div>	
</div>

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

.formulaire_spip .editer {
	margin: 0;
	padding: 10px 10px 10px 130px;
	clear:both;
	border-top: 1px solid #eee;
}

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

.formulaire_spip .editer label {
	width: 120px;
	float:left;
	margin-left:-125px; 
	text-align: left;
	vertical-align: top;
}

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

.formulaire_spip .editer fieldset {
	border:1px solid #888;
	background:white;
	margin-left:-125px; /* tornar a decalar cap a l'esquerre... IE < 8 no el té en compte */
}

Autor merce Publié le : Mis à jour : 14/06/15

Traductions : català, English, français, Nederlands