Formulär för interaktiva webbsidor

Formulär används för att göra en webbplats interaktiv, det vill säga kommunicera med och hämta in uppgifter från användarna. Formulär av olika slag blir mer och mer vanligt på den ”nya” webben där användarna i allt större utsträckning står för innehållet. Formulär används i många olika sammanhang, till exempel för att söka i olika databaser, göra ett inlägg i ett forum, logga in på Internetbanken, skriva ett nytt inlägg i en blogg, handla i en e-handel…

Nedan ser du exempel på ett ganska vanligt förekommande sökformulär. Det här formuläret har jag hittat på www.bokus.com.

Formulär för avancerad sökning.

Hur fungerar formuläret?

Ett formulär består av två delar. Dels det du ser på webbsidan, dels någon form av skript som tar hand om det som matas in i formuläret och ”ger feedback” till användaren. Vi kommer inte att gå igenom den här typen av skriptprogrammering i kursen, men det kan vara bra att veta vad som krävs för att ett formulär ska fungera. Ofta kan man hämta hem olika typer av skript på webben och ibland erbjuder webbhotellen, där man hyr plats för sin sajt, olika skript som kan bearbeta formulär.

I sökformuläret ovan fyller du i olika kriterier i textfält och kryssrutor och klickar sedan på sök. Sökknappen anropar ett skript som letar upp passande titlar i en databas och presenterar dessa på en ny sida.

När jag provade att göra en sökning på titeln ”hej” samt diverse kryssrutor ikryssade, resulterade det i följande sökfråga mot databasen (prova gärna själv och se hur url:en i webbläsarens adressfält förändras):

http://www.bokus.com/cgi-bin/book_search.cgi?PRODUCT_GROUP=B&TITLE=hej&
TITLE_EXACT=&TITLE_OPTIONS=NONE&AUTHOR1=&AUTHOR2=&AUTHOR_OPTIONS=NONE&
PUBLISHER=&PRINT_YEAR_FROM=&PRINT_YEAR_TO=&PRICE_FROM=&PRICE_TO=&
COUNTRY=Sverige&COUNTRY=UK&COUNTRY=USA&COUNTRY=Danmark&COUNTRY=Tyskland&
CATEGORY=&SAB=&AVAIL_STAT=Available&AVAIL_STAT=21&AVAIL_STAT=41&
SHOW_COVER_CHECKBOX=1&SHOW_COVER=Y&x=27&y=10

Att skapa ett formulär

Formuläret kan ligga på vilken (X)HTML-sida som helst och skapas med hjälp av form-elementet:

<form action=”sendForm.php” method=”post” id=”myForm” name=”myForm”>
Här placeras formulärets innehåll.
</form>

