HTML Module 2 Les 2.3 t.b.v. student MBO Rijnland Applicatie en Mediaontwikkeling Leiden

1. 2.3 Forms and more
HTML module 22.3 Forms and more

2. Terugblik!
Tables!
HTML module 22.3 Forms and more

3. HTML module 22.3 Forms and more
<form>
Het <form> element wordt
gebruikt voor het aanmaken van
een formulier.
<table>
Het <table> element wordt
gebruikt voor het aanmaken van
een tabel.

4. HTML module 22.3 Forms and more
<input>
Het <input> element wordt
gebruikt voor het aanmaken van
een invoerveld.

5. HTML module 22.3 Forms and more
<input Types>
Input type geeft je de mogelijkheid
het type invoerveld te bepalen
In het voorbeeld gebruiken we
4 verschillende inputtypes nl:
• Text (plain tekst alle karakter)
• Email (moet @ bevatten)
• Password (laat alleen bullets zien)
• Button (maakt button)
Name = php !

6. HTML module 22.3 Forms and more
<input-type: Email>
Fout ingevoerd
Goed ingevoerd
Input-type: submit

7. HTML module 22.3 Forms and more
<input-type: password>
Maakt bullets van ingevuld password!

8. HTML module 22.3 Forms and more
Attributes: Placeholder en Value
Value: is een waarde
die aan het inputveld
gekoppeld wordt. Bij
verwerken van het formulier
wordt dit meegenomen.

9. HTML module 22.3 Forms and more
<input-type: reset>
Na klikken op reset 2e scherm
Inputs: bevestigen en reset
Reset maakt het formulier leeg.

10. HTML module 22.3 Forms and more
Select-tag / options
De select-tag geeft je de mogelijkheid
een invoerveld met keuze mogelijkheden te maken

11. HTML module 22.3 Forms and more
<input-type: radio>
De input-type radio geeft je de mogelijkheid
een keuze mogelijk te maken.

12. HTML module 22.3 Forms and more
<input-type: checkbox>

13. Lesdoel!
Forms gebruiken en begrijpen!
HTML module 22.3 Forms and more

14. HTML module 22.3 Forms and more
<input-type: date>

15. HTML module 22.3 Forms and more
<input-type: hidden>
Niet zichtbaar.
Bij verwerken wel uit
te lezen door name.

16. HTML module 22.3 Forms and more
<input-type: range>
De input-type range geeft je de mogelijkheid
een slider keuze te laten maken.

17. HTML module 22.3 Forms and more
<input-type: tel>
De input-type tel kan je gebruiken voor telefoonnummers
in te laten vullen.

18. HTML module 22.3 Forms and more
<Alle input-types op een rijtje>

19. HTML module 22.3 Forms and more
Input-attribute: Required
De required attribute zorgt ervoor dat het input veld
verplicht ingevuld moet worden.

20. HTML module 22.3 Forms and more
Input-attribute: readonly
De readonly attribute zorgt ervoor dat het input veld
niet gewijzigd kan worden.

21. HTML module 22.3 Forms and more
Input-attribute: pattern
Met de pattern attribute kan je bepalen waar aan de
inhoud minimaal moet voldoen.

22. HTML module 22.3 Forms and more
Input-attribute: pattern (password)

23. Opdracht !
Pas de huiswerk opdracht van de vorig les aan:
• Maak de input velden die belangrijk zijn required.
• Maak een pattern voor het invullen van het wachtwoord
• Pas de input velden aan met de juiste input-types
Je heb hier 20 minuten voor
HTML module 22.3 Forms and more

24. HTML module 22.3 Forms and more
Style en vormgeven
van forms

25. HTML module 22.3 Forms and more
Input-style: box-shadow

26. HTML module 22.3 Forms and more
Input-style: background
Background-image en background-color
voor input met opacity.

27. Huiswerk Opdracht !
Maak een story mobile webapplicatie met de gevens
vanuit de opdracht (2.2) en toevoegingen uit deze les.
Op de volgende pagina zie je een voorbeeld.
Je mag de stijl zelf bepalen. Moet wel meerdere pagina’s
of in een onepagers full screen sections bevatten.
Upload het geheel als zip file als opdracht 2.3
HTML module 22.3 Forms and more

28. Huiswerk Opdracht !
HTML module 22.3 Forms and more