Maak je eigen formulier-elementen met CSS III: Checkboxen

Hieronder zie je een drietal formulieren met elk vier checkboxen. Alle die hebben ze een label: 'Checkboxen 1', 'Checkboxen 2' en 'Checkboxen 3'. Ze verschillen van elkaar qua grootte, verder zijn ze identiek.
Dit kan handig zijn voor verschillende doeleinden, waaronder toegankelijkheid van je website. De checkboxen in het voorbeeld hebben geen speciale functie, anders dan voorbeeld.
Van elke set van vier checkboxen zijn de laatste twee grijs van kleur. Deze hebben de status disabled (uitgeschakeld). Een ervan is 'niet aangeklikt' (alleen grijze rand), de andere is 'wel aangeklikt' (grijze rand met grijze opvulling).

Op deze pagina wordt uitgelegd hoe je zoiets aanpakt. De code kun je downloaden om zelf te gebruiken.
Dit is een bewerking van code die ik aantrof in Webdesigner Magazine nr. 98 (september 2017), pagina 76 t.m. 79.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Voor deze site is het voorbeeld gesplitst in drie delen: invoer-velden, radio-buttons en checkboxen. Dit verhaal behandelt de checkboxen.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML (in het document) en CSS (in de file styles.css). JavaScript wordt niet gebruikt.
   
• De grote truc met dit script is dat de 'echte' checkboxen ver buiten de linkermarge van het document zijn geplaatst. De vierkantjes zijn gemaakt in het label. Als je op een label klikt, wordt wél de bijbehorende checkbox geactiveerd of gedeactiveerd.
  Merk op dat je de 'echte' checkboxen nodig hebt om de data vanuit het formulier te versturen naar de server!
   
• HTML
• De HTML bestaat uit drie afzonderlijke <form>tags, die bij elkaar worden gehouden door een <div>-tag met de klasse container.
• De eerste <form>tag heeft geen klasse, de tweede <form>tag heeft klasse bravo en de derde heeft klasse charlie. Dit dient om de drie <form>tags elk apart met CSS te kunnen benaderen.
• Elk van de drie <form>s bevat een titel (<h2>), een <label> met de klassecheckbox__label een <input> met de klasse checkbox, van het type checkbox. Elk van de drie <input>-tags heeft een uniek id, waarmee aan het <label> wordt gerefereerd.
  Zie het item Labels gebruiken in een formulier voor meer informatie over het gebruik van <label>.
• Alle opmaak loopt via CSS.
   
• CSS
• De CSS gebruikt van CSS-variabelen en daarmee ook van de functions var() en calc().
n calc().
• Allereerst wordt een zestal variabelen gedefiniëerd in het blok :root. Het gaat hier om de kleur van het vierkant en de opvulling van de checkbox als er op wordt geklikt. Dit zijn achtereenvolgens --color-alpha, --color-bravo en --color-charlie. De naamgeving verwijst naar de klassen van de drie form's in de HTML. Dit is alleen voor het gemak van de programmeur, elke andere variabele-naam zou ook kunnen.
• Dan er ook nog die variabelen --input-color, --input-size en --spacing-unit. De eerste krijgt de waarde van --color-alpha toegewezen. --input-size bepaalt de grootte van de rondjes.
   
• Vervolgens wordt de klasse container opgemaakt. Hierbij wordt flexbox ingezet om de drie forms te positioneren. Zie ook het item Over CSS display:flex (Flexbox).
• De boven- en ondermarge van container wordt berekend met 3 × --spacing-unit = 3 × 0.5rem = 1.5rem. De eenheid rem wordt beschreven in het item Over eenheden in CSS.
• Nu is form aan de beurt. Door display:inline-block te zetten, worden de formulieren -indien mogelijk- naast elkaar gezet. De marges links en rechts worden berekend; se worden 0.75rem breed.
• De kop van elk formulier is h2. De bovenmarge van de laatst opgegeven h2 wordt berekend op 1.0rem.
  Je zou denken dat de letters van het ene formulier naar het andere groter worden, maar dat is gezichtsbedrog. De gewone lettergrootte wordt gebruikt, zoals ingesteld door font-size:initial.
   
• De checkboxen zelf zijn links buiten beeld geplaatst. De bijbehorende labels bevatten de vierkantjes. Daar werkt de CSS op.
• De checkbox-labels, die allemaal de klasse checkbox__label hebben hebben een hoogte van 1.25 × --input-size. In het eerste formulier (geen klasse) is dat 1.25em × 1.5 = 1.875em.
  Bij het tweede formulier (klasse bravo) is dat 2.125em × 1.5 = 3.1875em.
  Bij het derde formulier (klasse charlie) is dat 2.5em × 1.5 = 3.75em.
  De variabele --input-size heeft binnen de klassen bravo en charlie een andere waarde dan daarbuiten. Zie onderaan in styles.css.