I form-taggen hittar du lite olika attribut som gör att man kan skicka iväg formuläret: method och action. I exemplet ovan anropar vi skriptet sendForm.php och använder metoden post för att göra detta. (När du nu lär dig att skapa egna formulär kan du lämna action och method tomt: action=”"). För att i skriptet, och även i stilmallen, hålla reda på vilket formulär det är som behandlas använder man attributen id och name.

I exempelbilden ovan har vi lite olika formulär-element för inmatning av data och val av olika slag:

  • textfält
  • radioknappar
  • kryssrutor
  • rullgardinslistor
  • knappar

För att lägga till de här elementen i ett formulär används följande taggar mellan form-taggarna, där input, med sina olika attribut, är den mest använda:

<input />
<textarea>
<select>
<button>

Input-elementet är antagligen det element det du kommer att använda mest och genom att lägga till attributet type kan du styra vilken typ av input-fält som ska visas.

  • Textfält: <input type=”text” name=”namn” />
  • Lösenordsfält där inmatad text maskeras:
    <input type=”password” name=”losenord” />
  • Radioknappar där man kan välja ett alternativ. Lägg märke till att värdet för name är detsamma:
    <input type=”radio” name=”anmalning” value=”ja” /> Ja<br />
    <input type=”radio” name=”anmalning” value=”nej” />Nej
  • Kryssrutor där man kan välja flera alternativ:
    <input type=”checkbox” name=”husdjur” value=”Hund” /> Hund<br />
    <input type=”checkbox” name=”husdjur” value=”Katt” /> Katt
  • ”Skicka-knapp” för att skicka iväg formuläret:
    <input type=”submit” value=”Submit” / >

Ökad användbarhet med etiketter

En del formulärelement har redan egna etiketter, se till exempel sök-knapparna i formulärexemplet ovan. Men det räcker inte för att användaren ska förstå vad de olika fälten innebär och då behöver du lägga till en förklarande text. För att lägga till en ”etikett” till dina olika formulär-element finns elementet <label>. Detta kan läggas till på två olika sätt som du ser nedan. I sökexemplet ovan kan man tänka sig att alla små texter i anslutning till fält, knappar och rutor visas med hjälp av label-elementet.

Alternativ 1: label som ett helt separat element med attributet for. Värdet på det här attributet måste vara samma som id-attributet för formulärkontrollen.

<label for=”namn”>Namn</label><br />
<input type=”text” name=”namn” id=”namn” />

Lägg märke till attributet id som tillkommit i input-taggen ovan. Vill man lägga till en etikett, ett script eller en stilmall används id-attributet för att man ska kunna identifiera ett speciellt element. Ett slags personnummer som är unikt för varje element på en webbsida.

Alternativ 2: label-elementet kan placeras före eller efter formulärkontrollen och omsluter denna. Här lägger du inte till for-attributet.

<label>Namn<input type=”text” name=”namn” id=”namn” /></label>

Elementet <fieldset> </fieldset> hjälper dig att gruppera olika fält i formuläret och skapar tydliga ramlinjer runt de element som omsluts.

Med <legend></legend> kan du skapa en rubrik (eng. caption) för varje fieldset-element.

<fieldset>
<legend>
Personuppgifter</legend>
<label>
Namn<input type=”text” name=”namn” id=”namn” /></label>
</fieldset>

För ytterligare användbarhetsanpassningar av formuläret kan du arbeta med hur olika formulärkontroller fokuseras när man exempelvis tabbar sig fram mellan dem.

Det finns lite olika sätt att göra detta och du kan exempelvis lägga till attributet tabindex i formulärkontrollerna. Om inget tabindex lagts till är värdet per default 0 så välj större värden.

<input type=”text” name=”namn” id=”namn” tabindex=”2″ />
<input type=”text” name=”adress” id=”adress1″ tabindex=”3″ />
<input type=”text” name=”postadress” id=”adress2″ tabindex=”1″ />

Ett annat attribut som kan läggas till i dina formulärkontroller är accesskey som fungerar som ett snabbkommando.

<fieldset accesskey=”p”>
<legend><u>P</u>ersonuppgifter</legend>
<label>Namn<input type=”text” name=”namn” id=”namn” /></label>
</fieldset>

I exemplet ovan når vi den här sektionen av formuläret genom att i IE trycka Alt+p och i Firefox Alt+Shift+p, vilka kommandon som gäller beror på vilket operativsystem och browser som används.

Textfält och rullgardinsmenyer

Större textfält och rullgardinsmenyer är också något man använder ganska flitigt i formulärsammanhang.

Genom att lägga till elementet <textarea></textarea> ger du användaren möjlighet att skriva in lite längre texter på flera rader. Genom att lägga till attributen rows och cols kan du bestämma antal rader och kolumner i textfältet.

<textarea rows=”10″ cols=”15″>Skriv vad du tycker om kursen här…</textarea>

Vill du skapa en meny där man kan välja mellan olika alternativ kan du istället för radioknappar välja en rullgardinsmeny.

<select>
<option value=”5star”>5-stjärnigt hotell</option>
<option value=”4star”>
4-stjärnigt hotell</option>
<option value=”3star”>
3-stjärnigt hotell</option>
<option value=”budget”>
Budget</option>
</select>

Tips! Läs mer om hur du skapar tillgängliga formulär i ”Universal Usability” av Sarah Horton: http://universalusability.com/access_by_design/forms/index.html

HTML5

I den nya standarden HTML5 som håller på att utarbetas har man lagt till lite nya funktioner för formulär. Ett intressant tillskott är bland annat möjligheten att lägga till fler typer av input-fält vilket innebär att man mer noggrannt kan specificera vilken typ av data som förväntas matas in i fältet. De nya typerna är: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, and url.

De här nya funktionerna fungerar i nuläget inte som avsett  i alla webbläsare men vid användning bör det inte vara något problem då det ändå visas ett input-fält. Prova exempelvis att skapa ett datumfält genom att lägga till följande element: <input id=”datum” name=”datum” type=”date” />

Hur visas fältet i  olika webbläsare? Prova exempelvis Safari, Chrome, Firefox, Internet Explorer och Opera.

 

2 Comments to “Formulär för interaktiva webbsidor”

  1. Sanna 26 april 2011 at 08:40 #

    Hej,

    Det hade ökat kunskapen om ni had visat det ni illusterera i färdig produkt. Är det möjligt?

    • Jenny Folkesson 26 april 2011 at 09:31 #

      Här kommer en screencast där jag visar hur man skapar ett enkelt kontaktformulär:
      http://screenr.com/Cri


Leave a Reply