Kop 1

tagline

Formulieren

Formulieren maken websites interactiever. De gebruiker kan niet alleen navigeren door de site, maar ook zelf dingen invoeren.
Het is duidelijk dat formulieren voor de backend, bijvoorbeeld PHP onmisbaar zijn.

Leerdoelen

  • formulier-element
  • formulier-verwerking HTTP-protocol
    • GET
    • POST
  • noodzakelijke attributen formulier-element
    • action
    • method
  • submit
  • gebruikelijke input-elementen
    • input -> type text
    • input -> type radio
    • input -> type checkbox
    • textarea
    • select

Bronnen

Misschien onverwacht

Hiernaast/onder zie je een YouTubefilmpje over een spel.
Met een HTML-formulier kun je zelfs spellen maken. In deze demo zie je hoe een Electro-spel uit de zestiger jaren kan worden nagebootst met een webformulier. Eerst met select-element een spel kiezen, daarna klik je feitelijk op labels, die radio-buttons selecteren. Ook in de broncode zie je inputs met labels. Door de CSS zijn de labels niet alleen mooier gemaakt, maar zijn de radiobuttons zelf verborgen.

voorbeeld van formulier

Een werkend formulier maken

  1. Bekijk de afbeelding van het formulier hiernaast.
    Een vergrootte versie staat hier ter download: https://raw.githubusercontent.com/Theo-denBlanken/voorbeeldFormulier/master/formulierStap1.png.
  2. Probeer deze nu zelf zo goed mogelijk na te maken.
    1. Je mag gebruik maken van een verwerkingsscript in php, die staat op: http://bla.hosts.ma-cloud.nl/pop.php. Je kunt de inhoud eenvoudig overnemen uit: https://github.com/Theo-denBlanken/voorbeeldFormulier/blob/master/README.md.
    2. Voeg in jouw formulier 1 (één) vraag toe.
      Bedenk deze zelf en bepaal zelf welk input-type je daarvoor het beste kunt gebruiken.
    3. Jouw formulier moet de gegevens versturen naar http://bla.hosts.ma-cloud.nl/pop.php, om het daar door het PHP-bestand te laten verwerken.
  3. Maak elk van de elementen vereist, behalve de textarea en checkbox.
  4. Maak de eerste element autofocus.
  5. Geef daar waar mogelijk een suggestie voor het invullen van de tekstinvoer. Dit is bij de naam in de afbeelding al gebeurd.
  6. Voeg in de footer de validatieafbeeldingen toe en zorg dat de mark-up valide is: Code vindt je bij https://github.com/Theo-denBlanken/validatie-W3C
eerste stap in het maken van het formulier

Keuzeopdracht

In de afbeelding hiernaast kun ze ook zien dat je met een formulier een startscherm voor een game kunt maken.
Bedenk een startscherm voor een game en maak daarin in ieder geval een tekst-input, en inputs met checkboxes (opties) en inputs met radiobuttons (selectie).
Realiseer je dat net als in de video van het Electrospel de check-boxes en radiobuttons, niet zichtbaar hoeven te zijn.
Dit is een van de bonusopdrachten

tip

Met de tilde-selector kun je verborgen vensters zichtbaar maken met een (verborgen) checkbox.
Daarbij is ook de pseudoselector :checked nodig.
Zie https://github.com/Theo-denBlanken/toggle-met-CSS
startscherm minecraft

Inleveren

  • Na afloop plaats je deze training online in je bewijzenmap op hosts2.ma-cloud.nl;
  • Valideer jouw pagina's op Markup Validation Service van W3C.
  • De validatie icoontjes plaats in de footer. Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C
  • Plaats jouw bestanden op GitHub waarbij in het README.md bestand een link naar de life-versie op jouw bewijzenmap;
  • Lever de GitHub link in bij opdracht in ELO Magister.

Checklist







 


Vergroot de UX: user experience

In dit deel maken we kennis met:

  • labels
  • placeholder
  • autofoucus
  • nieuwe input-types
  • required (=vereist)

Vervolgopdrachten

  1. voeg 3 input-types toe uit de reeks nieuwe input-types in de presentatie hiernaast/hieronder formulieren in HTML Deel 2: UX.
  1. Voeg aan alle inputs labels toe:
    • Bij radiobuttons gaat het label om de omschrijving en het input-element heen;
    • Bij checkboxes laat je het label (met het for-attribuut) verwijzen naar de id van de checkbox;
    • bij andere elementen ben je vrij in de manier waarop je de labels toevoegt.
  2. Zorg er bij de radiobuttons bij de schalen van 1 t/m 10 boven of onder de labels verschijnen. Zie hiervoor de screencast hiernaast.

Verticaal plaatsen van de teksten en radio-buttons (00:06:11)

Labels en inputs zijn van nature inline-elementen.
In deze tutorial baan we ze onder de input met type radio plaatsen.
De labels zijn om de input en label-tekst heen geplaatst.

We maken het display-type van het label eerst inline-block.
Om het voor de gebruiker wat makkelijker te maken geven we het label wat padding, zodat het raakoppervlak groter wordt.
Om te zien wat er gebeurt, geven we de achtergrond van het label een kleur.
Als het input-element nu een display block gegeven wordt, zal het de totale breedte van zijn parent innemen en de tekst er dus onder duwen.
De verdere verwerking laat zien hoe de andere elementen niet de opmaak krijgen zoals hiervoor. Dat doen we door de selector .welbevinden label te kiezen als selector. Dan kies je dus alleen de labels in het element met de class-naam 'welbevinden'.
Om alleen de inputs van het type radio te kiezen hanteer je de css-selector input[type="radio"]

Hiernaast een screenshot van een mogelijk resultaat, waarbij je goed ziet wat er wordt bedoeld met een label onder de input. Je kunt er op klikken om deze afbeelding te downloaden en groter te bekijken.

Bonus opdrachten

Kies uit de volgende mogelijkheden:

  • Maak een eigen PHP-script om jouw formulier te verwerken. (zet die dan ook wel op GitHub bij het inleveren)
  • Plaats alle input-types in fieldsets en geef jouw formulier een responsive layout. Dit wil zeggen:
    • De fieldsets in de weergave voor mobiel onder elkaar staan en voor desktops naast elkaar komen te staan.
    • Gebruik hiervoor mediaqueries.
  • De Keuzeopdracht.
    Maak een formulier voor een startscherm van een game. Game naar eigen keuze of zelfbedacht. Daarbij zorg je ervoor dat er:
    1. minstens 1 textinput, meerdere checkboxes (opties) en radiobuttons (selectie) zijn.
    2. vensters verschijnen of verdwijnen. Eventueeel met gebruik van de tip bij de Keuzeopdracht
    3. Het formulier wordt ook hier verwerkt op http://bla.hosts.ma-cloud.nl/pop.php.


Update het ingeleverde werk

  • Vernieuw je pagina op hosts2.ma-cloud.nl;
  • Valideer opnieuw jouw pagina's.
  • Plaats een nieuwe commit (je kunt als naam UX-vergroten gebruiken) op jouw GitHub repositry (waarvan de link al is ingeleverd bij de instructie inleveren.)