Maak je eigen formulier-elementen met CSS I: Invoer velden

Hieronder zie je een drietal formulieren met elk een invoerveld. Alle die hebben ze een label: 'Naam 1', 'Naam 2' en 'Naam 3'. Ze verschillen van elkaar qua grootte, verder zijn ze identiek.
Dit kan handig zijn voor verschillende doeleinden, waaronder toegankelijkheid van je website. De invoervelden 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, radiobuttons en checkboxen. Dit verhaal behandelt de invoervelden.

• 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.
   
• 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 klassetext-input__label een <input> met de klasse text-input, van het type text. 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 tekst kleur en de kleur van de onderrand die verschijnt bij de drie tekstvelden als het invoerveld de focus krijgt. 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.
   
• 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 invoervelden, die allemaal de klasse tekst-input hebben hebben een hoogte van 1.5 × --input-size. In het eerste formulier (geen klasse) is dat 1.5em × 1.5 = 2.25em.
  Bij het tweede formulier (klasse bravo) is dat 2.25em × 1.5 = 3.375em.
  Bij het derde formulier (klasse charlie) is dat 3.375em × 1.5 = 5.0625em.
  De variabele --input-size heeft binnen de klassen bravo en charlie een andere waarde dan daarbuiten. Zie onderaan in styles.css.
• De tekstkleur van de invoervelden (in --input-color) is voor de drie klassen verschillend, op dezelfde manier als bij de hoogte van de invoervelden.
  Als een invoerveld de focus krijgt, wordt er een onderrand zichtbaar van 5px breed en met de zelfde kleur als de tekst.
• De input-labels (klasse text-input__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.
• De ondermarge wordt berekend. Effectief is deze 0.25rem.
   
• 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>Tekst Invoer</h2>
  <label class="text-input__label" for="text-input">Naam 1</label>
  <input class="text-input" type="text" id="text-input">
</form>
<form class="bravo">
  <h2>Tekst Invoer</h2>
  <label class="text-input__label" for="text-input-two">Naam 2</label>
  <input class="text-input" type="text" id="text-input-two">
</form>
<form class="charlie">
  <h2>Tekst Invoer</h2>
  <label class="text-input__label" for="text-input-three">Naam 3</label>
  <input class="text-input" type="text" id="text-input-three">
</form>
</div>

Downloaden:
 
Druk op de knop:  File: voorb586.zip, 1109 bytes.

Opmerking:
 
Andere formulier-elementen worden behandeld in de items Maak je eigen formulier-elementen met CSS II: Radio-buttons 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.