1. Kodebegreber

I dette notat skal du lære at genkende nogle kodebegreber, som optræder i næsten alle dynamiske kodesprog. Dvs. ikke HTML og CSS, men alt fra C# over Unity til PHP, C, C++, Python mv. Noten er skrevet for begyndere.

Man har begreber som variable, forgrening og betingelser, loops mv. i næsten alle kodesprog. Det svarer fuldstændigt til, at man har navneord, udsagnsord, tillægsord mv. i næsten alle talte sprog som f.eks. dansk, engelsk, tysk, spansk osv.

Når vi er færdige med kapitlet her, skal du kunne nedenstående begreber. Begreberne vil blive gennemgået en efter en i kapitlet.

BEGREB	KORT FORKLARING OG ANVENDELSE
Variabel	FORKLARING: En beholder, der kan rumme 1 og kun 1 værdi. Til gengæld kan du skifte indholdet lige så tit, du vil ANVENDELSE: Vi bruger variable meget i kodning. F.eks. når brugeren indtaster en værdi (det kunne være navn, adresse, password mv), så gemmer vi værdien i en variabel i backend, så vi kan arbejde med den dér
Sekvens	FORKLARING: Indholdet er ikke så vigtigt, det vigtige er, at koden afvikles i en bestemt rækkefølge ANVENDELSE: Sekvenser har, modsat andre kodebegreber, ikke en bestemt anvendelse.
Forgrening og betingelse	FORKLARING: Hvis en betingelse er opfyldt, så gør en ting. Ellers gør noget andet. If-else sætninger kan med andre ord træffe beslutninger ud fra et input (typisk en variabel). Det er altid en hvis-sætning i koden. På engelsk kalder man det en if-then-else sætning ANVENDELSE: Meget anvendt, f.eks. hvis du indtaster brugernavn og password, så skal programmet afgøre, om du kan logges ind eller ej.
Arrays og loops	FORKLARING: Et array er en række af variable, dvs. at et array kan rumme mange værdier. På dansk kan man kalde det en liste. Et loop er en handling, der udføres igen og igen, indtil man er færdig ANVENDELSE: Arrays bruges til at lave lister med, f.eks. en huskeseddel, en liste over elever i en klasse mv. Når man arbejder med arrays, bruger man loops til f.eks. at udskrive arrayet.
Funktioner	FORKLARING. Vi bruger det til at pakke en samlet klump kode ind med. Kald det gerne en stik-i-rend dreng, som man kan kode til at gøre alt muligt ANVENDELSE: Man kan sige, at funktioner ofte er den indkøbspose, som vi har vores kode i. Så kan vi holde styr på koden.
Events og funktioner	FORKLARING: En event er den begivenhed, der sætter funktionen i gang. F.eks. et klik på en knap. ANVENDELSE: Eventen skaber kontakt fra frontend til backend. Så når brugeren klikker, så sker der noget kodeafvikling i backend.
Kommentarer	FORKLARING: Mennesketekst inde i koden. Kommentarer påvirker ikke resten af koden. ANVENDELSE: Gør din kode forståelig for både dig selv og andre, næste gang du ser på koden

Overblik over kodebegreber, som du skal kunne.

1.1 Rutediagrammer/flowcharts

Inden vi går i gang med koden, skal du lære rutediagrammer at kende. Rutediagrammer er enkle diagrammer over, hvilke “ruter” der er igennem programmet. De er gode til at skabe overblik, og man kan kode direkte efter et rutediagram. På engelsk hedder et rutediagram et “flowchart”.

Vi vil her arbejde med 5 enkelt elementer til rutediagrammer.

Her er et eksempel på et rutediagram for at logge på Facebook. Du kender det sikkert godt. Vi ser her bort fra muligheden af at have glemt adgangskoden eller oprette ny konto.

• Start: Brugeren vil logge på Facebook
• Input: Indtast email eller telefonnummer
• Input: Indtast password
• Handling: Log på
• Forgrening/betingelse: Findes brugeren
  • Handling: Hvis ja log på
  • Handling: Hvis nej nægt adgang, giv brugeren en fejlmeddelese og giv mulighed for at logge på igen
