Bedre formularer/webforms med tabIndex og setFocus

Nogen gange kommer man ind på de mest fantastiske flashsites, hvor alt er topdollar, med fantastiske effekter, de lækreste overgange og jeg skal gi’ dig skal jeg.
Men ofte så fejler disse sites til gengæld på et meget basalt punkt, nemlig formular brugervenlighed.

Okay, ordet formular er grimt, men ordet webforms er om muligt endnu grimmere, særligt i en dansksproget tekst, så bare lige for at undgå forvirring, så er formular = webform = form, eller hvad du nu i øvrigt selv kalder det sted, hvor du indtaster dit navn, adresse, e-mail m.m. for at tilmelde dit et nyhedsbrev, bestille noget fra en webshop og så videre.

En af de ting som man altid kan i almindelige html-formularer, er at hoppe fra inputfelt til inputfelt med TAB, sådan så man ikke selv skal flytte markøren ned i det næste inputfelt med musen. Selv min far på over halvtreds har efterhånden lært at udfylde formularer på denne.

I Flash får du også denne funktionalitet med som standard, hvis du bruger TAB, så vil du kunne skifte rundt mellem alle objekter som man også kan klikke på med musen, altså primært tekstfelter af typen input og knapper.
Men, der hvor Flash halter lidt, er at den ikke er så god til at gætte hvor brugeren naturligt gerne vil hen når han trykker på TAB.
Har du for eksempel en menu med knapper til de enkelte undersider eller lignende, så vil Flash springe stort set random rundt mellem de forskellige elementer, og det er her at tabIndex kommer ind.

Med tabIndex kan du styre i hvilken rækkefølge de forskellige elementer skal have fokus, har du for eksempel en formular med 3 felter: Name, Email og Zipcode, så styrer du rækkefølgen med denne kode

Name.tabIndex = 1;
Email.tabIndex = 2;
Zipcode.tabIndex = 3;

Vil du gøre det endnu en tand nemmere for brugerne, så kan du også i det øjeblik de kommer ind på formularen, automatisk sætte fokus på det første felt, sådan så markøren står der og blinker med det samme.
Det gøres på denne måde:

Selection.setFocus("Name");


Sæt fokus er selvfølgelig en dårlig ting at bruge på små formularer der går igen på mange sider, eksempelvis tilmelding til et nyhedsbrev, men er oplagt at bruge på sider hvor selve formularen er det man kommer efter, eksempelvis bestillingsformularen på en webshop.

Så, det var to små tips til at gøre en god formular perfekt :-)



Del:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg

Skriv en kommentar