Lektion 28. Formularer med HTML

Forberedelse

Formål

  • Forstå de forskellige muligheder i en formular
  • Lære at kode en formular, i hvert fald hvad frontend angår

Fælles gennemgang

Fra sidst

– Forklar ud fra nedenstående, hvad en funktion er for noget

Valuta omregner
  • Hvorfor er funktioner så fantastiske
  • Hvilke krav kan vi stille til en funktion
  • Forklar forskellen på sekventiel og indeks-sekventiel kode ud fra figuren her
Indeks-sekventiel og sekventiel kode
  • Forklar, hvordan man laver en funktion med og uden returværdi i PHP
Funktion

Lektien til denne gang

Øvelser

Bemærk: Alle kodeopgaver kan du løse ved at oprette og redigere HTML dokumenter. Du får ikke brug for PHP til øvelserne her i lektion 28. Men PHP skal nok vende frygteligt tilbage :-).

28.1 Din første HTML formular

Indsæt koden her i et dokument og besvar spørgsmålene

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 
</body>
</html>
  • Hvad gør attributten “/action_page.php”
  • Lav 2 nye linjer, hvor du laver labels og inputfelter for adresse, postnummer og by
  • Gem dit arbejde

28.2 Attributter

  • Hvad er en attribut i det hele taget. Prøv at forklare det på jævnt dansk, så din mormor også for
  • Forklar de 3 forms-attributter action, target og method
  • Hvad er forskellen mellem GET og POST

28.3 GET eller POST

Du har nu en formular, og du skal beslutte, om du vil bruge GET eller POST

  • Formularen med indmeldelse i AGFs fanklub
  • Når du googler
  • Når du spørger til en lokation i Google Maps
  • Når du køber noget på en webshop

28.4 Pædagogik i informatik

Hvordan kan vi risikere at brugeren fejludfylder formularen. Det kan f.eks. være ved at udelade et valg, f.eks. ved en fald-ned menu eller radio knapper. Hvad kan vi gøre ved det

28.5 Gå på jagt

  • Hvad er forskellen på radio buttons, fald-ned menuer, tekstfelter (input felter til tekst, f.eks. fornavn og efternavn) kontra text areas og tjekbokse
    • Skriv kort ned eller tag skærmdump: Hvilke koder bruger man til hhv. radio knapper, fald-ned menuer, tekstfelter og tjekbokse. Tip: Se i lærebogen og/eller hos W3schools
  • Hvad egner sig til hvad
  • Hvad er en reset-knap

Gå på nettet og find nogle formularer. Ud over indmeldelse i AGF’s fanklub https://medlem.agf-fanclub.dk/indmeld, så findes der millioner af andre formularer. De fleste webshops har dem. Find eksempler på radio buttons, fald-ned menuer, tekstfelter, text areas og tjekbokse, 1 pr gruppemedlem. Tag skærmdumps af det, du finder.

  • Find eksempler på nettet både på at brugeren bliver snydt (f.eks. ved nyhedsbreve) og på, at brugeren bliver godt hjulpet af design og fejlmeddelelser.

28.6 Afleveringsopgave: Kod en formular.

Inden du går i gang: Du skal aflevere opgaven her. Dels er det en vigtig opgave, dels skal du bruge den igen i et senere opgavesæt.

Selve opgaven

Der er folkefest i Fjordkøbing. Efter mange års kamp har byen endelig fået en svømmehal. Allerede inden åbningen er der startet en svømmeklub i byen, svømmeklubben “Rovfiskene”. Du skal nu lave en kode en formular. Det drejer sig om en indmeldelsesblanket til svømmeklubben.

  • Du skal sende indholdet til “form_handling.php”. Overvej, om du vil bruge GET eller POST
  • Der skal være følgende
    • Navn
    • Adresse
    • Postnummer og by. Postnummer skal være en fald-ned menu, hvor du vælger mellem postnummer 5678 Fjordkøbing, 6012 Bykøbing og 6123 Landkøbing
    • Email
    • Telefonnummer
    • Alder
    • Medlemsskab: Junior kr 400 pr år, senioer kr. 500 pr år, elite kr. 800 pr år og passivt medlemsskab kr. 200 pr år. Mulighederne er gensidigt udelukkende
    • Interesser. Her må man krydse flere felter af: Elite svømning, motionssvømning, begyndersvømning, havsvømning, triatlon, konkurrence svømning
    • Har bil (ja/nej)
    • Ønsket password til medlemsområde (min 4. tegn)
    • Lav et tekstfelt (text area), hvor man kan sende beskeder til klubben.
    • Der skal være en send-knap og en reset knap. Begge dele skal være <input> felter
  • Lav din formular pæn med noget velvalgt CSS :-). Lav stylingen i et eksternt stylesheet