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

Er komt nogal wat op je af als je kennismaakt met formulieren in HTML. Als je jezef verder wilt verdiepen kan dat met de volgende bronnen:

  1. Een Engelstalige versie van de presentatie: https://drive.google.com/file/d/0Bxa_0P274O7JbTd2Sk4zRnF2SW8/view
  2. Een Nederlandstalige inleiding (HTML 4 dus wat ouder): http://www.handleidinghtml.nl/html/formulieren/formulieren01.html
  3. Een tutorial op MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form#Active_learning_Implementing_our_form_HTML
  4. een tutorial op tutorailspoint https://www.tutorialspoint.com/html/html_forms.htm
  5. en ons overbekende W3Schools: https://www.w3schools.com/html/html_forms.asp

Misschien onverwacht

Hiernaast 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.

1. Bestudeer de theorie

Hiervoor zijn 2 mogelijkheden. Maak je keuze uit:

:: a :: Presentatie doornemen en W3 Schools oefenen

  1. Bestudeer de presentatie die je ook rechtsboven aan deze pagina ziet.
  2. Ga na of je weet:
    • hoe je en form-tag kunt gebruiken en welke 2 attributen vereist zijn
    • een submit-knop kunt toevoegen en weet wat die doet
    • de volgende input-elementen kent:
      • input: type text
      • input: type radio (selectie)
      • input: type checkbox (optie)
      • textarea
      • select (selectie)
  3. Neus wat rond op de volgendepagina's van W3 Schools en oefen daar wat mee:
    1. formulier 1
    2. radio-buttons
    3. submit
    4. method: POST
  4. Download de voorbeeldcode van GitHub: https://github.com/Theo-denBlanken/voorbeeldFormulier/blob/master/customerInfo.html en kijk welke nieuwe attributen je ziet.
  5. Als je het document opent in jouw browser ziet het eruit zoals in de afbeelding hieronder.
  6. Kijk of je de opmaak-code begrijpt.
    De code is ONGESCHIKT om hem in de oefening hieronder verder te gebruiken.
    voorbeeld van formulier

:: b :: Lynda.com doornemen

  1. Een alternatief voor de theorie die je hier kunt volgen: een cursus op Lynda.com: HTML & CSS: Creating Forms
    Doe met de filmpjes mee en maak een formulier dat alle elementen uit de onderstaande onderdelen bevat.
    Voor de method gebruik je GET en voor action http://bla.hosts.ma-cloud.nl/pop.php Bekijk hier in ieder geval de volgende delen uit 2. Creating forms with HTML:
    • Basic form structure
    • Text, email and URL input types
    • Radio buttons
    • Select
    • Submit and other types of buttons
    • Attributes in forms
    En uit 3. Making Forms Interactive:
    • Form submission and security
  2. Download de voorbeeldcode van GitHub: https://github.com/Theo-denBlanken/voorbeeldFormulier/blob/master/customerInfo.html en kijk welke nieuwe attributen je ziet.
  3. Als je het document opent in jouw browser ziet het eruit zoals in de afbeelding hieronder.
  4. Kijk of je de opmaak-code begrijpt.
    De code is ONGESCHIKT om hem in de oefening hieronder verder te gebruiken.
    voorbeeld van formulier

2. Maak een werkend formulier

Ook hiervoor zijn er 2 mogelijkheden. Maak je keuze uit:

:: c ::Een SLB-formulier

Een SLB-docent kan van elke student informatie opvragen; Je gaat daarvoor de HTML schrijven.
CSS is niet nodig; dat komt in een andere training.

  1. Bekijk de afbeelding van het formulier hieronder.
    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 kale inhoud van dit formulier eenvoudig overnemen uit: https://github.com/Theo-denBlanken/voorbeeldFormulier/blob/master/README.md.
    2. Voeg in jouw formulier MINSTENS 1 (één) vraag toe.
      Bedenk deze helemaal zelf en bepaal zelf welk input-type je daarvoor het beste kunt gebruiken (geen textarea wantdat is die is niet zo als de andere inputs). Het moet voor de SLB-docent een relevante vraag zijn.
    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

:: d ::Een startscherm van een game

Hierboven heb je al een werkende game gezien, die met een formulier en JS is gebouwd. Je herkent dat formulier niet zo omdat de inputs verborgen zijn. Het waren check-boxes.
De gebruiker klikt feitelijk op labels en daardoor worden die onzichtbare inputs gechecked.

In de afbeelding hieronder zie je een voorbeeld van een startscherm voor een game, die je met een formulier 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.
startscherm minecraft

Het formulier wordt ook hier verwerkt (action-attribuut) op http://bla.hosts.ma-cloud.nl/pop.php.

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

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







 

Bonus opdracht

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)
Hieronder de theorie en een opdrcht die in een andere week zal worden gevraagd: de vergroting van de UX voor formulieren.

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.

een mogelijk resultaat met de labels onder de inputs

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.)