• Slut

Diagrammet ser sådan her ud. Jeg anbefaler, at du tegner med draw.io, men for overskuelighedens skyld har jeg brugt PowerPoint.

Se gerne videoerne. Elementet til input er dog ikke med i videoerne.

Se et worked example herunder. Jeg har brugt PowerPoint som værktøj i videoen, men jeg anbefaler online tegneværktøjer draw.io. Du bestemmer dog selv, hvilket værktøj, du vil bruge.

1.2 Variable

Lær det her: “En variabel er en beholder, der kan rumme 1 og kun 1 værdi”. Til gengæld kan den skiftes ud lige så tit, man vil. Her er et par eksempler:

• Highscore i et spil
• Antal liv i et spil
• Din alder. Den bliver opdateret hvert år på din fødselsdag
• Målscore, tid, alt muligt inden for sportens verden
• Priser
• … osv. osv.

Her er der masser af variable. DeHviii (kælenavn for AGF’s hvidblusede fodboldhold) er foran med 2 – 0 mod Brøndby foran på et ret tavst BUNDby undskyld Brøndby Stadion. Vi har brug for 2 variable: 1 til AGF’s målscore og 1 til Brøndbys. For AGF’s vedkommende har vi allerede ændret variablens indhold 2 gange. I øvrigt ender kampen 3 – 0 til DeHviii. Det var en smuk dag den 25. august 2019 :-).

I AppLab definerer vi en variabel ved at skrive “var” + et navn. Vi sætter den gerne lig værdien af et indtastet felt.

I eksemplet her oprettes i linje 2 variablen “beløb”. I linje 3 oprettes en ny variabel “resultat” Variablen “resultat sættes” lig med det, som brugeren har indtastet i tekstfeltet “text_input1”. I linje 4 returneres variablen beløb til frontend og skrives i tekstfeltet label3.

1.3 Sekvens

En sekvens er en rækkefølge. Det er ikke så vigtigt, hvad sekvensen handler om. Det vigtige er rækkefølgen. Her er Gurli Gymnasieelevs rækkefølge, når hun står op om morgenen:

1. Slå vækkeuret fra
2. Gå ud på badeværelset
3. Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
4. Gå i bad
5. Spise morgenmad
6. Pakke skoletasken
7. Komme ud af døren
8. Nå bussen
9. Tjekke mobilen

Hvad nu, hvis Gurli gør tingene i en anden rækkefølge. Så går det galt!

1. Tjekke mobilen
2. Komme ud af døren
3. Spise morgenmad
4. Nå bussen
5. Jage lillesøster ud fra badeværelset, så hun kan få det for sig selv
6. Pakke skoletasken
7. Gå ud på badeværelset
8. Slå vækkeuret fra
9. Gå i bad

I kodning kan en sekvens bestå af alt mulig forskellig kode. Det skal bare gøres i den rigtige rækkefølge.

Samme eksempel fra før. Hvis vi byttede rundt på rækkefølgen, så vil koden ikke fungere. Næsten alle programmer har sekvenser.

1.4 Forgrening og betingelse

Forgrening og betingelse er det eneste sted i programmet, hvor man kan tage en beslutning. Hvis en betigelse er opfyldt, så gør …. Ellers gør sådan og sådan …

HVIS … SÅ …. ELLERS SÅ ….

På engelsk: IF … THEN … ELSE

I kodning bruger man en HVIS-sætning. På engelsk kaldes det en IF -sætning. Et typisk eksempel kunne være, når man logger ind med brugernavn og adgangskode

1. Indtast dit brugernavn og adgangskode
2. HVIS (brugernavn og adgangskode er rigtige) SÅ (bliver du logget ind) ELLERS SÅ (prøv igen).

1.5 Arrays og loops

Array betyder “række”. Det er en række fyldt med variable. Et eksempel: Hvis du vil have en elektronisk huskeseddel, så lav punkterne i et array i stedet for individuelle variable. Det gør det nemmere, når vi skal udskrive huskesedlen. Så vil programmet “loope” igennem huskesedlen og udskrive punkterne et for et, indtil alt er skrevet ud.

