Globale linker

HTML

<form>

Forms brukes for å la brukeren gi tilbakemelding til web-stedet, for eksempel ved å sende navn og e-mailadresse for å bli satt opp på en mail-liste. <form>-taggene skal omslutte alle andre skjema-elementer.

<form>-taggen har disse attributtene som bestemmer hva som skal skje med skjemaet når det sendes:

Action - er adressen (url) til f.eks et cgi-script som skal ta imot innholdet, bearbeide dataene som er mottatt og sende en respons til brukeren. Kan også inneholde "mailto:jensmorten@jensm.com", hvor innholdet sendes med f.eks. Outlook.
Method- kan ha to verdier: get eller post, som spesifiserer hvilken http-metode som vil bli brukt til å sende skjemaets innhold til web-serveren. Vanligst er post
Enctype- bestemmer mekanismen som blir brukt til å dekode skjemaets innhold. Når man bruker mailto:-formen bør man bruke: enctype="text/plain"
Name - er navnet på skjemaet, som blir brukt til å scripte mot skjemaet i f.eks javascript. Alt skal navnsettes i et skjema.
Target - er vinduet hvor respons-siden skal vises.

<form name="form1" method="post" enctype="text/plain"
action="mailto:jensmorten@jensm.com?subject=bestilling">
(med ?subject blir også subject feltet automatisk fylt ut i mailen)

En god måte å lage et skjema på, er å bruke tabeller for å ha kontroll over hvor de forskjellige elementene (skjemafeltene) i skjemaet plasseres på siden. <table>-kan plasseres inne i <form> </form>-taggene.

<input>

Form elementer har egenskaper som: text box, password box, checkbox, option (radio) button, submit, reset, file, hidden og image. Disse elementene plasseres mellom <form> og </form>. Egenskapene deklareres ved type-attributtet i <input>-elementet.

<input type="?" Name="?" Value="?" Checked Size="?" Maxlength="?">
Ikke alle typer elementer kan ha alle egenskaper.

Tekstbokser

attributter:

Type=text angir at dette er en tekstboks
Name = navnet på tekstboksen. Name it!
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Value = "tekst som står i tekstboksen når siden lastes"
Size = størrelsen på tekstboksen målt i tegn(default=20)
Maxlength = maksimum antall tegn som kan skrives inn

Passordbokser

attributter:

Type = password (gjør at det brukeren taster inn blir vist som *****)
Name = navnet på tekstboksen. Name it!
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Size = størrelsen på tekstboksen målt i tegn(default=20)
Maxlength= maksimum antall tegn som kan skrives inn

Skjulte bokser

Skjulte bokser er usynlige tekstfelt i et skjema som ofte brukes for å sende variabler til et CGI-script.

attributter

Type= hidden Ingenting vises i browseren, brukes til javascript og cgi-scripting, eller hvis du f.eks vil gi formen din et navn
name = navnet på tekstboksen.Name it!
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Value = et cgi og javascript forventer en verdi.

Checkboxer.

Brukes for å gi brukerene muligheten til å krysse av for flere enn ett valg. Interesser: hest bil

Interesser: hest <input type="checkbox" name="interesser" value="hest" checked> bil <input type="checkbox" name="interesser" value="bil">

attributter

Type = checkbox (brukeren kan krysse av i flere felt)
Checked = er blank eller avmerket når siden vises
Name = navnet på tekstboksen. Name it!
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Value = et cgi og javascript forventer en verdi.

Har du flere checkboxer i en gruppe, skal name være det samme for alle, mens value må være forskjellige.
For eksempel: interesser: hester, biler, tog, pølser
Her skal alle ha navn «interesser», mens value kan være navnet på interessen, altså hester og biler og tog og pølser.

Radiobutton.

Brukes når vi vil at brukerne skal kunne gjøre ett valg av flere muligheter.
Alder: 10-20 21-40

Alder: 10-20 <input type="radio" name="alder" value="10-20">
21-40 <input type="radio" name="alder" value="21-40" checked>

attributter

