Een inlogformulier opmaken

Wat je leert

• formulieren in HTML5
  • input-types: text, password, checkbox en submit
  • labels
  • autofocus
  • required
  • 'validatie' met HTML5
  • placeholder
  • zelfs een html-entiteit: ✓
• formulier centreren met jQuery
• formulier openen en sluiten met jQuery
  • het legen van de formuliervelden
  • ongewenste gebeurtenissen verhinderen: event-bubbling

Je kunt deze tutorial doornemen. Gebruik wel zoveel mogelijk eigen namen voor de id's en classes die je toepast. Je ziet hier hoe een inlogvenster gemaakt wordt, maar je kunt net zo goed een registratieformulier of nog iets naders maken. We werken wel met tekst-invoer velden. Als je dat kunt (vinden) maak je ook gebruik van een fieldset met bijpassende legend.

1. Maak een html5-document en geef deze naar eigen inzicht wat inhoud. Maak ook een button met een id en als value iets als 'inloggen': Inloggen
   Tot slot voeg je het formulier toe met de form-tag:<form></form>
2. Geef het formulier ook een id;
3. Als het formulier open staat moet de rest van de pagina worden afgeschermd met een doorzichtige laag. Zet daarvoor om het formulier een div en geef deze een id of class mee.
4. In het formulier maak je naast een eigen kopje, 2 input-types voor naam en wachtwoord. Ze hebben respectievelijk een type text en password.
5. Geef de inputs een id. Dit is handig voor de labels. Voor PHP is het gebruikelijk ook name-attributen toe te voegen. Het is dan practisch de id- en name-waarden gelijk te houden.
6. Zet voor beide inputs een labeltag <label></label> met een for-attribuut. Dit attribuut heeft als waarde de id van het bijpassende input-veld.
7. voorzie de invoervelden ook van het attrribuur placeholder. Deze geeft de gebruiker een aanwijzing van wat er aan invoer verwacht wordt.
8. Voeg ook een checkbox toe met id en een passend label. Je kunt als je test hier goed merken dat een label echt bij het input-element hoort. Je kunt door een klik op het label de check-box in- of uitschakelen.

1. Maak een extern stijlblad en koppel deze
2. Maak het document op naar eigen inzicht
3. Om de omgeving om het formulier de hele pagina te laten bedekken geef je deze de volgende opmaakregels:
   • een absolute positionering;
   • met top en left op 0;
   • de achtergrondkleur met transparantie bijvoorbeeld met rgba;
   • breedte en hoogte op 100%;
4. Maak het inlogformulier op. In ieder geval (minstens):
   • een breedte: bijvoorbeeld 27em;
   • een achtergrondkleur;
   • een padding;
   • en een absolute positionering.
5. De inputs kun je opmaken door
   • ze een breedte te geven;
   • wat padding (hier is .5em gebruikt);
   • font-size wat opkrikken (1.1.em).
6. Geef de labels naar eigen inzicht vorm. Door ze wat extra line-height te geven komen de verschillende delen uit elkaar, maar dat is met een ondermarge voor beide invoervelden natuurlijk ook mogelijk.
   In dit voorbeeld hebben ze een breedte gegeven en een display: block;. Binnen de breedte worden de teksten recht gelijnd, waardoor de lay-out wat strakker wordt.
   • Je mag regelovergangen gebruiken om ze onder elkaar te plaatsen.
   • Heb je fieldsets gebruikt dan kun je ze met hun legends ook van opmaak voorzien.