Du må gerne tænke på tivolier, når vi snakker loops. Folk står i arrays (rækker, dvs. køer) for at prøve loops. Man kan naturligvis have flere loops i et program lige som på billedet her:

Et eksempel mere: Peter Popmusik elsker at høre musik på Spotify. Han laver en playliste med hans 10 favoritnumre. I programmeringsmæssig forstand har han nu et array med 10 emner. Computeren kan så afspille dem en efter en i rækkefølge, fordi de står samlet i en række i array’et.

I AppLab ser det ud som vist nedenfor.

Her er arrayet allerede udfyldt med 4 variable: “müstli”, “mælk”, “rosiner” og “the”. I linje 3 har jeg en helt almindelig variabel var print = “”. Vi bruger kun firkantede parenteser, når vi laver et array og ikke en variabel.

Hvis vi skal loope, bruger vi en “for” løkke som vist med blå farve i linje 4 – 7. For-løkken løber arrayet huskeseddel igennem og skriver elementerne i arrayet “huskeseddel” til variablen print.

Resultatet af kodningen ovenfor. Hvis du vil se det selv, så åben linket her i AppLab: https://studio.code.org/projects/applab/D9eamV28solo71FdkIWpQ-0vKqE2HAVWw34ZCmIeAxo

1.6 Løbenumre i arrays

Når du laver et array, så tildeler programmet altid et løbenummer til den enkelte variabel. Løbenummeret vises aldrig synligt, men det er der altid, og vi bruger det meget i vores kodning.

Løbenummeret starter ved 0. Det næste løbenummer er det gamle plus 1, dvs. at næste løbenummer efter 0 = 0 + 1 = 1. Det næste bliver så 1 + 1 = 2 osv. Ovenfor havde vi følgende array:

Det kan vises i en tabel sådan her:

Løbenummer	Variabel
0	Müstli
1	Mælk
2	Rosiner
3	The

Hvis et element fjernes eller lægges til, justeres løbenumrene automatisk. Hvis vi lægger et nyt element på, f.eks. Havregryn, så vil arrayet se således ud.

Løbenummer	Variabel
0	Müstli
1	Mælk
2	Rosiner
3	The
4	Havregryn

Omvendt hvis man fjerner elementet mælk med løbenummeret 1, så justeres løbenumrene på alle de efterfølgende elementer. Det ser sådan ud:

Løbenummer	Variabel
0	Müstli
1	Rosiner
2	The
3	Havregryn

Denne mekanisme bruger vi, når vi laver et loop. Vi kan få fat i det 0’de element i arrayet huskeseddel …

… ved at skrive “huskeseddel[0]”.

Når vi laver et loop som vist herunder, så bruger vi altid en tæller. Her kaldes tælleren for “i”. Tælleren starter ved 0, og løber lige så længe, som arrayet er langt. Længden på arrayet kan programmet finde vha. kommandoen “huskeseddel.length”. “i++” betyder, at vi lægger 1 til den værdi som i har i forvejen.

1 .7 Funktioner

En funktion er en stik-i-rend dreng. Den kan udføre en handling, f. eks. lægge 2 og 2 sammen, lave en liste, alt muligt. Hvis vi nu siger, at vores stik-i-rend-dreng kan hente en appelsinvand, og han arbejder for Verdensfirmaet A/S. Hvis firmaet var et program, så ville vi have en funktion, som vi kunne kalde “Appelsinvand”. Så vil alle medarbejderne altid bare kunne kalde på “Appelsinvand”, og så kunne de få hentet en appelsinvand når som helst og hvor som helst. Alle dele i koden kan bruge en funktion.

I øvrigt er alt kode, undtagen kommentarer, er pakket ind i funktioner. -Funktioner kan sagtens bruge eller kalde andre funktioner.

I App Lap er alt kode som udgangspunkt “pakket ind” i en funktion. Den grønne klamme, som rummer hele sekvensen, er en funktion. Bemærk at vi kan give funktionen et navn. Normalt bruger vi bare navnet “event”, som App Lab automatisk giver os. Men vi kunne kalde den for “valutaomregner” og så kalde den fra andre funktioner.