Type = radio
Checked = er blank eller avmerket når siden vises
Name = navnet på tekstboksen. Name it!
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Value = et cgi og javascript forventer en verdi.

Har du flere radiobuttons i en gruppe, skal name være det samme for alle, mens value må være forskjellige.
For eksempel: alder: 0-10, 11-30, 31-50, 51-100
Her skal alle ha «navn» alder, mens value kan være verdien på alderen.

File upload

Du kan bruke en file upload box for å la brukeren laste opp filer til din web-server, eller som vedlegg i mail.

attributter

Type = file
Name = navnet på variablen som blir sendt til scriptet
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Size = størrelsen på tekstboksen målt i tegn
Maxlength = maximum antall tegn som kan skrives inn i feltet
Enctype = en liste med filtyper som feltet kan brukes til å uploade.
Enctype må her settes til "=multipart/form-data"

Button

En button er et element som brukes i forbindelse med f.eks javascript for å få en hendelse til å skje ved klikking på knappen, f.eks en kalkulasjon av innlagte data. En button i seg selv er dum og virker ikke uten scripting.

attributter

type = button
Name = navnet på knappen som det henvises til i scriptet
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Value = bestemmer teksten i selve knappen

Submit/reset

Alle former for skjemaer må ha en submit-knapp for at brukeren skal kunne oversende informasjon.

attributter

type = submit (sender innholdet i skjemaet)
type = image (et bilde blir brukt som submitknapp)
type = reset (sletter innholdet i skjemaet)
Name = verdi brukt av cgi-script for behandling av innhold
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Value = teksten i selve knappen

<textarea>

Kommentarfelt:

<textarea> brukes som kommentarfelt for å la brukeren skrive fritekst-kommentarer. <textarea> må avsluttes med </textarea>. Teksten som står mellom taggene er default tekst i kommentarboksen.

<textarea name="kommentarfelt" cols="40" rows="5"> Kommentarfelt: </textarea>

attributter

Name = verdi brukt av cgi-script for behandling av innhold
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Rows = antall rader som skal vises i kommentarfeltet
Cols = antall rader som skal vises i kommentarfeltet
Wrap = tekstbryting i tekstnoksen
- default=off
- Virtual= tekstbrytingen skjer kun visuelt i tekstboksen, ikke i teksten som blir sendt
- Physical= tekstebrytingen skjer både i tekstboksen og teksten som blir sendt.

<select>

brukes til drop-down-bokser og list bokser. Forskjellen mellom de to typene er at en listboks har atributtet «size» som angir antall synlige valg.

attributter

Name = er navnet på variablen sendt til cgi-scriptet
ID = Brukes i bl.a. Javascripting og cgi-scripting.
Size = antall synlige valg. Gjør at det blir en listboks istedet for en drop-down-boks
Multiple = når dette er valgt til større enn 1, angir det at brukeren kan gjøre flere valg (ved å ctrl-klikke på valgene). Kan kun brukes til list-bokser.
Selected. Angir default valg i boksen

<option>

De forskjellige valgene en bruker kan gjøre i en dropdown eller list-boks ligger mellom <options>-taggene. Value i <options>-taggen må gjenspeile det som er valget, eller teksten mellom options-taggene.

dropdown-meny

Eksempel på dropdown-meny (brukeren kan bare gjøre et valg.)

<select name="stederjegharvaert">
<option value="solen" selected>solen</option>
<option value="månen">månen</option>
<option value="jorden">jorden</option>
<option value="stranden">stranden</option>
<option value="skogen">skogen</option>
</select>

List-meny

Eksempel på listboks (brukeren kan gjøre flere valg ved å CTRL+klikke på flere alternativer)

<select name="stederjegharvaert" size="3" multiple>
<option value="solen">solen</option>
<option value="månen" selected>månen</option>
<option value="jorden">jorden</option>
<option value="stranden">stranden</option>
<option value="skogen">skogen</option>
</select>

Det var skjemaer og da har vi gått gjennom alle de viktigste taggene og atributtene i HTML.

Gå til neste side for å se på SSI.