Hopp til innholdet

cjohansen.no

Semantiske skjemaer

Ved siden av tabeller er skjemaer den byggeklossen som oftest er mest kompleks å bygge, og ikke minst å få bra. Dagens luke kikker på hvilke HTML-elementer du bør bruke, og gir noen forslag til struktur for skjemaene dine.

Aktuelle elementer

Elementer for å bygge skjemaer; <form>, <fieldset>, <input>, <textarea>, <button>, <legend>, <label>, <select> og <option>. I tillegg er viktig attributter eksempelvis for, id/ name og tabindex.

Skjemaer i HTML er et stort og komplekst område, og det er ikke mulig for meg å gå i detalj i alt i ett innlegg. Dette innlegget blir derfor mer en oversikt over landskapet.

Et minimalt skjema

Listen med elementer relatert til skjemaer er lang, men ofte kommer du langt på vei med bare et subsett av disse. Følgende viser et minimalt skjema, men også de viktigste aspektene ved skjema- HTML: 

<form action="/order/new" method="post">
 <fieldset>
  <label for="full_name">Navn:</label>
  <input type="text" name="full_name" id="full_name" />
  <label for="zip">Postnummer (i Norge):</label>
  <input type="text" name="zip" id="zip" maxlength="4" />
  <input type="submit" value="Send inn" />
 </fieldset>
</form>

Dersom du bruker en transitional doctype så trenger du heller ikke <fieldset>-elementene. Med en strict doctype er det kun lov å legge blokkelementer i <form>.

Det viktigste

Jeg sa tidligere at dette eksempelet viser det viktigste aspektet ved HTML-skjemaer. Jeg snakker selvfølgelig om <label>-elementet, og for-attributtet. Dette attributtet peker på verdien i name/ id-attributtene på sine respektive <input>-elementer.

Ved å lage denne koblingen vil mange nettlesere gi fokus til inputfeltet ved klikk på labelen, men enda viktigere er at essensiell informasjon om hva som skal inn i boksene også blir tilgjengelig for brukere med utfordringer som for eksempel nedsatt eller inget syn.

Et større eksempel

<form action="/order/new" method="post">
  <fieldset class="person">
    <legend>Personopplysninger</legend>
    <div class="field text">
      <label for="full_name">Navn:</label>
      <input type="text" name="full_name" id="full_name" tabindex="1" />
    </div>
    <div class="field text">
      <label for="zip">Postnummer (i Norge):</label>
      <input type="text" name="zip" id="zip" maxlength="4" tabindex="1" />
    </div>
    <div class="field text">
      <label for="new_pass">Ønsket passord:</label>
      <input type="password" name="new_pass" id="new_pass" tabindex="1" />
    </div>
  </fieldset>
  <fieldset class="company">
    <legend>Firmaopplysninger</legend>
    <div class="field select">
      <label for="business">Bransje:</label>
      <select name="business" id="business" tabindex="1">
        <option value="1">IT</option>
        <option value="2">Landbruk</option>
      </select>
    </div>
    <div class="field textarea">
      <label for="description">Beskrivelse:</label>
      <textarea name="description" id="description"
                     cols="30" rows="10" tabindex="1">
      </textarea>
    </div>
   </fieldset>
   <div class="button">
     <input type="submit" value="Send inn" tabindex="1" accesskey="s" />
   </div>
</form>

Dette skjemaet viser en del bredere spekter av elementer i bruk.

form-attributtene

method: post eller get?

Get og post er to av flere tilgjengelige HTTP-metoder. Hver av disse har sin semantikk og tydelig definerte bruksområder, og de brukes ofte feil av utviklere.

Get

Som navnet tilsier brukes denne metoden når klienten kun ønsker å hente data fra tjeneren. Du kan kjenne igjen Get-baserte skjemaer ved at alle parameterne blir sendt over URL-en (eksempelvis http://dinserver.no/ditt_program?zip=0123&name=blabl).

Dersom skjemaet ditt oppretter data, endrer data eller sletter data skal du ikke benytte get. Tenk på følgende: alle get- URL-er er mulig å bokmerke. Hva skjer med systemet ditt hvis en bruker bokmerker en URL som ved hvert besøk oppretter en ny rad i en eller annen tabell i databasen din?

Post

Post- URL-er derimot er ikke mulig å bokmerke, fordi data ikke blir sendt over URL-en. Dette er også opphav til den lite populære "Siden har gått ut på dato".

Post skal heller ikke brukes i upassende situasjoner. Et typisk eksempel på misbruk av post er søkeskjemaer. Et søkeskjema gjør ikke annet enn å hente data fra tjeneren og skal dermed være en bokmerkbar ressurs. Ikke bruk post på søkeskjemaer.

W3C har mer om GET vs POST.

Publisert 22. desember 2007 under julekalender 2007, tilgjengelighet og html.

Muligens relatert

2006 - 2012 Christian Johansen Creative Commons Lisens