Indsamling af bruger data - grænsefladen
Indtil videre har vi bygget en kortvisning der er baseret på dynamiske data fra Danmarks servicen, men med grundlag i en statisk adressesøgning. Uanset hvor mange gange vi åbner applikationen viser den kun adresserne for Amalienborg Slotsplads.
Det ændrer vi nu på, ved at give brugeren mulighed for at indtaste søgekriterierne. For at gøre dette muligt ændrer vi vores brugergrænseflade, ved først at tilføje nye elementer i vores HTML struktur.
I de efterfølgende kapitler vil vi ændre på vores CSS så der kommer et fornuftigt design, samt indsamle brugerens data og foretage en søgning med disse.
Vores HTML kode
Vores applikation er delt ind i tre store områder,
et kort element i linje 9,
et menu element i linje 11 til 68 samt
et indhold element i linje 70 til 85.
Kort
Vi har tænkt os at vores kort skal fylde hele browservinduet med menuen og indholdet lagt ovenpå, og af samme grund har vi flyttet kort elementet ud på deres niveau.
Menu
I vores menu element har vi strukturen til vores søgemuligheder samt visningen af resultater.
Vi har lagt en overskrift i et H1 element, tilføjet indtastningsfelter i FORM elementet og
vist et par eksempel adresser i den ordnede list gennem OL og LI elementerne.
Vores formular peger på Danmarks servicen og indeholder en række indtastningsfelter, hvor hvert af disse er pakket ind i et LABEL element.
Dermed har vi knyttet tekst og felter sammen, og gjort det nemmere for brugeren at sætte fokus på felterne.
Vores indtastningsfelter og deres tilhørende LABEL elementer er alle samlet i et fælles FIELDSET element, hvilket gør det muligt
for os at gruppere dem og afgrænse deres placering.
Listen af adresser indeholder statiske data så vi allerede nu kan se hvordan resultaterne af brugerens søgning vil se ud.
Der er desuden en FORM hvor brugeren kan til- og fravælge visninger.
Formularen med brugervalg skal give brugeren mulighed for at vælge hvorvidt Bus stop, Metro eller S-tog stationer skal vises på kortet.
Overskriften til vores FIELDSET element bliver angivet i vores LEGEND.
Hver valgmulighed er et LABEL element med en tilhørende checkbox samt forklarende tekst.
Indhold
Vores indhold element er skrumpet i størrelse, nu hvor både kort og brugervalg er rykket ud.
Her har vi en paragraf med adresseoplysninger, hvor vi dynamisk vil vise detaljerede oplysninger om den valgte adresse. Som ved listen af resultater i menuen har vi indtil nu valgt at vise statiske resultater, så vi allerede nu kan se hvordan visningen fremstår.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.
Da vi endnu ikke har ændret i vores CSS ser vores applikation ikke særlig pæn ud - dette ændrer vi på i næste kapitel.