1.8 Events og funktioner

Hvis brugeren klikker på noget i en app, så kalder man det en “hændelse” eller et “event”. I spil kan event også være, at man skyder fjenden, dør eller bare styrer sin figur i spillet. Et event kalder en funktion. Funktionen indeholder så kode (variable, sekvenser, forgrening og betingelser mv.), som kan udføre den ønskede handling.

En event er, når der “sker noget” i et spil eller en app. Her den kode, der skal afvikles, når eventen “Klik på button1” er sket. Bemærk at eventen kalder en funktion.

1.9 Kommentarer

Kommentarer er mennesketekst, som man sætter ind i koden. Typisk bruger man det til at forklare, hvad der sker i koden. Hvis nu du selv kommer tilbage til din kode efter et par måneder, eller at andre skal forstå din kode, så er kommentarer nyttige.

I virksomheder, hvor de lever af at kode, har de strenge regler for, hvordan man laver kommentarer. Det gør, at programmørerne lettere kan forstå, hvad andre koder.

Her er en kommentar i AppLab. Den er med grå farve

1.10 Sådan arbejder frontend og backend sammen

Når du skaber kode i App Lap, følger vi næsten altid det samme mønster.

• Vi starter med at oprette en begivenhed
• Begivenheden opretter en funktion
• Inden i funktion gør vi 3 ting
  • Henter data fra indtastningsfelter ind i variable
  • Beregner
  • Returnerer resultatet til backend

Det kan se sådan her ud.

2. Formularer

Der findes rigtigt mange formularer på internettet. Her er en formular til inmeldelse i AGF’s fanklub fra https://medlem.agf-fanclub.dk/indmeld.

Lad os kikke lidt nærmere på formularen. Der er både nogle felter til almindelig indtastning, men der er også fald-ned valgmuligheder (drop-down på engelsk). I kapitlet skal vi se på, hvordan du skaber formularer i “ren” HTML. Rene tekstfelter og fald-ned valgmuligheder er ikke de eneste muligheder, som du skal kende til.

2.1 Formularer med HTML

Min gennemgang af formularer tager udgangspunkt i W3schools afsnit om HTML Forms. Se https://www.w3schools.com/html/html_forms.asp.

Udgangspunktet er, at vi sætter en <form> kode ind i <body> området. Start med <form>, hav noget indhold og slut med </form>. <form> skal altid lægge inden i <body>. Bemærk, at <form> ikke ses i sig selv. Den er, lige som <div>, en beholder med synligt indhold. Du kan dog, lige som <div>, style den hvis du vil. Det ser sådan ud:

Til toppen af siden.

2.2 Formular attributter

Form attributter er de egenskaber, som man har til tagget <form>. Afsnittet er fra https://www.w3schools.com/html/html_forms_attributes.asp. Der er 3 vigtige attributter: action, target og metode.

Faktaboks. Attributter = egenskaber Har du glemt, hvad en attribut er? En attribut kan du oversætte som en egenskab. Et billede kan have attributter som f.eks. width og height, <BODY> kan have attributter som background-color, margin osv osv. CSS er en lang liste af attributter

Action

Action er, hvad man skal gøre med formularens data. Se nedenstående kode:

• Du møder attributten “action” allerede ud for tagget <form>, hvor der står <form action=”/action_page.php”>. Det betyder, at formularens indhold bliver sendt til filen “action_page.php”, så data kan blive behandlet dér. Meget praktisk måde at lave “separation of concerns” på
• Bemærk: Hvis der ikke står noget under action, så bliver data sendt til siden selv

Target

Target er en ualmindelig praktisk attribut, som du også kan bruge til link. Den åbner ganske enkelt dit link i et nyt faneblad. Til link, der henviser til samme side, bruger vi den ikke. Men til link “ud af huset” bruger vi den gerne. Jeg bruger den næsten altid i mine link-henvisninger her på sitet. Den ser sådan ud:

Den er god til formularer, hvis vi f.eks. vil have en besked til brugeren. “Tak for din tilmelding til …, vi har sendt en kvittering til dig på min@mail.dk”, og beskeden skal skrives på et tomt faneblad.

