10. Forms in HTML

• Software Developer [WEB_A]
• MBO
• Studiejaar 1

WEB

Webdevelopment-II (WDV-II)

Les 2 / Week 10

Forms in HTML

Week 10 // WEB

Forms in HTML

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

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

Wat voor dingen zou je in een formulier kunnen invullen?

Voorbeeld hoe een formulier werkt in de browser

(WDV-II - Docentenmap - Week 10 - form.zip)

Wat doet wat?

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

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.

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.

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

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

Classes in mijn HTML-formulier

• Overzichtelijker
• Gemakkelijk te stylen

Je form stylen

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. 

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. 

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.

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

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

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

Stilte, werk voor jezelf

Overleg met buur is ok

Werk in groepjes

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

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.