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