Der findes lignende target-attributter, men target=”_blank” er langt den mest brugte. Se evt. linket https://www.w3schools.com/html/html_forms_attributes.asp, som selvfølgelig åbner i et nyt faneblad.

Method. GET eller POST

Når vi sender en formular, så kan vi gøre det på 2 måder. Enten gennem URL eller gennem HTTP protokollen. Den første metode har koden “get”, den anden har metoden “post”. Her et eksempel med “get”.

Hvis vi sender information gennem “get”, så er informationen frit tilgængelig. I nogle situationer er vores informationer ikke specielt hemmelige. Hvis jeg f.eks. har søgt AGF på Google, så er min søgning ikke specielt hemmelig. Du kan i hvert fald se den i URL’en i min browser, så Google har brugt “get”. “get” er en nem og effektiv metode.

Hvis formularen sender bare den mindste snert af personlig information, så skal du altid bruge “post”. Med “post” kan ingen udefra se, hvilke informationer der bliver sendt fra formularen.

2.3 Formular elementer

Du får brug for forskellige typer formular elementer. Her er en oversigt over de vigtigste, og hvad vi bruger dem til. Du finder det hele på https://www.w3schools.com/html/html_form_elements.asp.

<label> og <input>

De første 2 <form> tags, du skal møde, er <label> og <input>. Her er et eksempel fra https://www.w3schools.com/html/html_forms.asp.

• Du har selvfølgelig gættet, at det hele er pakket ind i et <form> tag. En formular starter med <form>, og den slutter med </form>
• <label for=”fname”>First name:</label>. En label er også en label på dansk, dvs. en betegnelse eller her et tekstfelt foran indtastningsfeltet. Attributten for=”fname” hentyder til, at label’en hører til input feltet “fname”.
• <input type=”text” id=”fname” name=”fname” value=”John”><br>. Der findes flere typer input felter. Dette felt har typen “text”. Du kan kalde den et lille tekstfelt modsat et stort (text area), som er til lange tekster, og som du møder senere. Input feltet har også et id, for vi skal kunne identificere feltet, når vi skal til at evaluere koden i PHP
• Attributten name=”fname” bruges til 2 ting. Dels til identifikation lige som id, dels til at sikre, at værdine sendes med, når formularen sendes
• Value=”John” er forudfyldt indhold. Hvis du skriver noget andet i feltet, vil det, du skriver, blive feltets nye indhold

Bemærk: Feltet <input> kan både være tekstfelter, radio knapper, tjekbokse mv. Jeg gennemgår mere om <input> i afsnit 17.4 Input typer https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_4_Input_typer.

Input feltet kan have forskellige attributter, og det ser vi på i afnsit 17.5 Input attributter https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_attributter.

<select>

“Select” betyder “at vælge”, som du sikkert ved i forvejen. Bruger du <select>, kan du danne en fald-ned menu. Det ser sådan ud.

• <select> og </select> starter og slutter hele fald-ned menuen
• <option> og </option> starter og slutter hver enkelt valgmulighed. Her Volvo, Saab, Fiat og Audi
• <option value=”volvo”>Volvo</option>. Systemet læser den værdi, der står i attributten value. De 2 kan godt være forskellige

<select> med attributten selected

Hvis du bruger attributten selected, så får du det ønskede element forvalgt til brugeren.

Andre attributter er “multible” og “size= …”. Multiple gør, at brugeren kan vælge flere muligheder og size, f.eks. “size=3” gør, at brugeren kun ser 3 muligheder, men kan skrolle for at se resten.

I afsnit 18.5 Data modtagelse for valgfelter gennemgår jeg koden for fald-ned menuer lidt dybere.

<textarea>

<textarea> bruges til at lave et fritekst felt. Her kan brugeren skrive lange beskeder eller bemærkninger, og feltet inviterer til at skrive mere end 1 linje. <textarea> er altså i modsætning til <input> felter, hvor man ønsker korte tekster. Eksempelvis fornavn og efternavn.

<button>

