Skjemaer med HTML5 Gløer Olav Langslet Sandvika VGS Leksjon 10 Informasjonsteknologi 1 og 2 Skjemaer på nettsider I denne leksjonen skal vi se litt nærmere på bruk av skjemaer på nettsider. Du har sett dem før. Hver gang du skal registrere deg, logge inn, handle osv. dukker det opp et skjema. Tradisjonelt har JavaScript blitt brukt til å validere skjemaer. Sjekke at det er skrevet inn en epostadresse der det skal være det, at et telefonnummer er på riktig format og annen lignende informasjon. Med HTML5 har det blitt forbedret støtte for at nettleseren selv kan validere feltene. Det har også kommet inn nye elementer som kan være nyttige. I IT1 vil vi ha behov for å lage mange skjemaer når vi skal begynne med databaser. Dette skjer primært i de tilfeller hvor vi skal lagre informasjon. Brukeren legger inn informasjon i et skjema, og gjerne når vi klikker på en knapp, må vi sørge for at denne informasjonen blir lagret i en database. For IT2 har vi med litt om JavaScript i forhold til skjemaer.
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Slik virker form-taggen i HTML form-tagg med action Dette kan vi gjøre med JavaScript: Eller vi kan starte en funksjon før skjemaet blir sendt: I form-taggen har vi et atributt som heter action. Dette er den siden vi kommer til når vi klikker på submit-knappen eller trykker på Enter-knappen. Vi tar da med oss informasjon fra skjemaet som er fylt ut. Da må vi skrive en funksjon som heter sjekk(). Hvis den returnerer true, blir skjemaet sendt av gårde, hvis den returnerer false, blir det ikke sendt. Her kan vi sjekke om alle feltene er fylt inn og lignende. Funksjonen kan se sånn ut: Dette dukker da opp på nettsiden vi kommer til, og kan behandles der. Det er name-attributtene som sendes med. Legg merke til at passordet og eposten følger med i urlen. 2 Forhindre at vi går til en ny side Noen ganger vil vi ikke gå direkte til en nettside når vi har fylt inn skjemaet.
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Et lite eksempel på validering med JavaScript På helt enkelt vis kan vi sjekke om alle feltene er fylt ut: Her sjekker vi helt enkelt om det er skrevet noe inn i feltene. Hvis ikke returnerer vi false, og det skjer ingenting når vi klikker på knappen. Dette er mye jobb, og til alt hell kan vi med HTML5 forenkle skjemavalideringen. 3
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 1 Definer et felt som påkrevd, eller required Vi kan enkelt si at et felt i et skjema er nødt til å være fylt inn. Da bruker vi attributtet required. Vi ser da at vi får en melding om at feltet må fylles ut. 2 Vi kan kreve at teksten er på et bestemt format: Her sier vi at vi skal ha 3 små bokstaver: Vi kan også si at det for eksempel sjekke om det er et registreringsnummer på en bil. Gyldig verdi kan for eksempel være BP82345. Når vi gjør dette, bør vi på en eller annen måte angi hvilket format vi ønsker. Vi kan legge dette inn med en placeholder: 4
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Angi tilbakemeldingen med title: Vi bør sørge for, så godt vi kan, at brukeren av systemet vårt ikke skal rote seg bort. Hvis de skriver på feil format, kan vi gi en spesialtilpasset tilbakemelding. Angi at et skjema skal få fokus når siden lastes: Vi kan si at et element i skjemaet skal få fokus når siden lastes inn med focus: Skru av autocomplete Hvis vi ikke vil ha på autocomplete, kan vi skru det av. Da skriver vi autocomplete= off, som vist i koden over. Dette fører til at du ikke får opp for eksempel adressen din eller kredittkortnummeret der det ikke er ønsket. 5
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Vi kan også lage tester med JavaScript: Her sjekker vi om kunden har oppgitt samme brukernavnet i begge input-feltene. Hvis ikke, gir vi en feilmelding. Vi bruker da oninput= sjekk(this). Den sjekker om feltene har samme verdi. Husk at this betyr meg selv. 6
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Hva slags input-typer har vi? Til nå har vi stort sett fokusert på tekst-input. Med HTML5 har vi fått en rekke andre input-typer som kan være nyttige. Ikke alle er implementert i nettleserne, men det kommer de garantert til å bli i nær fremtid. Jeg har testet disse i siste utgave av Chrome: Dato Farge Ganske kjekt. Det virker også i gode, gamle Opera. 7
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Hva med de andre typene Vi kan definere at vi skal ha inn et tall: Dessverre er det ingen test på om det faktisk blir skrevet inn et nummer, så det må vi inntil videre lage i JavaScript. Her sjekker vi rett og slett om det er et tall som kommer inn. Hvis ikke gir vi en feilmelding. P.S. Dette virker i hvert fall i Firefox per i dag. Kanskje enklere å gjøre det slik: Merk deg at her vil Firefox kreve at du skriver inn nøyaktig ett siffer. Dere kan skrive pattern= [0-9]* for å angi at det kan være så mange siffer som en ønsker. 8
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Range muligens en Slider Egentlig ikke en slider, men sånn har i hvert fall Chrome implementert denne. I Firefox får vi kun en vanlig tekstboks. Oppsummering Vi ser at det kommer en mengde nye elementer som vi kan bruke for å lage elegangte skjemaer, og som sørger for at det blir større sjanse for at brukere av nettsidene våre ikke gjør feil eller registrerer ugyldige verdier. Søk på HTML5 form eller lignende på nett, så finner dere garantert mange gode eksempler og ikke minst oversikter over de forskjellige taggene og attributtene. Hvordan få noe ut av de forskellige elementene La oss si at vi skal hente verdier ut av skjema-elementer. Ethvert input-felt har en value, altså verdien som enten er skrevet inn eller som har kommet inn på annet vis. Vi kan bruke JavaScript til å hente ut verdien, og gjøre mer eller mindre nyttige ting. Først et meget unyttig eksempel: Velg bakgrunnsfarge (Denne er bare morsom i Chrome (til venstre)) 9
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Slider som starter en lyd Enda et unyttig eksempel: La oss si at vi skal ha en slider hvor man kan registrere hvor mange mål man har laget i en fotballkamp. Hvis du har scoret mer enn 5 mål, skal du få en tilbakemelding. En liten applaus. For å være sikker på at lyden virker i de fleste nettlesere, må vi dessverre ha 2 lydfiler. 1 i mp3-format, og en i ogg-formatet. For å være helt sikker bør vi også legge inn en flashspiller som en slags backup hvis ingen av lydfilene er støttet i nettleseren. Mer om dette i en annen leksjon. Vi setter inn lyden slik: Hvis nettleseren støtter ogg-formatet, spiller den av ogg-filen. Hvis ikke prøver den seg på mp3-filen. Hvis det ikke virker, får du en feilmelding. Her kunne vi evt. lagt inn en swf-fil som spillte av lydfilen. Da hadde vi vært ganske sikre. I et spill eller lignende vil vi helst ikke at avspilleren skal synes. Hvis vi tar vekk controls, blir den borte. Vi kan også sørge for at lydfilen allikevel lastes inn, så den er klar til vi skal bruke den. Vi bygger litt mer html Først legger vi inn lyden, men tar vekk controls. Setter inn preload, så vi er sikre på at den lastes inn. Deretter har vi en label og slideren (range). Til slutt en liten div som viser antall. 10
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Litt JavaScript Når vi endrer verdien i slideren, kan vi fiske opp verdien. Dette utnytter vi i en liten funksjon, som spiller av en lyd hvis det er 5 eller mer. Det var det hele. Vi ser at lyd-elementet behandles på et vis som andre html-elementer, men det har noen spesielle egenskaper som play. 11
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Valglister Noen ganger liker vi at nettsiden hjelper oss til å finne det vi søker etter. Hvis vi skal registrere at vi er fra Norge, pleier vi å få en gigantisk liste hvor Norge er veldig langt nede. Vi kan ofte bruke N-tasten på tastaturet, men det tar oss først til Namibia, så må vi videre nedover: Jeg pleier å taste o, for da kommer jeg først til Oman, og da ligger alltid Norge ett hakk over: Men det fins smartere måter å lage skjemaer på. La oss se litt på noe som heter datalist: Her vil vi få opp alle landene som har en N i seg når vi skriver N. Hvis vi skriver No, kommer Norge opp. Dette kan forenkle utfyllingen i mange tilfeller, men kan vi være sikre på at folk forstår at de skal begynne å skrive? Det er mye å tenke på. 12
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Skjemaer på mobile enheter. Mobiltelefoner og pader og poder og lignende benytter seg gjerne av hva slags type inputfelt vi bruker. Test det ut på din egen telefon eller en venns, og se hva som skjer. input type= text input type= number Vi ser at det er bokstaver som kommer opp når jeg er i et input-felt med typen text, og det kommer tall hvis jeg velger number. Så det har en funksjon. Hvis vi prøver med input type= date får vi opp en kalender. I hvert fall i noen telefoner. Test det ut selv. I eksemplene har jeg brukt en Samsung Galaxy S3 med Chrome. 13
sdsd Skjemaer med HTML5 Informasjonsteknologi 1 og 2 Date og Mobiltelefoner og pader og poder og lignende benytter seg gjerne av hva slags type inputfelt vi bruker. Test det ut på din egen telefon eller en venns, og se hva som skjer. input type= date input type= time input type= range input type= tel gir oss telefontegn og tall. 14
Skjemaer med HTML5 Informasjonsteknologi 1 og 2 jquery Mobile Hvis du synes det er vanskelig å lage pene skjemaer til mobile enheter, kan du få hjelp av jquery Mobile. Her kan du spare deg for mye arbeid. Denne lagde jeg rimelig fort. Men ikke glem å forsøke deg med ditt eget design også. Du kan lære mye av å forsøke å skrive css som lager pene skjemaer på mobilen. 15