Oefening: Formulier maken

Inleiding

We maken een contactformulier voor de site van "Vespa"

In eerste instantie testen we dit formulier met een testscriptje dat gewoon de gegevens die doorgestuurd zijn toont.

Opgepast: in de video wordt de opgave in een andere volgorde bekeken dan in deze opgave.

Video 1 | Video 2 | Video 3

Voorbeeld

Bekijk een voorbeeld

Voorbereiding

Site in .zip formaat

Oefening

Basisformulier

1. Open index.html. Stel de koppeling bij Contact in naar contact.html
2. Dupliceer index.html naar contact.html, zodat deze pagina ook effectief bestaat.
3. Zorg dat je in het nieuwe bestand contact.html aan het werken bent. Wijzig de titel en verwijder de oude inhoud.
4. Voeg een formulier element in. Enkel de velden die binnen dit formulier-element zitten, zullen werken!
   
   

3. Voeg binnen het formulier wat ruimte toe met de Enter-knop (kwestie van wat plek te hebben om te werken)
4. Maak binnen het formulier een tekstvak voor de Naam.
   
   Geef via het Eigenschappen-venster als Name in: doorgestuurde_naam doorgestuurd worden.
   1. Het tekst veld toont 25 karakters.
   2. De naam mag maximum 100 karakters lang zijn.
   3. Dit venster is verplicht (Required).
5. Maak een invoerveld voor E-mail.
   
   Name: doorgestuurd_mailadres
   1. Het tekst veld toont 25 karakters.
   2. Het mailadres mag maximum 100 karakters lang zijn.
   3. Dit venster is verplicht (Required).
      

CSS-stijl

6. We zitten nu met twee tekstvelden (met label) naast elkaar. Via CSS stellen we die in, zodat ze in rijen onder elkaar komen.
   
   
   1. Klik op het label, en maak een CSS-regel aan voor het label-element, met als eigenschappen:
      
      display: block (zodat het element zich als een block-element gedraagt en beter via CSS manipuleerbaar is (cfr a-element)
      
      width: 49% zodat alle labels dezelfde breedte (nl. net niet de helft) innemen van de beschikbare ruimte. Waarom geen 50%? Omdat er nog witruimte van andere elementen meespeelt. Met 49% breedte kunnen we dit opvangen.
      
      float: left; (zodat het altijd links zweeft, en het veld ernaast komt te staan)
      
      clear: left (zodat een label zeker altijd op een nieuwe lijn komt te staan, bij een breedte van bv. 200px zouden er meerdere labels op één lijn kunnen passen maar dat willen we niet)
      
      optioneel: text-align: right (zodat de label-tekst rechts uitlijnt, en tegen de invulvelden zal staan)
      
      
   2. Klik op het invulveld. Maak een nieuwe kiezer aan voor het element input, met als eigenschap display: block. Stel eventueel ook een breedte (bv. ook 49%) in. Gebruik geen clear, want dan zal het invulveld ook telkens op een nieuwe regel terechtkomen.
      Normaal gezien komen label en inputveld nu naast elkaar.
      
      

Andere velden

7. De 3e rij wordt een invoer van een Wachtwoord. (doorgestuurd_paswoord)
   1. Het tekstveld toont 25 karakters.
   2. Het wachtwoord mag maximum 6 karakters lang zijn.
      
8. Op de 4e rij komt Bericht met een groot tekstveld doorgestuurde_commentaar.
   Het veld is 30 tekens breed en 5 lijnen hoog.
9. Op de laatste rij komt een knop Verzenden die het formulier doorstuurt.
   
   Deze knop heeft als naam verzendknop.
10. Stel de actie in en de methode van het formulier:
    1. Selecteer via de statusbalk (of via de code) het <form>-element.
    2. Stel via eigenschappen in:
       1. Actie: http://www.kreatuur.be/pcvo/scripts/dump_form.php
       2. Methode: GET
          
          

       Het serverscript ontvangt de gegevens die je doorgestuurd hebt en toont ze in een lijstje.

       De bedoeling van dit script is enkel te controleren of de gegevens doorgestuurd zijn.

11. Bekijk dit resultaat in een browser en test de verschillende velden. Bekijk ook de URL-balk.
    
12. Wijzig de methode van het formulier naar POST en bekijk de URL-balk. Welk verschil zie je t.o.v. daarnet, toen de methode nog op GET stond?

Andere formulier-elementen invoegen

13. Typ volgende tekst in Wat zijn uw hobbies?
14. Daaronder komen een aantal aanvinkveldjes Je kan verschillende vinkjes aanvinken.
    
    1. Toevallig: name hobby1, value netfl.
    2. Zoekmachine: name hobby2, value gm.
    3. Vrienden : name hobby3, value tk.
15. In de volgende rij komt: Wat is uw geslacht?
    Gebruik <br> (Shift-Enter) om ze onder elkaar te krijgen.
    
    
    1. Man, value = m
    2. Vrouw, value = v
    3. Genderfluïde, value = g
    4. Non-binair, value = nb
    5. ... enzovoort.
16. Geef elke radiobutton in het Eigenschappenvenster dezelfde naam, zodat er maar één keuze kan aangeklikt worden, wat de bedoeling is van radiobuttons.
    
17. Voeg een keuzelijst toe.
    
    
1. België >B
2. Nederland > NL
3. Ander > A

CSS-opmaak

Opgepast: in de video worden hier andere kleuren en opmaak gebruikt. Beslis zelf welke kleuren je gebruikt, en hoe je alles vormgeeft. Dit dient enkel als inspiratie. In de video worden soms "circus-kleuren" gebruikt, zodat je beter ziet welke breedte de elementen innemen. Achteraf kan je die circus-kleuren altijd weer uit je CSS verwijderen.

1. Definieer een CSS opmaak voor de element input enkel op deze pagina.
   1. Background: lichtgrijs.
   2. Border: Dotted, 1px, donkergrijs.
2. Doe hetzelfde voor het element textarea en select. (grote tekstkaders en uitklapmenu's bestaan namelijk uit een ander HTML-element)
3. Bekijk het resultaat in een browser.
4. Voeg een CSS opmaak toe die de input velden een gele achtergrond geeft wanneer ze geselecteerd zijn. Gebruik hiervoor de tag input:focus (via geavanceerd). Input:focus staat voor invulveld waarin geklikt wordt.
   
5. Extra: maak speciale classes aan (en pas deze toe) om de radiobuttons en selectievakjes een achtergrondkleur te geven.
6. Extra 2: test de werking van input:hover (via geavanceerd) uit.

 

Formulier dat email verzendt

Deze geavanceerde methode heb je nodig wanneer je betalende php-hosting hebt. Dit wordt niet in de video besproken, maar je kan het gerust uitproberen.