Module 2 / Les 2.2 t.b.v. studenten MBO Rijnland Leiden / Opleiding en Applicatie en Media Ontwikkeling

1. 2.2 Forms Intro
HTML module 22.2 Forms intro

2. Terugblik!
Tables!
HTML module 22.2 Forms intro

3. HTML module 2
<table>
Het <table> element wordt
gebruikt voor het aanmaken van
een tabel.
<caption>
Het <caption> element wordt
gebruikt voor het plaatsen
van een legenda boven de tabel.
2.2 Forms intro

4. HTML module 2
<tr>
De start van iedere rij in tabel
gebeurt met de <tr> tag
tr staat voor table row.
2.2 Forms intro

5. HTML module 2
<th>
Het <th> element gebruik je voor
het maken van de heading van
iedere kolom in de tabel
2.2 Forms intro

6. HTML module 2
<td>
Iedere cel van de tabel wordt
gemaakt met de <td> tag.
2.2 Forms intro

7. HTML module 2
colspan
Soms is het nodig dat cellen van een
tabel uit meerdere rijen kan bestaan.
Dit kan met de colspan attribuut.
De colspan attribuut wordt gebruikt met
het <td> en <th> element.
2.2 Forms intro

8. HTML module 2
colspan
Beetje style toegevoegd.
2.2 Forms intro

9. CSS :nth-child() Selector
HTML module 2
Hiermee kan je de style bepalen vanaf de parent
2.2 Forms intro

10. CSS :nth-child() Selector
HTML module 2
Je kan ook even en oneven child’s selecteren
2.2 Forms intro

11. CSS :nth-child() Selector
HTML module 2
Je kan ook met een formule child’s selecteren
Style iedere 3e child vanaf 0.
2.2 Forms intro

12. HTML module 2
Tabel Responsive
Tabellen maak je responsive door aanpassen style
1e stap
Plaats huidige css code in de @media voor overige
devices.
2.2 Forms intro

13. Lesdoel!
Hoe en wanneer gebruik je forms!
HTML module 22.2 Forms intro

14. FORMS
HTML module 22.2 Forms intro
Voorbeeld 1

15. HTML module 22.2 Forms intro
Voorbeeld 2

16. HTML module 22.2 Forms intro
Voorbeeld 3

17. Forms zijn voor het delen, verzamelen en
opvragen van gegevens.
• Aanvraagformulier account
• Reserveringen formulier
• Inlogscherm
• Bestelformulier
• Zoeken
• Etc
FORMS
HTML module 22.2 Forms intro

18. HTML module 22.2 Forms intro
Eenvoudig formulier voor aanvragen account
Ingrediënten
• <form> </form>
• <input>
• <table></table>
• <tr></tr>
• <td></td>
• Name-attribuut
• style

19. HTML module 22.2 Forms intro
<form>
Het <form> element wordt
gebruikt voor het aanmaken van
een formulier.
<table>
Het <table> element wordt
gebruikt voor het aanmaken van
een tabel.

20. HTML module 22.2 Forms intro
<input>
Het <input> element wordt
gebruikt voor het aanmaken van
een invoerveld.

21. HTML module 22.2 Forms intro
<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 !

22. HTML module 22.2 Forms intro
<input-type: Email>
Fout ingevoerd
Goed ingevoerd
Input-type: submit

23. HTML module 22.2 Forms intro
<input-type: password>
Maakt bullets van ingevuld password!

24. HTML module 22.2 Forms intro
Attributes: Placeholder en Value
Value: is een waarde
die aan het inputveld
gekoppeld wordt. Bij
verwerken van het formulier
wordt dit meegenomen.

25. HTML module 22.2 Forms intro
Attributes: Placeholder en Value
placeholder: is een tekst
die bij verwerking niet
meegenomen wordt. Als je
het veld niet invult blijft
deze leeg bij verwerking.

26. HTML module 22.2 Forms intro
Lesopdracht
Maak (responsive) webpagina met een aanmeld formulier met
de volgende gegevens: voornaam, achternaam, email, leeftijd
en wachtwoord. De indeling voor groot scherm mag je zelf
bepalen. Voor mobile moeten de velden onder elkaar komen
te staan.
Je hebt hier max. 20 minuten voor.

27. HTML module 22.2 Forms intro
<input-type: reset>
Na klikken op reset 2e scherm
Inputs: bevestigen en reset
Reset maakt het formulier leeg.

28. HTML module 22.2 Forms intro
Select-tag / options
De select-tag geeft je de mogelijkheid
een invoerveld met keuze mogelijkheden te maken

29. HTML module 22.2 Forms intro
<input-type: radio>
De input-type radio geeft je de mogelijkheid
een keuze mogelijk te maken.

30. HTML module 22.2 Forms intro
<input-type: radio>
De input-type radio geeft je de mogelijkheid
een keuze mogelijk te maken.

31. HTML module 22.2 Forms intro
<input-type: checkbox>

32. Opdracht !
HTML module 22.1 Tables and Forms
Ga verder met de (responsive) webpagina met het aanmeld formulier
breidt het formulier uit met type abonnement, keuze geslacht,
akkoord algemene voorwaarden en bankrekening nummer.
Voor mobile moeten de velden onder elkaar komen
te staan.
Maak er een volledige pagina van en stijl het geheel met bijv.
een background en positioneren van het formulier.
Lever het geheel als zip-bestand in de dag voor het begin van
de volgende les in teams opdracht 2.2.