Maak je eigen formulier-elementen met CSS II: Radio-buttons

Hieronder zie je een drietal formulieren met elk twee radio-buttons. Alle die hebben ze een label: 'Radio buttons 1', 'Radio buttons 2' en 'Radio buttons 3'. Ze verschillen van elkaar qua grootte, verder zijn ze identiek.
Dit kan handig zijn voor verschillende doeleinden, waaronder toegankelijkheid van je website. De radio-buttons in het voorbeeld hebben geen speciale functie, anders dan voorbeeld.

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 radio-buttons.

• 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' radio-buttons ver buiten de linkermarge van het document zijn geplaatst. De rondjes zijn gemaakt in het label. Als je op een label klikt, wordt wél de bijbehorende radio-button geactiveerd.
  Merk op dat je de 'echte' radio-buttons 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 klasseradio__label een <input> met de klasse radio, van het type radio. 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().
• Allereerst wordt een zestal variabelen gedefiniëerd in het blok :root. Het gaat hier om de kleur van de cirkel en de opvulling van de radio-button 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 radio-buttons zelf zijn links buiten beeld geplaatst. De bijbehorende labels bevatten de rondjes. Daar werkt de CSS op.
• De radio-button-labels, die allemaal de klasse radio__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 cirkels (in --input-color) is voor de drie klassen verschillend, op dezelfde manier als bij de grootte van de cirkels.
  Als een button wordt aangeklikt wordt deze opgevuld met de kleur van de cirkel. De buitenrand wordt grijs.
• De labels (klasse radio__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>Radio buttons-1</h2>
  <input class="radio" id="radio-one" type="radio"
    name="radio" value="one">
  <label class="radio__label" for="radio-one">Button
    Een</label>
 
  <input class="radio" id="radio-two" type="radio"
    name="radio" value="two">
  <label class="radio__label" for="radio-two">Button
    Twee</label>
</form>
 
<form class="bravo">
  <h2>Radio buttons-2</h2>
  <input class="radio" id="radio-three" type="radio"
    name="radio" value="one">
  <label class="radio__label" for="radio-three">Button
    Een</label>
 
  <input class="radio" id="radio-four" type="radio"
    name="radio" value="two">
  <label class="radio__label" for="radio-four">Button
    Twee</label>
</form>
 
<form class="charlie">
  <h2>Radio buttons-3</h2>
  <input class="radio" id="radio-five" type="radio"
    name="radio" value="one">
  <label class="radio__label" for="radio-five">Button
    Een</label>
 
  <input class="radio" id="radio-six" type="radio"
    name="radio" value="two">
  <label class="radio__label" for="radio-six">Button
    Twee</label>
</form>
</div>

Downloaden:
 
Druk op de knop:  File: voorb587.zip, 1423 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 III: Checkboxen.
 
Als je deze drie items tegelijkertijd wilt toepassen in één document kun je het beste de CSS-bestanden samenvoegen en de dubbele selectors verwijderen.

 

html-587; Laatste wijziging: 30 mei 2020