• De opvulkleur van de vierkantjes (in --input-color) is voor de drie klassen verschillend, op dezelfde manier als bij de grootte van de vierkanten.
  Als een vierkant wordt aangeklikt wordt deze opgevuld met de kleur van het vierkant. De buitenrand wordt grijs.
• De labels (klasse checkbox__label hebben display:block. Dat is nodig om de weergave op het scherm goed te houden. Het zijn het blok-elementen die anders de eigenschapinline-block zouden erven van form.
   
• Alle elementen in het document hebben box-sizing: border-box;. Dat is geregeld met de selector *, *:before, *:after.
• Behalve dat door de klassen bravo en charlie de waarden van --input-size en --input-color worden aangepast, wordt ook de lettergrootte apart ingesteld.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Het voorbeeld toont drie keer hetzelfde formulier. In de praktijk doe je dat niet. Kies daarom het meest toepasselijke formulier en toon dat. Verberg de andere twee door aan de klassen bravo en charlie display: none; toe te voegen. Op verzoek van de gebruiker kun je dan met JavaScript bij form display: none; zetten en bij bravo of charlie display:inline-block.
   
• Pas de CSS aan voor je eigen werk: Kleuren, breedte van het formulier, marges, enz.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">

(Zet dit in de <BODY> op de plaats waar de formulieren moeten verschijnen).

<div class="container">
<form>
  <h2>Checkboxen 1</h2>
  <input class="checkbox" id="checkbox-one" type="checkbox"
    name="checkbox" value="one">
  <label class="checkbox__label" for="checkbox-one">Checkbox
    Een</label>
 
  <input class="checkbox" id="checkbox-two" type="checkbox"
    name="checkbox" value="two">
  <label class="checkbox__label" for="checkbox-two">Checkbox
    Twee</label>
 
  <input class="checkbox" id="checkbox-three" type="checkbox"
    name="checkbox" value="three" disabled>
  <label class="checkbox__label" for="checkbox-three">Checkbox
    Drie</label>
 
  <input class="checkbox" id="checkbox-four" type="checkbox"
    name="checkbox" value="four" disabled checked>
  <label class="checkbox__label" for="checkbox-four">Checkbox
    Vier</label>
</form>
 
<form class="bravo">
  <h2>Checkboxen 2</h2>
  <input class="checkbox" id="checkbox-five" type="checkbox"
    name="checkbox" value="one">
  <label class="checkbox__label" for="checkbox-five">Checkbox
    Een</label>
 
  <input class="checkbox" id="checkbox-six" type="checkbox"
    name="checkbox" value="two">
  <label class="checkbox__label" for="checkbox-six">Checkbox
    Twee</label>
 
  <input class="checkbox" id="checkbox-seven" type="checkbox"
    name="checkbox" value="three" disabled>
  <label class="checkbox__label" for="checkbox-seven">Checkbox
    Drie</label>
 
  <input class="checkbox" id="checkbox-eight" type="checkbox"
    name="checkbox" value="four" disabled checked>
  <label class="checkbox__label" for="checkbox-eight">Checkbox
    Vier</label>
</form>
 
<form class="charlie">
  <h2>Checkboxen 3</h2>
  <input class="checkbox" id="checkbox-nine" type="checkbox"
    name="checkbox" value="one">
  <label class="checkbox__label" for="checkbox-nine">Checkbox
    Een</label>
 
  <input class="checkbox" id="checkbox-ten" type="checkbox"
    name="checkbox" value="two">
  <label class="checkbox__label" for="checkbox-ten">Checkbox
    Twee</label>
 
  <input class="checkbox" id="checkbox-eleven" type="checkbox"
    name="checkbox" value="three" disabled>
  <label class="checkbox__label" for="checkbox-eleven">Checkbox
Drie</label>
 
  <input class="checkbox" id="checkbox-twelve" type="checkbox"
    name="checkbox" value="four" disabled checked>
  <label class="checkbox__label" for="checkbox-twelve">Checkbox
    Vier</label>
</form>
</div>

Downloaden:
 
Druk op de knop:  File: voorb588.zip, 1468 bytes.

Opmerking:
 
Andere formulier-elementen worden behandeld in de items Maak je eigen formulier-elementen met CSS I: Invoer velden en Maak je eigen formulier-elementen met CSS II: Radio-buttons.
 
Als je deze drie items tegelijkertijd wilt toepassen in één document kun je het beste de CSS-bestanden samenvoegen en de dubbele selectors verwijderen.