25
May

Byt tabeller mot CSS i dina formulär

Den här artikeln går igenom hur du med hjälp av CSS kan få ordning på dina formulär, utan att använda tabeller för att få delarna på rätt plats. Det är den teknik som jag tycker är mest semantiskt korrekt och innehåller minst onödig HTML-kod.

Först och främst måste jag ge lite cred till den som förtjänat det. Tekniken har jag fått från denna artikel på Quirksmode. Jag har gjort lite tillägg och ändringar, men i det stora hela kommer den från Quirksmode. Exempelsidan visar hur formuläret kommer att se ut.

HTML-koden i sig är ganska rättfram. Ett vanligt formulär med några fält och knappar:

<form action="none.php" method="post">

   <fieldset>

      <legend>Personuppgifter</legend>

      <label for="namn">Namn:</label>

      <input name="namn" type="text" id="namn" /><br />

      <label for="adress">Adress:</label>

      <input name="adress" type="text" id="adress" /><br />

      <label for="ort">Ort:</label>

      <input name="ort" type="text" id="ort" /><br />

   </fieldset>

   <fieldset>

      <legend>Ärendeinformation</legend>

      <label for="meddelande">Meddelande:</label>

      <textarea cols="16" rows="3" name="meddelande" id="meddelande"></textarea><br />

      <label for="problemtyp">Typ av problem:</label>

      <select name="problemtyp" id="problemtyp">

         <option value="fakturering">Fakturering</option>

         <option value="leverans">Leverans</option>

         <option value="garanti">Garanti</option>

      </select><br />

      <div class="radioField">

         <span>Vill du ha en glass som plåster på såren?</span>

         <input name="glass" id="glass_ja" type="radio" value="ja" />

         <label for="glass_ja">Ja</label><br />

         <input name="glass" id="glass_nej" type="radio" value="Nej" />

         <label for="glass_nej">Nej</label><br />

      </div>

   </fieldset>

</form>

Det intressanta kommer i CSS-delen. Vi börjar med att styla fieldset och legend lite allmänt, anmärkningsvärt här är vänsterpaddingen på fieldset:

form fieldset {

   width: 240px;

   padding-left: 160px;

   background-color: #ffff80;

   border: 1px solid black;

}

form legend {

   font-family: Georgia, Serif;

   font-size: 1.2em;

}

I nästa del av CSS:en sätter vi en fast bredd på alla label, input och span, samt gör dem till block och floatar dem till vänster:

form label, form input, form span {

   display: block;

   width: 150px;

   float: left;

}

Nästa steg är att få alla label och span på rätt plats. Genom att sätta en negativ margin-left dras de på plats och hamnar där de ska.

form label, form span {

   margin-left: -160px;

   text-align: right;

   margin-right: 10px;

}

Nästa steg är det som gör att allting hamnar på snygga och prydliga rader. Genom att sätta ett br-element med clear left efter varje input får vi snygga radbrytningar.

form br {

   clear: left;

}

Efter detta följer lite kod för att få radioknapparna att hamna lika fint som resten av formulärdelarna:

form div.radioField br {

   clear: right;

}

form div.radioField label {

   margin: 0;

   text-align: left;

   width: auto;

}

form div.radioField input {

   width: auto;

}

På grund av att radioknapparan beter sig så pass annorlunda, blir vi tvungna att innesluta dem i en div som får en egen klass. Detta för att kunna styla allt inuti divven utan att behöva sätta en klass på varje enskilt element.

Här är den färdiga sidan med CSS-formuläret.

TYCKTE DU OM ARTIKELN?

KOMMENTARER

#1. Skriven av Thomas den 9 Sep 2008: Intressant teknik men... Tabeller fungerar utmärkt för formulär och behöver inte bytas mot css bara för att det är möjligt. Däremot bör inte tabeller användas för allmän layout av en webbsida, vilket fortfarande är vanligt.
#2. Skriven av Stefan den 10 Sep 2008: Hej och tack för kommentaren. Visst fungerar tabeller utmärkt för formulär, men om inte formulärdatat är tabulerande (ordnat i rader och kolumner) så bör inte heller tabeller användas.
#3. Skriven av Magnus den 7 Sep 2009: Jag har fått problem med formulärtextfält som jag haft i en tabell. Det har funkat tidigare, men plötsligt nu läggas utrymme över och under textfältet, medan jag vill att textfältet skall ligga tätt intill tabellens ramar eller rutnät. Eftersom jag vill ha 12 textfält ovanpå varann och att dessa alla skall synas samtidigt på skärmen, så har detta nu blivit ett problem.
Jag har inte ändrat i koden, men den är typ 1,5 år gammal, så kanske hänger det ihop med nya versioner av Explorer???
Vad gör man i tabeller och fält för att slippa detta?
Eller måste jag gå via metoden som beskrivs här (det hinner jag inte nu för det är massa sidor och jag kör bara detta som extraknäck, är maxad på jobb och hemma med barn annars...)
#4. Skriven av Stefan den 20 Sep 2009: Hej Magnus,
det är väldigt svårt att veta vad som är fel utan att se koden. Skicka gärna en länk så kan jag kanske hinna ta en snabb titt på det hela.
#5. Skriven av Anonym den 8 May 2012

Byt tabeller mot CSS i dina formulär

TYCKTE DU OM ARTIKELN?

KOMMENTARER

SÖK BLAND ARTIKLAR

KATEGORIER

OM KLIENTSIDAN