03. HTML

Strukturera formulär

2009-11-01 00:54 #0 av: johan-ahlback

Ibland kan det vara svårt att strukturera upp ett formulär. Men det finns taggar och attribut inbyggt som gör det enklare för oss.

Du får gärna läsa den här artikeln först som handlar om formulär.

Jag ska visa hur man gör genom att sätta ihop ett formulär om hur det är på hemsidor i fokus.

Först lägger jag in form taggen som vanligt.

1.JPG

Men sedan kommer det en tag som kommer att dela upp formuläret i små delar. Jag ska skapa en del som heter personligt. För att göra detta lägger jag till fieldset. Men allt den gör är att visa att här börjar och slutar en del i formuläret.

2.JPG

Därför ska man använda legend taggen. I den taggen skriver man vad formulärs delen handlar om. Jag skriver personligt där då jag ska ha frågor om vem det är som fyller i formuläret.

3.JPG

Nu ska jag lägga till textfält och radioknappar i den här delen. Här kommer det också taggar som underlättar att strukturera. Det underlättar också för människor med funktionshinder.

Jag ska skapa ett textfält för namn. Istället för att skriva en text innan vad man ska fylla i så lägger man till en label. Då utnyttjar man id attribut för att visa att de här två hör ihop. Det gör man med ett for attribut i label taggen.

4.JPG

Då kommer det att se ut så här om man kollar på det i en webbläsare:

5.JPG

Nu ska jag lägga till ett textfält för ålder så då gör jag precis på samma sätt som innan. Skillnaden blir jag inte vill att fältet ska vara lika brett så jag kommer att ändra storleken så att den bra rymmer tre tecken. Det gör jag med ett size attribut. Notera att jag satt en br tagg för att göra en radbrytning, men jag kunde lika gärna gjort det i css.

6.JPG

Nu ska jag lägga till en fråga om kön. Det ska jag göra med hjälp av så kallade radioknappar. Anledningen till att de heter så är för att på gamla radioapparater kunde man bara ha en knapp intryckt åt gången. Så är också fallet här.

För detta krävs en ny input type och det är radio. Här är det viktigt att man använder attributet name, för det är name som visar att de hör ihop. Har man inte samma värde på name attributet kommer man kunna klicka i flera alternativ.

Sen måste vi sätta ett value på knappen. Det är det som kommer skickas med formuläret.

7.JPG

Nu ska jag skapa en del som heter dina kunskaper. Där ska jag ta reda på vilka koder man kan. Då vill jag att man ska kunna fylla i flera rutor, och då passar sig inte radioknappar. Så då får jag använda checkbox. Men först och främst ska jag skapa ett nytt fieldset och en tillhörande legend.

8.JPG

Nu ska jag skapa mina checkbox. Jag kommer fortfarande använda label for för varje knapp. Även här är det viktigt att man använder samma name på alla knappar som hör ihop så att det skriptet som tar emot formuläret förstår att det tillhör samma fråga.

9.JPG

Nu kommer jag till näst sista delen där jag ska fråga ett par frågor om hur sajten är. Jag skapar ett nytt fieldset och en ny legend.

10.JPG

11.JPG

Nu vill jag ha ett textfält där man ska kunna skriva ner övriga tankar eller idéer på hur man ska göra sajten bättre. Då räcker det inte bara med en rad så då får man lägga in textarea.

12.JPG

Rows bestämmer antal rader och cols antal kolumner. Det man skriver i taggen blir det som står i boxen innan något annat blir skrivet. Det är viktigt att man inte gör en radbrytning i koderna när man skriver text där då det som står visas utan formatering.


Nu är det dags att lägga till en knapp för att skicka iväg formuläret. Det finns en inbyggd knapp som är lätt att använda. Man lägger till value för att ändra text men struntar man i det kommer det en förinställd text som finns i webbläsaren. Men man kan också använda en knapp man skapat själv. Då lägger man bara in en bild.
Inbyggd knapp:

14.JPG

15.JPG

Inbyggd knapp med value:

16.JPG

17.JPG

Bild:

18.JPG

19.JPG

Nu har jag skapat ett formulär som är väl strukturerat och lättillgängligt.

Lite extra tips.
Om du vill att det ska finnas text i textfält så kan du lägga till attributet value.

20.JPG

21.JPG

Vill du ha ett fält för lösenord skriver du så här:

22.JPG

23.JPG

Vill du att en checkbox ska vara kryssad från början?

24.JPG

Tänk på att ett id måste vara unikt och får inte förekomma två gånger i ett dokument.

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-11-01 12:57 #1 av: IdaT

Mycket bra artikel! Detta ska jag använda när det är dags för mig att skapa ett formulär.

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anmäl
2009-11-01 15:26 #2 av: dijete

Grymt Johan! Dock gillar jag inte att dela in mina.

Anmäl
2009-11-01 15:27 #3 av: johan-ahlback

Man kanske ska ta och skriva om hur man snyggar till formulär. Det är lite special saker i css då Tungan ute

Ålder föder inte visdom. Eftertanke gör det.

Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus

MadeByJohan.se

Anmäl
2009-11-01 15:28 #4 av: dijete

#3 Det är en bra idé, Dessvärre är jag och formulär inte precis bästa kompisar. Så du får bli vår "Formulär-kung"

Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.