<button> laver ganske enkelt en knap. Du kan dog også bruge <input type=”submit”>, men mere om det i næste afsnit.

<fieldset> og <legend>

<fieldset> definerer et område med formular elementer, der hører sammen. Bagefter pakker vi elementerne i <fieldset> pænt ind med <legend>. Det er kun kosmetik, men det ser pænt ud!

Der er flere elementer, som du skal lære at kende. Men de er alle attributter til <input>, så det tager vi i næste afsnit.

2.4 Input typer

<input> elementet kan helt utrolig mange ting. Her er et par udpluk:

• Du har allerede set, at det kan fungere fint som et lille tekstfelt (modsat text area)
• Fungere som knap, der sender data
• Nulstille formularen
• Fungere som tjekboks (flueben, du har flere valgmuligheder)
• Fungere som radio buttons (knapper, du har kun 1 valgmulighed)

Her er den komplette liste fra https://www.w3schools.com/html/html_form_input_types.asp. Men bare rolig, vi skal ikke igennem dem allesammen!

Input boks og knap til at sende formularens data

Hvis du bruger attributten submit, så kan <input> fungere som knappen, der sender formularen.

• Den nederste indramling er <input> med attributten <submit>
• Bemærk attributten value. Men den kan du lave en tekst i knappen
• Når brugeren klikker på submit, sker der en event. Formularen sender data til filen action-page.php, og det sikrer den øverste, indrammede kode i formularen

Knap til at nulstille formularen

Såre simpelt: Hvis du bruger koden <input type=”reset”>, så får du en knap, der kan nulstille formularen. Yderst praktisk og brugervenligt, og alle formularer bør have denne knap. Du kan se eksemplet nedenunder.

Bemærk, at knappen for reset har teksten “Nulstil”. Det på trods af, at jeg ikke har en value indtastet. Som default (dvs. standard) har knappen et navn, og da min browser har dansk som sprog, så får knappen en dansk tekst.

Radio knapper

Radio knapper er små, fine, runde knapper. De ligner knapper på en radio, deraf navnet. Brugeren kan klikke på dem, men brugeren kan kun vælge en mulighed. Hvis du ønsker flere valgmuligheder, så skal du bruge tjekbokse. Nedenfor er radio knapperne indrammet til højre.

• Koden <input type=”radio” id=”male” name=”gender” value=”male”> laver knappen
• Der er tilknyttet en label, så knappen får en etikette/læsbar tekst på:  <label for=”male”>Male</label>

I afsnit 18.5 Data modtagelse for valgfelter gennemgår jeg koden for radio knapper lidt dybere.

Tjekbokse

Modsat radio knapper så har du flere valgmuligheder i tjekbokse. Her er et eksempel med tjekboksene rammet ind til højre.

• Kodden <input type=”checkbox” id=”vehicle1″ name=”vehicle1″ value=”Bike”> laver en tjekboks
• Selvfølgelig skal boksen have en label: <label for=”vehicle1″> I have a bike</label>

I afsnit 18.5 Data modtagelse for valgfelter gennemgår jeg koden for jekbokse menuer lidt dybere.

Til toppen af siden.

2.5 Input typer til tjek af det indtastede

Vi kan langt fra være sikker på, at brugeren altid indtaster, som vi ønsker det. Heldigvis kan vi få hjælp fra input boksen. Her et eksempel med email. Se evt. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_email

I min formular bruger jeg den simple kode her: Bare det, at <input> får attributten type=”email”, er nok.

Nu tester jeg det af i en browser. Jeg skriver med vilje en forkert email adresse og klikker på knappen Submit. Så sker magien: Jeg får en fejlmeddelelse på skærmen.

Her er en oversigt over, hvad du kan bruge nogle input typer til.

Til toppen af siden.

2.6 Input attributter

Først et par nyttige attributter

• Readonly, hvis brugeren ikke skal kunne skrive i et felt
• Disabled, hvis et input felt ikke skal bruges. Det kan f.eks. være, at der er fejl, som du leder efter, eller at den måske senere skal i brug
• Du kan sætte minimum, maksimum, 1 eller flere linjer og meget mere. Se https://www.w3schools.com/html/html_form_attributes.asp

