home | sitemap

Formulieren-module

Algemeen

De formulieren die de formulierenmodule genereert zijn opgebouwd zoals alle formulieren in het cms.

NB: bekijk de broncode van de html van de pagina met een formulier voor een compleet overzicht én inzicht van gebruikte ID's en classnames.

De meest voorkomende ID's en classnames worden hieronder toegelicht:

Elk formulier, label en input heeft een ID. Dit ID kan worden gebruikt in de css, maar let op: een element met hetzelfde ID op een ander formulier krijgt dan ook die opmaak. Dat kan wenselijk zijn, maar hoeft natuurlijk niet!

Het label van een verplicht veld krijgt als classname required. Dit kan bijvoorbeeld worden gebruikt om verplichte velden vet weer te geven of met een andere kleur. Het label van een verplicht veld wordt altijd gevolgd door de bekende '*' in een SPAN-tag. Om het label vet en rood weer te geven en de (dan overbodige) * niet:

label.required {
  font-weight: bold;
  color: red;
}
label span {
  display: none;
}

Een TEXTAREA, INPUT en SELECT krijgt als classname resp. form_textarea, form_input en form_select.
Het bijbehorende label krijgt eveneens die classname. Op die manier kan een label van een TEXTAREA bijvoorbeeld anders worden weergegeven dan dat van een SELECT. 

Radiobuttons en checkboxen (ook INPUT's) krijgen de classname van hun type, dus resp. radio en checkbox. Achter elke radiobutton of checkbox staat een label dat de 'waarde' van die radiobutton of checkbox weergeeft. Zo'n label heeft eveneens als classname het type en de weergave, namelijk H(orizontaal) of V(erticaal.) Als een lijst verticaal wordt weergegeven, dan wordt elke radiobutton/checkbox ook voorafgegaan door een label met de classname empty. Dit om te voorkomen dat de radiobuttons/checkboxen onder het label van de lijst zelf gaan staan.

Tussen de inputs kan ook gewone tekst staan. Deze tekst bestaat uit een P-tag met de titel (als ingevuld) in een STRONG-tag met de classname form_text_title gevolgd door de gewone tekst.

De knop aan het eind van het formulier heeft als classname button. 

NB: door een bug in IE worden soms velden niet weergegeven als in de CSS voor het tekstvlak letter-spacing wordt gebruikt.

Groepen

Via de formulieren-module kunnen velden worden gegroepeerd door middel van de Groep (begin) en Groep (eind) elementen. Deze elementen dienen altijd per paar voor te komen, dus elke groep begint met een Groep (begin) en eindigt met een Groep (eind). De uitkomst van een groep is dat de velden in een DIV-tag komen te staan.

Bij Groep (begin) kan een label worden opgegeven dat het id-attribuut van de DIV wordt. Tevens kan worden aangegeven of de groep initieel verborgen moet zijn (de DIV krijgt dan style="display:none" mee). Verder kunnen er eventueel nog 1 of meerdere class names worden meegegeven. Een Groep (begin) met als label groep1 en verborgen is levert als html op:

<div id="groep1" class="form_group" style="display:none">
... formulier velden binnen deze groep ...
</div>

Conditioneel wel/niet tonen groep

Om een groep wel/niet te tonen op basis van eerdere ingevoerde gegevens kan per groep een conditie worden opgegeven, zie /help/p000635/modules/formulieren/formulieren/formulier-maken#groep-begin-en-groep-eind

Als er complexere condities nodig zijn (bijv. met ajax-aanroepen om gegevens server-side te controleren) kan zelf javascript aan het formulier worden toegevoegd. Deze javascript kan eenvoudig bij het formulier worden opgeslagen: bij de algemene instellingen van het formulier bestaat een optie Extra (net als Extra bij de pagina-instellingen). Om een groep bijv. te tonen op basis van een Ja/Nee vraag kan de volgende javascript worden gebruikt (er van uitgaande dat er een lijst voor de groep staat met het label Toon en een keuze voor Ja en Nee):

<script type="text/javascript">
{
  var cb0 = document.getElementById("Toon_0"); // JA
  var cb1 = document.getElementById("Toon_1"); // NEE  
  function show_group1() {
    // Als JA (cb0) is aanvinkt, dan div #groep1 tonen, anders niet...
    document.getElementById("groep1").style.display = cb0.checked ? "block" : "none";
  }
  xcmsAddEventListener(cb0, "click", show_group1);
  xcmsAddEventListener(cb1, "click", show_group1);
}
</script>