Strukturera formulär
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.
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.
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.
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.
Då kommer det att se ut så här om man kollar på det i en webbläsare:
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.
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.
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.
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.
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.
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.
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:
Inbyggd knapp med value:
Bild:
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.
Vill du ha ett fält för lösenord skriver du så här:
Vill du att en checkbox ska vara kryssad från början?
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
Grymt Johan! Dock gillar jag inte att dela in mina.
Man kanske ska ta och skriva om hur man snyggar till formulär. Det är lite special saker i css då
Ålder föder inte visdom. Eftertanke gör det.
Värd för Trackmania iFokus och medarbetare på Hemsidor iFokus
#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"