Skjemaer

Skjemaer brukes for å samle informasjon som blir lagt inn av brukeren. De kan eksempelvis brukes som et grensesnitt for en web-applikasjon, eller til å sende data rundt om kring på nettet.

Alene gjør ikke skjemaer så mye. De må brukes med et programmeringsspråk for å behandle data fra brukeren.

De grunnleggende tag’ene som er aktuelle i skjemaer er form, input, textarea, select og option.

form

Form-tag’en definerer skjemaet, og hvis du skal behandle informasjon som brukeren legger inn, må vi ha et action-attributt, for å fortelle skjemaet hvor innholdet skal sendes.

Den må også ha et method-attributt, som forteller skjemaet hvordan det skal sende dataene. Som standard bruker den «get», og vil legge informasjonen som blir lagt inn på slutten av addressen til nettsiden. Dette brukes for eksempel når man gjør et søk på en side. Du kan be den om å bruke metoden «post», som skjuler informasjonen litt mer, som i et kontaktskjema.

Et skjema ser med andre ord noe slik ut:

<form action="kontaktskjema.php" method="post">

</form>

input

Input-tag’en kan brukes til veldig mye forskjellig, og kan ta mange former. De vanligste er listet opp under:

<input type="text">, eller kortform <input> er en standard tekstboks. Man kan sette et value-attributt som gjør at det står en tekst i boksen.
<input type="password"> er tilsynelatende lik den rett over, men bokstavene som skrives inn av brukeren vil gjøres om til stjerner eller prikker.
<input type="checkbox"> er en sjekkboks som kan skrues av eller på av brukeren. Den kan ha et checked-attributt (som ikke trenger en verdi), og vil isåfall gjøre at sjekkboksen er huket av. Eksempel <input type="checkbox" checked>
<input type="radio"> ligner litt på sjekkboks, men brukeren kan kun velge én radioknapp i en gruppe av radioknapper. Den kan også ha checked-attributtet.
<input type="submit"> er en knapp som hvis klikket vil sende skjemaet. Du kan kontrollere hvilken tekst som står inni knappen med value-attributtet, for eksempel <input type="submit" value="Ooo. Se. Tekst på en knapp. Wow">

Legg merke til at akkurat som img og br-tag’ene som ikke har noe innhold, behøver heller ikke input-tag’en en lukketag.

textarea

textarea er i essens bare en stor tekstboks med flere linjer. Forventet antall rader og kolonner kan settes med rows og cols-attributtene, men du kan endre størrelsen med CSS.

<textarea rows="5" cols="20">En unødvendig stor mengde med tekst</textarea>

Teksten som du setter mellom åpne- og lukketag’ene vil være den første verdien som står i tekstfeltet.

select

Select-tag’en brukes sammen med option-tag’en for å lage en rullgardinmeny (drop-down menu)

<select>
  <option>Valg nummer 1</option>
  <option>Valg nummer 2</option>
  <option value="tredje valg">Valg nummer 3</option>
</select>

Når skjemaet blir verdien til det valgte elementet bli sendt. Denne verdien er da teksten mellom option sin åpne- og lukketag, med mindre value-attributtet er spesifisert. Da blir den sendt isteden. Så i eksemplet over, hvis man velger den første blir «Valg nummer 1» sendt, og hvis man velger den tredje vil «tredje valg» bli sendt.

I likhet med checked-attributtet til sjekkboksene kan en option-tag ha et selected-attributt, som gjør at det settes som den første verdien som er valgt. Hvis man hadde en <option selected>Paradis</option> ville det forhåndsvalgt når nettsiden blir lastet inn.

Navn

Alle tag’ene over ser fine ut slik de står, men når du kobler til et skript som skal håndtere dataene, så får du ikke med tag’ene – bare verdiene. Heldigvis finnes et attributt for å hjelpe oss med dette, og det heter name. Så alle feltene må ha et navn, f.eks <input type="text" name="etternavn">

Et kontaktskjema for dyr som søker seg til en zoologisk hage vil kanskje se noe slik ut (Obs: skjemaet vil ikke fungere, siden vi ikke har et php-skript som heter kontaktskjema.php)

<form action="kontaktskjema.php" method="post">
  <p>Navn:</p>
  <p><input type="text" name="navn" value="Ditt navn"</p>
  
  <p>Dyreart</p>
  <p><input name="dyreart"></p>
  <!-- Husk: type="text" er ikke et krav -->

  <p>Kommentarer</p>
  <p>
    <textarea name="kommentarer" rows="5" cols="20">
      Dine kommentarer
    </textarea>
  </p>

  <p>Er du:</p>
  <p><input type="radio" name="kjonn" value="mann"> Mann</p>
  <p><input type="radio" name="kjonn" value="kvinne"> Kvinne</p>
  <p><input type="radio" name="kjonn" value="tvekjonnet"> Tvekjønnet</p>
  <p><input type="radio" name="kjonn" value="intetkjonn"> Intetkjønn</p>

  <p><input type="submit"></p>

</form>

PUH!