10. Forms in HTML

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

This lesson contains 22 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 180 min

Items in this lesson

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

Slide 1 - Slide

This item has no instructions

Week 10 // WEB
Forms in HTML


Slide 2 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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

Slide 4 - Open question

This item has no instructions

Wat voor dingen zou je in een formulier kunnen invullen?

Slide 5 - Mind map

This item has no instructions

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

Slide 6 - Slide

This item has no instructions

Wat doet wat?

Slide 7 - Slide

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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

Slide 11 - Open question

This item has no instructions

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

Slide 12 - Slide

This item has no instructions

Je form stylen

Slide 13 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

Slide 16 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

Slide 22 - Slide

This item has no instructions