03. HTML

Ändra utseende på ett formulär

2009-11-01 17:53 #0 av: johan-ahlback

Om du läste min tidigare artikel om hur du strukturerar formulär kanske du sett att det kommer upp borders och andra saker som man kanske inte vill ha. Då får man snygga till det med css. Men då får man använda en annan sorts selector i css filen.

Du kan hitta artikeln om hur du strukturerar ett formulär här: Strukturera formulär

Eftersom i stort sett alla taggar i ett formulär är <input... /> så kommer alla olika input ändras om vi ändrar hela taggens utseende i css. Så då kan man skapa en klass för de olika typerna. Men det rekommenderar jag inte. Istället ska jag visa hur man kan ändra utseende med hjälp av html kodens attribut.

Så hur kommer man åt attributen genom css? Ni kanske kan de vanliga selectorerna? Om inte så skrivs de såhär:

  • id: #id. Exempel: #content
  • klass: .klass. Exempel: .hidden
  • vanlig tagg: tagg. Exempel: body

Det är de tre vanligaste selectorerna i ett css dokument. Men nu kommer vi till attribut selectorn. Först måste vi berätta vilken tagg det är vi vill komma åt och sen vill vi berätta att det är ett speciellt attribut vi ska ändra. Då skriver vi såhär:
input[type="text"]{
}

Först berättar vi att vi vill in i input taggen och sen att vi ska ändra textfältet. Svårare än så är det inte.

Men hur ändrar man i ett formulär då? Jo det ska jag visa nu. Dock väldigt grundläggande. Så ni får experimentera själva för att lära er lite mer.

Så här ser formuläret ut nu.

formuläret

Det jag ska göra är att ta bort ramarna fast behålla dem i botten och göra så att det blir radbrytning efter varje input type. Sen ska jag ändra textfälten så att de blir gråa. Och sen kanske jag hittar på något annat.

Jag börjar med ramarna. Den är enkel då man inte behöver använda attribut selectorn. Jag lägger också på padding och margin för att få avstånd till bordern.

cssform2.JPG

Nu ska jag göra alla inputs till blockelement för då kommer de att hamna på egen rad automatiskt. Här kanske ni ser en sak för första gången också. Då alla elementen i ett formulär inte är input så måste man göra regler för de olika taggarna. Detta går att göra var för sig. Men smartare är att göra det för alla på en gång om man ändå ska ge dem samma värde. Då separerar man dem med ett kommatecken.

cssform3.JPG

Nu ska jag ändra på färgerna i alla textfält. Då ska ska jag använda attribut selectorn. Man kan också bestämma storlek på fälten här.

cssform4.JPG

Nu ska jag ändra färg på submit knappen

cssform5.JPG

Som ni kanske ser så ligger alla inputs för nära varandra. Då går vi tillbaka till den delen av koden där vi gjorde dem till blockelement och lägger till margin.

cssform6.JPG

Nu har jag bara en sak kvar att göra. Jag ska dölja alla legend taggarna så att de inte syns. Det gör jag med display:none.

cssform7.JPG


Så här ser formuläret ut nu.

fixat formulär

Nu är det bara att börja experimentera och få fram ett resultat du gillar.

Ett litet tillägg: Du kanske undrar varför jag inte gjorde ett vanligt formulär från början eftersom jag nu fått det att se ur som ett sådant. Det är för att när man skriver formulär med fieldsets och legends får man inte bara mer kontroll utan det blir lättare för röstuppläsare att ta sig igenom ett formulär. Det jag ändrade med css påverkar inte röstuppläsare.

 

Å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 19:28 #1 av: dijete

Säger det igen, Jätte bra Johan!

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.