Det er egentligt super simpelt. Du tilføjer bare ordet “required” til dit <input> felt.

Hvis brugeren så glemmer at udfylde feltet og trykker på knappen til send, så kommer der en fejl. Nemt og brugervenligt!

Faktabox. <input > attributter er ikke glad for ældre browsereDu vil desværre opleve, at f.eks. required ikke virker i ældre versioner af internet explorer, og du kan mærkeligt nok også få problemer i Safari. Mærkeligt, fordi Safari er meget tæt på Chrome. Men: Attributterne gør ingen skade. Chrome er den mest populære browser, men Safari står for ca 1/3 af al browservisning. Så test af i forskellige browsere

Til toppen af siden.

2.7 Input og brugeradfærd

Du har garenteret set formularer, hvor du bliver spurgt, om du ønsker typisk et nyhedsbrev. Det ser sådan ud.

Modsat andre lande er det i Danmark ulovligt at sende nyhedsbreve automatisk til folk, uden at de har bedt om det. Alligevel ser man ofte feltet forudfyldt. Det er i princippet ulovligt, men man ser det ofte alligevel. Du vinger feltet af med attributten “checked”. Bortset fra attributten checked er det samme kode som før.

Ovenstående er et eksempel på, hvordan vi kan være lidt for smarte, når vi designer vores formularer. Omvendt kan vi også hjælpe brugeren og selv få bedre udfyldte formularer. Her er et eksempel mere med radio knapper.

Hvis jeg ville, kunne jeg sagtens sætte f.eks. den første racio knap Female til “Checked”. Så er den forudfyldt. Men ved ikke at forudfylde, kan jeg tvinge brugeren til at tage aktiv stilling til spørgsmålet, og det er lige præcis det, jeg vil. På den måde får jeg data, der er mere brugbare, end hvis jeg for høj graf forudfylder for brugeren. Med mindre, som med den forudfyldte tjekboks for nyhedsbrevet, direkte går efter at pådutte brugeren mit nyhedsbrev.

Et sidste eksempel er en fald-ned menu. Her er en typisk fald-ned menu. Menuen starter med Volvo. Problemet med den her menu er, at hvis nu brugeren ikke vælger noget, så har programmet automatisk valgt “Volvo” for vedkommende. Vi ved derfor ikke, om brugeren virkelig har valg Volvo frem for de andre bilmærker, eller om brugeren bare har sprunget punktet over.

Det er der heldigvis en elegant løsning på. Vi tilføjer et ekstra <option> linje, der hedder “Vælg fra liste”. Hvis vi så modtager en besked om at bilmærket er “Vælg fra liste”, så kan vi nemt returnere en fejlmeddelse til brugern og bede brugern om at tage stilling. Det ser sådan her ud:

Det er altid en god idé at sætte “Vælg fra liste …” eller lignende øverst i en fald-ned menu i en formular.

2.8 Opsummering. Kort oversigt over brug af formular elementer

ELEMENT	VISNING	FORKLARING
Label		En label er bare en etikette. Etiketten står til venstre. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <label> og <input>
Input		Input feltet kan bruges til alt fra knapper til tekstfelter. God til korte felter, men den kan alt muligt inklusive at evaluere input og komme med fejlmeddelelser. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <label> og <input>
Text area		God til fritekst, hvis brugeren skal kunne skrive længere tekster. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <textarea>
Fald-ned menu		God til at tvinge brugeren til et valg, som man selv definerer. Kan bruges til både 1 eller flere valg. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <select>
Radio knapper		God til at synliggøre flere valgmuligheder, hvor brugeren så kun på vælge 1 af dem. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_4_Input_typer under radio knapper
Tjekboks		God til at synliggøre flere valgmuligheder, men her kan brugeren vælge flere af dem. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_4_Input_typer under tjekbokse
Fiedset og legend		Kan gøre din formular pænere og inddele i sektioner. Se https://bliv-klogere.ibc.dk/index.php/laerebog-til-kapitel-4-kapitel-a-aa/#17_5_Input_typer_til_tjek_af_det_indtastede under <fieldset> og <legend>