10. Forms in HTML

WEB
Webdevelopment-II (WDV-II)
Les 2 / Week 10
Forms in HTML
1 / 22
volgende
Slide 1: Tekstslide
Software Developer [WEB_A]MBOStudiejaar 1

In deze les zitten 22 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 180 min

Onderdelen in deze les

WEB
Webdevelopment-II (WDV-II)
Les 2 / Week 10
Forms in HTML

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Week 10 // WEB
Forms in HTML


Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat is een form(ulier)?
  • HTML-pagina met invulvelden
  • Maakt het mogelijk een interactieve pagina te maken
  • Gebruiker de mogelijkheid geven gegevens in te vullen
  • Het formulier verzenden naar PHP, die handelt het af

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Voor wat voor toepassingen zou een gebruiker een formulier kunnen gebruiken?

Slide 4 - Open vraag

Deze slide heeft geen instructies

Wat voor dingen zou je in een formulier kunnen invullen?

Slide 5 - Woordweb

Deze slide heeft geen instructies

Voorbeeld hoe een formulier werkt in de browser
(WDV-II - Docentenmap - Week 10 - form.zip)

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Wat doet wat?

Slide 7 - Tekstslide

Welke regel zorgt voor welk stukje op het scherm?
Wat doet wat?
form action
Geeft aan naar welke pagina het formulier naartoe verzonden wordt na het drukken op de submit knop.
methode
Hier geef je aan of je het formulier wilt verzenden met POST of GET.

We versturen een formulier altijd versleuteld via de methode POST. GET betekent via de URL (en dus zichtbaar- en dat willen we niet)
label
Je kunt je invulveld een label meegeven, zodat de gebruiker ziet wat die moet invullen.
submit
Als we het formulier willen verzenden maken we een input van het type 'submit'. Zodra er op gedrukt wordt, verzend het formulier naar de opgegeven 'action'.

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Wat doet wat?
name
De key die wordt meegegeven aan de value als het formulier verzonden wordt. Als je de informatie uit dit veld wilt gebruiken moet je ALTIJD zorgen dat een input een ‘name’- attribuut heeft. Met de waarde achter ‘name’ kun je het veld aanspreken vanuit bijv. PHP.
type
Het soort input dat je maakt, bijvoorbeeld text, submit maar er zijn nog veel meer mogelijkheden.
value
Bij een knop: de tekst die op de knop getoond wordt.

Bij een andere input: de tekst die alvast in het veld wordt getoond.

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Opdracht

Een input-tag kun je dus een type-attribuut geven. Welke mogelijkheden zijn er? Maak zelf een lijst zoals:

"number - om getallen in te voeren"





Klaar? Zoek verder, en meer info over de types.
timer
4:00
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Het inputveld kan ik een type mee geven. Ga eens op zoek naar welke mogelijkheden ik bij dit attribuut ik heb:

Slide 11 - Open vraag

Deze slide heeft geen instructies

Classes in mijn HTML-formulier
  • Overzichtelijker
  • Gemakkelijk te stylen

Slide 12 - Tekstslide

Deze slide heeft geen instructies

Je form stylen

Slide 13 - Tekstslide

Deze slide heeft geen instructies

input: radio
input type 'radio' geeft ons een wit rond bolletje dat we kunnen aanklikken. We kunnen zo keuzes geven aan de gebruiker. Door elke input hetzelfde name-attribuut te geven, kunnen we maar 1 optie kiezen. We geven een value mee, zodat bij verzending van het formulier de optie wordt meegegeven. 
textarea
we kunnen in plaats van 'input' ook 'textarea' gebruiken. Hiermee kunnen we aangeven hoe groot het veld moet zijn dat de gebruiker in kan vullen. Input geeft namelijk slechts 1 regel. 
Textarea vraagt om een aantal rows en cols. 

Slide 14 - Tekstslide

Deze slide heeft geen instructies

input: radio
input type 'radio' geeft ons een wit rond bolletje dat we kunnen aanklikken. We kunnen zo keuzes geven aan de gebruiker. Door elke input hetzelfde name-attribuut te geven, kunnen we maar 1 optie kiezen. We geven een value mee, zodat bij verzending van het formulier de optie wordt meegegeven. 

Slide 15 - Tekstslide

Deze slide heeft geen instructies

Slide 16 - Tekstslide

Deze slide heeft geen instructies

submit
  • Een knop om je formulier te verzenden.
  • De value is de tekst die de knop krijgt.
  • Geen name-value, we gaan de inhoud van de knop niet ophalen namelijk.

Slide 17 - Tekstslide

Deze slide heeft geen instructies

Opdracht 10.1:
een formulier maken in HTML

Zie bladzijde 14 van moduleboekje,
maak deze opdracht.





Klaar? Verder met 10.2

Als de timer afloopt: opdracht 10.1 is klaar, klassikaal bespreken
timer
15:00
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes

Slide 18 - Tekstslide

Deze slide heeft geen instructies

Opdracht 10.2:
een formulier stylen in CSS

Zie bladzijde 14 van moduleboekje,
maak deze opdracht.





Klaar? Verder met inleveropdracht.

Als de timer afloopt: opdracht 10.2 is klaar, klassikaal bespreken
timer
15:00
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes

Slide 19 - Tekstslide

Deze slide heeft geen instructies

Weekcheck:
Inleveropdracht H2

Zie bladzijde 14 van moduleboekje,
maak deze opdracht.





Klaar?
  • Inleveren op Itslearning
  • Laat mij even weten
  • Werk aan ander vak
  • Verwerk de feedback
Stilte, werk voor jezelf
Overleg met buur is ok
Werk in groepjes

Slide 20 - Tekstslide

Deze slide heeft geen instructies

10.2: een formulier stylen in CSS
Je hebt in de vorige opdracht classes toegevoegd aan je formulier in HTML.
Maak een bestand in de map registerform/css met de naam ‘style.css’.
- Spreek je .form aan en zet er een border omheen van 1x pixel breed solid black.
- Spreek je .form-group aan en geef hem:
o een achtergrond met een mooie roodtint (kijk naar hexadecimale kleuren via W3Schools.
o Maak de letterkleur wit.
o Geef de padding links en rechts 20 pixels, top en bottom 10 pixels.
o Maak de breedte 450 pixels.
o Zet een rand om elk invulveld heen van 1 pixel double #ff6347
- Sla je document op en test je aanpassingen in de browser.

Slide 21 - Tekstslide

Deze slide heeft geen instructies

Slide 22 - Tekstslide

Deze slide heeft geen instructies