HTML-skjemaer
Skrevet av: GratisGuide.net
Det finnes flere måter å hente informasjon fra en bruker til et nettsted. Det mest vanlige er v.h.a. et HTML-skjema. Et slikt skjema kan inneholde flere typer kontroller og vi skal i denne artikkelen ta en nærmere titt på hvordan du bruker disse kontrollene.
Nedenfor ser du eksempler på kontroller du kan bruke i et HTML-skjema:
I tillegg til disse skjema-kontrollene har du også mulighet for å inkludere skjulte felt, det vil si felt som er inkludert i skjemaet, men som ikke vises i nettleseren, og felt for opplasting av filer.
For å nyttegjøre deg et skjema, er det en fordel om du har et skript på web-serveren som kan behandle den informasjonen som kommer fra skjemaet. Et slikt skript kan være skrevet i et programmeringsspråk som webserveren støtter; f. eks. PHP, ASP eller Java. Du har også mulighet til å la informasjonen fra skjemaet bli sendt i en e-post, men det er ikke mange brukere som setter pris på den løsningen.
For å sette opp et skjema trenger du merket form. I dette merket må du minst bruke attributten action:
<form action="url_til_skript">
...
skjemakontroller
...
</form>
I attributten action legger du en full eller relativ URL til det skriptet du vil skal behandle informasjonen som kommer fra skjemaet; dit skjemainformasjonen blir sendt når brukeren klikker «Send»-knappen. En relativ URL er relativ i forhold til URL-en til det dokumentet skjemaet er i.
Et skjema kan benytte en av to HTTP-metoder for sending av skjemainformasjonen; GET eller POST. Med attributten method kan du angi om skjemainformasjonen skal sendes med POST-metoden; GET-metoden er standard så du behøver ikke angi den. HTTP er en protokoll, en regelsamling, for hvordan datamaskiner kommuniserer med hverandre; f. eks. de reglene din nettleser og vår webserver fulgte når du ba om denne websiden fra oss.
Dersom du bruker POST-metoden kan du også angi kodetypen for skjemainformasjonen. Standardverdien er «application/x-www-form-urlencoded». Med denne verdien vil all tekst, f. eks. en URL i et tekstfelt, bli URL-kodet; det vil si at URL-en http://www.gratisguide.net/ blir kodet til http%3A%2F%2Fwww.gratisguide.net%2F. Det er en annen verdi for denne attributten, og det er «multipart/form-data». Denne verdien bruker dersom skjemaet sender filer til webserveren. Dersom du benytter GET-metoden bør du allikevel angi enctype som «application/x-www-form-urlencoded». Da er du sikker på å få med våre spesialtegn, som æ ø å uten at disse blir til a o a.
La oss starte et skjema for innsending av filer:
<form action="url_til_skript" method="post" enctype="multipart/form-data">
Som du ser har vi lagt til attributten method og enctype til form-merket.
I skjemaet vårt vil vi også ha med et felt for navn, for en e-postadresse og et felt for kommentarer i tillegg til et felt for filen som sendes med.
Vi trenger to tekstfelter og et tekstområde samt en filvelgerboks. I kodesnippen nedenfor har vi tatt med disse:
Navnet ditt: <input type="text" size="20" name="navn"><br>
E-postadresse: <input type="text" size="20" name="epost"><br>
Fil å laste opp: <input type="file" name="fil"><br>
Kommentarer: <textarea cols="20" rows="3">Skriv kommentarer her</textarea><br>
<input type="submit" name="submit" value="Send inn">
</form>
I skjemaet over har vi fem skjemakontroller; de fire vi nevnte over pluss en «Send»-knapp. Når brukeren klikker denne knappen vil nettleseren sende skjemainformasjonen med den metoden som er angitt (eller GET-metoden hvis ingen er angitt).
La oss se på de HTML-merkene vi har brukt:
input type="text":
size="20": Tekstfeltet skal være 20 tegn bredt.
name= "...": Kontrollen har navnet "...". Dette er viktig for det skriptet som skal behandle skjemainformasjonen.
input type="file":
name= "fil": Kontrollen har navnet "fil". Igjen viktig for skriptet som behandler skjemainformasjonen.
input type="submit":
name="send": Vi gir kontrollen et (hvilketsomhelst) navn (her "send"), men det har ingen betydning for skriptet som behandler skjemainformasjonen.
value= "Send inn": Dette er teksten som vises på "Send"-knappen i skjemaet vårt, den som brukeren klikker for å sende skjemainformasjonen til webserveren.
textarea:
cols="20": Bredden på tekstområdet angitt i antall tegn.
rows="3": Høyden på tekstområdet angitt i antall rader.
Skriv dine kommentarer her: Dette er tekst som vises i tekstomr ådet når skjemaet er tomt, og som vil vises i skjemaet om en "Tilbakestill skjema"-knapp blir klikket (en knapp vi ikke har med i skjemaet vårt).
Nettleseren sender skjemainformasjonen til den URL-en vi har angitt i action-attributten i form-merket. Dette skriptet må derfor kunne håndtere denne informasjonen.
Dersom du ikke har et skript kan du sette opp skjemaet til å sende informasjonen v.h.a. brukerens e-postprogram. Bruk da e-postadressen din i stedet for en URL i action-attributten, med «protokollangivelsen» mailto: foran, f. eks. action="mailto:support@gratisguide.net". Velger du denne metoden bør du angi i skjemaet at ved å klikke «Send»-knappen vil brukerens e-postprogram startes og en e-post vil sendes.
Nedenfor ser du hele HTML-koden ferdig og korrekt oppstilt. Det er bare å klippe-og-lime og jobbe videre med den :)
<form action="url_til_skript" method="post" enctype="multipart/form-data">
Navnet ditt: <input type="text" size="20" name="navn"><br>
E-postadresse: <input type="text" size="20" name="epost"><br>
Fil å laste opp: <input type="file" name="fil"><br>
Kommentarer: <textarea cols="20" rows="3">Skriv kommentarer her</textarea><br>
<input type="submit" name="submit" value="Send inn">
</form>
Opphavsrett
Ønsker du å gjengi denne artikkelen eller noe fra den må du gjerne gjøre det, men ikke glem kildereferanse. For å lenke til denne artikkelen kan du bruke URL-en http://www.gratisguide.net/artikler/html/skjema.html.