7. specifieke inputs of labels selecteren

   In CSS (en daarmee ook in jQuery) kun je de input van een bepaald type selecteren. Wil je bijvoorbeeld iets opmaken aan de text- en de passwordinputvelden, dan selecteer je ze met: input[type="text"], input[type="password"
8. Als de labels van de tekst-invoer vormgegeven zijn, dan wil je het label van de de checkbox natuurlijk meer breedte geven en links laten lijnen. Bovendien wil je hem wat verder van de andere invoervelden plaatsen met wat boven-marge.
   Je selecteert dat label als volgt:
   input[type="checkbox"] ~ label.
   Met ~ selecteer je de sibling van het input-element.

1. Koppel jQuery: <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
2. Koppel in de head een extern JavaScript-bestand waarin je verder werkt.
3. Omdat eerst het document geheel geladen moet zijn plaatsen we onze code binnen

   $(document).ready(function() {
           
           });

4. Ons script gaat heel vaak het formulier bewerken. We maken daarom er maar een variabele van: var formulierVariabele = $('#deIdVanHetFormulier'); Bedenk zelf een goede naam voor deze variabele. In het vervolg kort ik hem af naar fV.
5. Met

   fV.css('top', ($(window).height() - fV.outerHeight())/2);

   centreer je verticaal.
6. Je kunt zo vergelijkbaar horizontaal centreren.
7. In de html heeft het eerste inputvenster ook nog een attribuut autofocus gekregen, zodat hij als eerste geselecteerd wordt.

1. Verberg de transparante achtergrond inclusief en inlogscherm met CSS display: none; Dit moet dan met een druk op de button weer worden opgroepen.
2. Selecteer met jQuery de button en koppen daar een click-event aan met een anonieme functie:

   $('#idVanDeButton').click(function() {
                  
                  });

   Geef daarin de opdracht de omgeving te tonen. Bijvoorbeeld met .show();
3. Als je het script test, moet het venster verschijnen. Het is nu echter niet gecentreerd. Daarvoor moet je de centreer-opdrachten uit stap 3 verplaatsen binnen de anonieme functie, die 'de omgeving' met venster oproept. Je kunt natuurlijk ook de velden nog steeds invullen.
4. We maken een functie die het scherm ook weer verbergt. Later zal immers blijken dat we er meer in moeten stoppen dan alleen het verbergen en er zijn verschillende gebeurtenissen waarop we dit scherm willen verbergen:
   • als de gebruiker op de doorzichtige achtergrond klikt;
   • als de gebruiker op een annuleerknop in het formulier klikt;
   • als de gebruiker op de inlogknop in het formulier klikt.
     Deze beide knoppen maken we later nog.
5. Begin in deze functie met de opdracht hide(); die de omgeving (inclusief inlogvenster) verbergt.
6. Maak een click-event, die als je op de omgeving klikt, deze dan verbergt.
7. Als je test, blijkt dat bij een klik op de omgeving dat het venster weliswaar verdwijnt, maar dat gebeurt ook bij een klik ergens in het inlogvenster! Dit laatste is natuurlijk ongewenst, maar het is een gevolg van 'event-bubbling'. Omdat het venster door zijn omgeving wordt omgeven, zal een klik op het venster ook opgevat worden als een klik op die omgeving en het verbergen aanroepen. Om dit tegen te gaan voeg je nog een klik-event toe voor het hele inlogvenster:

   fV.click(function(e) {
                  e.stopPropagation();
              });

   Je kunt nu in het geopende venster klikken en werken.
8. Maak in het inlogvenster ook 2 knoppen. Doe dit door 2 input-tags te maken:
   • een van het type button;
   • en een van het type submit
   Geef de beide knoppen ook een id.

1. Met input[type="button"], input[type="submit" selecteer je in de CSS beide knoppen. Geef ze padding, marge kleur en een breedte met de waarde auto en ook een hoogte met die waarde.
2. Selecteer daarna alleen de submit-knop om deze een afwijkende kleur te geven.
3. Selecteer met input[type="submit"]:hover de hover-pseudoclass om daar een eigen andere vormgeving toe te passen.
4. Doe dit ook voor de hover-status van de andere button. Als je de selectie nog iets uitbreidt, verandert het uiterlijk van de knop buiten het formulier mee.
5. Breidt het script ook uit met events op de beide knoppen, waarij de sluitactie voor het venster plaatsvindt. Je kunt dit doen door de selector van het event op 'de omgeving' uit te breiden, net zoals bij CSS!
6. Als je nu test, blijkt dat de velden na annuleren toch de waarden behouden als het venster opnieuw wordt opgeroepen. Dit is niet wenselijk.
   Breidt de functie van het sluiten (stap 4.5) daarom uit met opdrachten, die de velden ook leegmaken: $('#veldselector').val(''); waarmee je de inhoud van het element dus vult met een lege string.
7. Wil je de checkbox ook eventueel terugzetten naar niet-gechecked dan kan dat via $('element').attr('checked', false); waarbij 'element' dus de te selecteren checkbox aanwijst.

Om onnodig gegevensverkeer tussen bezoeker en server te beperken en de bezoeker al wat feedback te geven op zijn invoer, kan je met HTML5 al het een en ander corrigeren.
Uiteindleijk zal de controle ook in de back-end met de gevens van de database moeten plaatsvinden. Front-end validatie is er dus ter verlichting van de back-end.

1. Om te controleren of de velden wel zijn ingevuld, voeg je in de tags het attribuut required toe. Bij testen blijkt al dat de bezoeker het formulier niet kan versturen, zonder dat het is ingevuld.
2. Elementen die het element required hebben geef je ook een andere opmaak. In dit voorbeeld gaan we de placeholder opmaken.
   • Zoek een kleine afbeelding, die je rechts in het invoerveld op de achtergrond zou kunnen plaatsen.
   • Selecteer de placeholder in CSS met:
     input::-webkit-input-placeholder { jouw opmaakregels}
input:-moz-placeholder { jouw opmaakregels}
input::-moz-placeholder { jouw opmaakregels}
input:-ms-input-placeholder { jouw opmaakregels}
     Je ziet hier nog een flinke reeks met pre-fixes. Voor Mozilla zelfs 2!
     Bron: CSS-tricks of ook hier.
     De opmaakregels zijn:
     • bron achtergrondafbeelding;
     • geen herhaling in die afbeelding;
     • background-position: right center;
     • eventueel background-size in em om iets te verkleinen.

Om op een andere manier nog feedback te geven plaatsen we een groen vinkje in de HTML achter de beide invoervelden. Met CSS wordt deze verborgen. Als de invoer overeenkomt met het pattern verschijnt de vink weer.

1. Voeg achter beide invoervelden een vinkje toe. Maak daarvoor een <span></span> en geef die een class mee.
2. plaats de ✓ hier in. Bekijk hiervoor de HTML-entiteiten bijvoorbeeld hier. Daar vind je de ✓ onder ✓
3. Maak deze groen met CSS. De selector hiervoor is de toegevoegde class-naam.
4. Voeg nog meer opmaak toe.
5. Als alles er goed uitziet voeg je ook nog display: none; toe zodat de vink onzichtbaar wordt.
6. Om door het invullen de ✓ terug te krijgen, maak je een nieuwe selector: input:valid ~ span Je selecteert zo de span die een sibling is van de input als deze gevalideerd is.
7. Geef als opmaak van die selector display: inline;
8. Test nu. je ontdekt dat beidevinkjes verschijnen als in een van de vakjes iets wordt ingevuld. (zie figuur) Dat is niet wenselijk. Alle spans zijn nu immers siblings van alle inputs. Als je om de inputs met spans en labels nu sections plaatst is dit probleem verholpen. Je kunt dan zelfs ook de br-tags missen!!
9. Controleer of de vinkjes nu een voor een verschijnen.

Je kunt met HTML5 verder gaan dan controle of het veld is gevuld. Dit kun je doen met het attribuut pattern. Zie ook hier onder punt 7.

1. Ga naar de tag van het invoerveld van de naam. Voeg daar het volgende attribuur toe: pattern="[A-Za-z]{2,}" toe.
   Dit betekent dat de invoer alleen correct is als er hoofdletters of onderkast-letters gebruikt worden en dat het en minimaal 2 moeten zijn.
2. Test dit uit.
3. Voor het wachtwoord zou je het volgende pattern kunnen gebruiken: .{6,} wat betekent dat je minimaal 6 tekens moet invullen.
4. Geeft dit voor de bezoeker ook netjes mee in de placeholder.