Half-verborgen invoervelden

Hieronder zie je een formuliertje met twee Invoervelden. Een invoerveld is meestal een rechthoek, maar hier lijkt het alleen een horizontale lijn te zijn. Als je er echter op klikt of tikt, verandert de streep in een rechthoek en kun je data invoeren.

Op deze pagina wordt uitgelegd hoe je dit maakt. De code kun je downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door de site darkcssweb.com, waar dit effect wordt getoond. De code van het voorbeeld is van die site overgenomen. Voor deze site is de code op een paar plaatsen aangepast om het geschikt te maken voor gebruik in een productie-site.
• De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt, maar is wel nodig om de invoervelden uit te lezen.
   
• De werking van het script
• Het effect is beschikbaar zodra de pagina is geladen. Het is helemaal gemaakt met CSS.
• De invoervelden zijn tranparant. Door
   
• HTML
• De HTML van het voorbeeld bestaat uit een <div>-tag met klasse voorbeeld.
• Binnen voorbeeld is er voor elk invoerveld een <div>-tag met klasse inputbox.
• Elke inputbox bevat de tags <input type="text" required>, <span> en <i></i>.
• Het attribuut required in de <input>-tag is noodzakelijk om het effect goed te laten werken. De tag <i></i> wordt gebruikt om het invoerveld zichtbaar te maken. Bij het laden van de pagina is het een streep van 2px breed en even lang als het invoerveld. Als dat invoerveld de focus krijgt of data bevat wordt de 'streep' even breed als het invoerveld hoog is, waardoor de tekst in het veld leesbaar wordt.
   
• CSS
• De klasse voorbeeld positioneert het formuliertje in de regel en zorgt voor de algemene opmaak Ook houdt het de invoervelden op zijn plaats.
• Voor elk invoerveld is er een >div>-tag met klasse inpuntbox. Dat is relatief gepositioneerd binnen voorbeeld en is 300px breed.
• De <input>-tag binnen inputbox is relatief gepositioneerd, en beslaat de hele breedte. De achtergrond is transparant. Door z-index:10 in te stellen ligt die altijd boven de <i>-tag (zie volgende bullet).
• De <i> wordt 'misbruikt' om de horizontale streep mee te maken. De breedte wordt ongesteld op 100%, even breed als het invoerveld. De hoogte is 2px en de achtergrondkleur is blauw. Zo ontstaat de streep.
  Dit is absoluut gepositioneerd op de onderrand van inputbox. Door z-index:9 in te stellen ligt die altijd onder de (transparante) <input>-tag, waardoor het lijkt alsof het invoerveld uit de streep omhoog schuift.
• Als het invoerveld de focus heeft of data bevat, wordt de horizontale streep 36px breed. Dit gebeurt met de CSS-regel:
  .inputbox input:valid˜i, .inputbox input:focus˜i { height:36px; }.
  Zie het item Over >, + en ˜ in Style Sheets voor de betekenis van de ˜ in deze regel.
• De tekst die zich verplaatst en van kleur verandert als het invoerveld zichtbaar is, bevindt zich in de <span>-tag. Die is binnen inputbox absoluut gepositioneerd, 5px onder de onderrand.
• Als het invoerveld de focus heeft of data bevat, wordt de tekst naar boven en naar links verplaatst. Ook verandert de kleur van donkerblauw in steenrood. Dit gebeurt met de CSS-regel:
  
.inputbox input:valid˜span, .inputbox input:focus˜span
    { color:maroon; transform:translateX(-10px) translateY(-30px); }.
• De verandering van de tekst en de horizontale streep duurt 0.5 seconde. De eigenschappen stellen pointer-events:none; in, om te voorkomen dat muisklikken of aanrakingen ongewenste zij-effecten hebben.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Zet de code in je document zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Verander kleuren, afmetingen, aantal invoervelden voor je eigen doeleinden.
• Voeg aan de <input>-tags een id en/of name attribuut toe, zodat de velden uitgelezen kunnen worden door de server die het formulier moet verwerken.
• Zet het formulier in een <form>-tag en voeg submit- en reset-knoppen toe.

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 het formulier moet verschijnen)

<div class="voorbeeld">
  Geef uw naam en uw e-mailadres<br>
  &nbsp;
  <div class="inputbox">
    <input type="text" required>
    <span>Uw naam</span>
    <i></i>
  </div>
  &nbsp;
  <div class="inputbox">
    <input type="text" required>
    <span>Uw e-mailadres</span>
    <i></i>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb798.zip, 996 bytes.