De HTML-structuur van formulieren in SPIP

Bewerkingsformulieren in het privé gedeelte

Dit document is een referentie voor de structuur van formulieren in SPIP.

HTML-structuur

Een basisformulier heeft de volgende structuur:

<div class="formulaire_spip formulaire_editer formulaire_editer_formuliernaam" id="formulaire_editer_formuliernaam-id">
<a id="formuliernaam" name="formuliernaam"></a>
<form action="#" method="post">
	<fieldset>
		<legend>Een legende</legend>
		<p class="explication">Een uitleg</p>
		<div class="editer-groupe">
			<div class="editer editer_labelnaam obligatoire erreur">
				<label for="labelnaam">Email</label>
				<em class="aide">#AIDER{titelart}</em>
				<p class="explication">Uitleg van het label</p>
				<span class="erreur_message">Fourboodschap</span>
				<input type="type" class="type" name="labelnaam" id="labelnaam" value="" />
			</div>
		</div>
	</fieldset>
</form>
</div>

De buitenste div heeft de generieke naam formulaire_spip. In het privé gedeelte hebben de formulieren ook een class formulaire_editer om aan te geven dat het om een formulier voor aanpassing van gegevens in de database gaat.

Elk invoerveld ligt binnen een element met class .editer, die mogen worden gegroepeerd in een element met class .editer-groupe. Tot en met SPIP 3.0 waren deze elementen respectievelijk de HTML-tags li en ul. Vanaf SPIP 3.1 wordt een eenvoudigere conventie toegepast met div tags voor een betere toegankelijkheid.

De eerste fieldset is optioneel; je kunt ook zonder fieldset en optionele paragrafen schrijven:

<div class="formulaire_spip formulaire_editer formulaire_editer_formuliernaam formulaire_editer_formuliernaam-id">
<a id="formuliernaam" name="formuliernaam"></a>
<form action="#" method="post">
	<div class="editer-groupe">
		<div class="editer editer_labelnaam obligatoire">
			<label for="labelnaam">Email</label>
			<input type="type" class="type" name="labelnaam" id="labelnaam" value="" />
		</div>
	</div>
</form>
</div>

Speciale classes

  • «explication»: om een uitleg aan te geven (ofwel voor het geheel, ofwel voor een bepaalde stap). Voorbeeld: <p class="explication">.
  • «attention»: voor een waarschuwing bij een kritiek invoerveld. Voorbeeld: <em class="attention"><:texte_login_precaution:></em>.
  • «obligatoire»: om een verplicht invoerveld aan te geven, toe te kennen aan het bovenliggende element. Voorbeeld: <li class="obligatoire">.
  • «erreur»: voor een foutweergave, toe te kennen aan het bovenliggende element. Voorbeeld: <li class="erreur">. Elke fout heeft een uitleg met de class «erreur_message»: <span class="erreur_message">.

Kader om het geheel

Het formulier kan worden omlijst met een «cadre-formulaire-editer» en kan ook een heading hebben met «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>

Melding van fouten of succes

Algemene boodschappen

Een formulier moet twee paragrafen bevatten voor de weergave van een bevestigingsbericht of een algehele foutmelding. De omgevingsvariabelen message_ok of message_erreur worden daarvoor door SPIP teruggestuurd (in CVT formulieren).

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

Specifieke boodschappen

Elk formulierveld dat binnen een li tag ligt, kan een specifieke foutmelding krijgen. Deze wordt opgenomen in een omgevingstabel ’erreurs’ waaruit als volgt kan worden weergegeven:

[(#ENV**{erreurs}|table_valeur{veldnaam})]

Je kunt de class ’erreur’ toewijzen aan de li en een specifieke fout (als die bestaat) als volgt weergeven:

<div class="editer editer_descriptif[ (#ENV**{erreurs}|table_valeur{descriptif}|oui)erreur]">
	<label for="descriptif"><:de_fouttekst:></label>
	[<span class='erreur_message'>(#ENV**{erreurs}|table_valeur{desctiptif})</span>]
	<textarea name='descriptif' id='descriptif' rows='2' cols='40'>[(#ENV**{descriptif})]</textarea>
</div>

Bijzonderheden van de CSS style

Invoervelden

Iedere <input /> die niet hidden is moet een class hebben die identiek is aan zijn type (door een beperking van Internet Explorer):

<input type="text" class="text" name="titel" id="titel" value="[(#ENV**{titel})]" />

Verzendknoppen

De knoppen worden in een "knoppenbalk" .boutons gezet (er kunnen dus meerdere knoppen in):

<p class="boutons"><input type="submit" class="submit" value="<:bouton_enregistrer:>" /></p>

radio/checkbox

Bij een radio of checkbox kan niet dezelfde structuur worden aangehouden, bijvoorbeeld om de knop vóór het label te plaatsen of een horizontale radio te krijgen.

Daarom moet iedere radio + label in een blok .choix worden gezet:

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

Standaard is de lijst vertikaal. Om hem horizontaal weer te geven, hoef je het alleen maar een stijlattribuut ’inline’ te geven:

.formulaire_editer .editer_syndication .choix {display:inline;}

Algeheel principe voor deze formulieren voor het links uitlijnen.

We bevinden ons in deze situatie:

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

1) We passen een linkse padding toe op LI die breder is dan het label (bv:120px)

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

2) We laten het label floaten en links uitspringen (via een negatieve marge)

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

3) Volgt een fieldset een li, dan laten we die ook links uitspringen (alleen IE houdt hier geen rekening mee) om te zorgen dat de fieldset de hele breedte neemt

.formulaire_spip .editer fieldset {
	border:1px solid #888;
	background:white;
	margin-left:-125px; /* links uitspringen... IE < 8 houdt hier geen rekening mee */
}

Auteur Hanjo Gepubliceerd op:

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