Invoerveld met geanimeerde placeholder

Hieronder zie je een formuliertje, waar je je naam en je e-mailadres kunt invullen. Bij de invoervelden staan geen labels, er is alleen een placeholder. Als een veld de focus krijgt of data bevat, verschuift de placeholder naar de rand.
Merk op dat het formulier niet kan worden verzonden. Dat valt buiten het bestek van het voorbeeld.
Op deze pagina wordt uitgelegd hoe je dit maakt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Inbouwen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door een video op Facebook. De maker van dit item is te vinden op Instagram onder de naam "Dark CSS". Voor deze site is de code geschikt gemaakt voor meerdere invoervelden. Daarvoor is JavaScript ingezet, omdat het met alleen HTML en CSS heel moeilijk (onmogeljk?) te realiseren is.
• De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
   
• De werking van het script
• De placeholder in de invoervelden is géén attribuut, maar een label, dat met CSS is verplaatst van buiten naar binnen in het invoerveld.
• Als een invoerveld de focus krijgt, wordt het label via een EventListener naar boven en naar links verplaatst, waarbij de letters kleiner worden. Dat gebeurt alleen als het invoerveld leeg is.
• Als een invoerveld de focus verliest, gaat het label terug naar de beginsituatie. Als er echter tekst in het invoerveld staat, blijft het label staan.
• Opmerking: Dit voorbeeld werkt niet goed als het HTML-document zich in een <iframe> bevindt en er een schermtoetsenbord actief is, zoals op een mobiel apparaat.
   
• HTML
• De HTML bestaat uit een enkele <div>-tag met klasse voorbeeld. Daarbinnen zijn er twee <input>-tags, elk met een <label>.
• De <input>-tags hebben id="uwNaam" resp. id="eMail".
• De <label>-tags hebben id="label1" resp. id="label2".
• Alle ids worden gebruikt voor opmaak en voor communicatie met JavaScript.
   
• CSS
• CSS, in de file styles.css, wordt gebruikt voor de opmaak van het formulier en voor de animaties. De animaties zelf worden getriggerd door JavaScript.
• De klasse voorbeeld positioneert het geheel in de regel en bepaalt de afmetingen en het uiterlijk.
• De labels bij de invoervelden zijn absoluut gepositioneerd binnen voorbeeld. Door left algemeen in te stellen en top gekoppeld aan het id, wordt het label in het invoerveld geplaatst. De duur en het verloop van de animaties wordt hier ook vastgelegd met behulp van transition.
• De twee invoervelden worden op vergelijkbare wijze binnen voorbeeld gepositioneerd.
   
• JavaScript
• Het JavaScript (in de file script.js) regelt het starten van de animaties.
• Als eerste wordt een drietal contanten gedefinieerd, te weten labelTranslateY, labelTranslateX en labelFontSize.
  Daarnaast wordt een viertal variabelen gemaakt, die dienen om de vier id's snel te kunnen adresseren: Naam, Mail, lab1 en lab2.
• Als de pagina is geladen wordt de function initInputAnimation() gestart via onload. Dat is de enige JavaScript-function voor dit voorbeeld.
• initInputAnimation() maakt vier event-listeners: voor elk van de twee invoervelden één voor als het veld de focus krijgt (= actief wordt) en één voor als het veld de focus verliest(= inactief wordt).
• Als het eerste invoerveld de focus krijgt, wordt het label naar boven verplaatst over een afstand labelTranslateY[0], en naar links over een afstand labelTranslateX. Daarbij wordt de lettergrootte ingesteld op labelFontSize[1].
  De conditie voor het al of niet uitvoeren van deze actie is dat de top> staat op de waarde van labelTranslateY[1].
• Als het eerste invoerveld de focus kwijtraakt, wordt het label naar beneden verplaatst over een afstand labelTranslateY[0], en naar rechts over een afstand labelTranslateX. Daarbij wordt de lettergrootte ingesteld op labelFontSize[0].
  De conditie voor het al of niet uitvoeren van deze actie is dat de top> niet staat op de waarde van labelTranslateY[1] en dat het invoerveld niet leeg is.
• Bij het tweede invoerveld gaat het op dezelfde manier; voor de conditie wordt labelTranslateY[2] gebruikt.
   
• Inbouwen 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.
• Voeg tekstvelden met labels toe of verwijder ze juist. Er zit een zekere regelmaat in de naamgeving van de labels. Voer die ook door in de CSS. Maak daarbij ook de klasse voorbeeld groter of kleiner, pas de breedte en de plaats van de invoervelden aan, pas de plaats en de opmaak van de labels aan, enzovoort.
• Maak voor elke combinatie van invoerveld en label een eventListener aan voor focus en blur (of verwijder die juist.
• Verander de kleuren van de achtergrond, de teksten en de randen.
• Zet het formulier in een <form>-tag en voeg een submit- en een reset-button toe, zodat het formulier kan werken.  
• Tenslotte...
• Het is de bedoeling dat de randen van de invoervelden niet veranderen als ze de focus krijgen. Dat gaat alleen goed in Edge en Chrome onder Windows. Onder Android is er met deze browsers een gele rand rond een veld dat de focus heeft. In FireFox is een blauwe (Wndows) of groene (Android) rand rond een veld dat de focus heeft.

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">
<script src="script.js"></script>

(Zet dit in de <BODY> op de plaats waar het formuliertje moet verschijnen.)

<div class="voorbeeld">
  Geef uw naam en uw e-mailadres
 
  <label id="label1" for="uwNaam">Uw naam</label>
  <input type="text" id="uwNaam"><
 
  <label id="label2" for="eMail">E-mail</label>
  <input type="text" id="eMail">
</div>

Downloaden:
 
Druk op de knop:  File: voorb776.zip, 1330 bytes.