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

Download
Homepagina > Documentatie in het Nederlands > Webmasters > Geavanceerde functies > Interactie > De HTML-structuur van formulieren in SPIP

De HTML-structuur van formulieren in SPIP

Bewerkingsformulieren in het privé gedeelte

23 februari

Alle versies van dit artikel:

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


HTML-structuur

Een basisformulier heeft de volgende structuur:

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:

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

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

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:

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

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

Verzendknoppen

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

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:

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

N.B.

Algeheel principe voor deze formulieren voor het links uitlijnen.

We bevinden ons in deze situatie:

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

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

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


Het skelet van deze bladzijde zien Site gebouwd met SPIP | Vertaalruimte | Privé-site