---
title: "Bästa sättet att designa upp formulär"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/115731-bästa-sättet-att-designa-upp-formulär"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "desdecado"
published: "2004-11-12T22:29:06.000Z"
updated: "2005-02-24T13:47:42.000Z"
replies: 5
views: 473
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/115731-bästa-sättet-att-designa-upp-formulär"
---

# Bästa sättet att designa upp formulär

## #1 — desdecado, 2004-11-12T22:29Z

Jag kör XHTML (trans.) och försöker vara väldigt strikt(!) hur jag använder tables på siten. Jag vet att tabeller ska användas till att visa just tabeller med data och det gör jag också.

Nu är det så att jag undrar hur ni löser problemet att layouta tex registreringssidor med mycket text och textboxar/kontroller utan att använda tabeller? Jag är såååå frestad att falla in på den mörka sidan igen och använda tabeller för dessa få sidor... =/

Jag vill helst ha alla css helt separerad ifrån xhtmlfilen, dvs i separat fil och inga styles rakt på taggarna. Detta gör så att jag måste tillverka xxx antal classer bara för dessa gigantiska "registreringssidor" (jag vill som sagt inte styla på div'arn direkt).

Hur gör ni?

Permalänk: https://www.webforum.nu/p/115731

## #2 — dectgap, 2004-11-12T23:21Z

Jag gissar att du är ute efter en layout i stil med

```
Förnamn:     |input-fält|
Efternamn:   |input-fält|
E-post:      |input-fält|
```

På "a list apart" finns det en artikel som heter "Practical CSS Layout Tips, Tricks & Techniques":
<http://www.alistapart.com/articles/practicalcss/>
Under avsnittet "FORM(s) and Function" visar de hur man kan få något liknande ovan nämnda uppställning (fast med högerjusterade namn på fälten) utan att använda en tabell.
Deras kod ser ut så här:

```
<form action="">
<div class="row"><span class="label">Name:</span>
<span class="formw"><input size="25" type="text"></span></div>

<div class="row"><span class="label">Age:</span>
<span class="formw"><input size="25" type="text"></span></div>

<div class="row"><span class="label">Shoe size:</span>
<span class="formw"><input size="25" type="text"></span></div>

<div class="row"><span class="label">Comments:</span>
<span class="formw"><textarea cols="25" rows="8">Go ahead - write something...</textarea></span></div>
<div class="spacer">&nbsp;</div>
</form>
```

Det finns en del att klaga på deras kod:
1\. Det ska inte behövas något "spacer"-element (sista div-elementet). Genom att stoppa in ett sådant frångår man från principen att skilja innehåll från layout.

2\. De använder *\<span class="label"\>* för att märka upp namnet på fältet, men det finns ett alldeles utmärkt *label*\-element för det, som dessutom har lite funktionalitet eftersom man kan binda det till ett input-fält.

3\. De skriver *\<span class="formw"\>\<input size="25" type="text"\>\</span\>*, men input-elementet är ett inline-element och behöver inte ha något container-element av det slaget.
*\<input size="25" type="text" class="formw"\>* räcker gott och väl.

4\. Det avgörande för att man inte ska behöva skämmas för att använda en tabell i ditt fall är när de skriver

```
<div class="row">
```

De märker alltså tydligt upp ett div-element till en "rad", där label och input-element sedan är celler, även om de inte skriver det någonstans.
Att använda andra element än table-element för att skriva en tabell är helt fel, anser jag.

Men om man inte bryr sig om deras kod kan man titta på följande:

```
<style type="text/css">
form p { width: 300px; margin: 0.3em; clear: both; }
form label { float: left; }
form input { float: right; }
</style>

...

<form>

<p><label for="namn">Namn:</label>
   <input size="25" type="text" id="namn" /></p>

<p><label for="efternamn">Efternamn:</label>
   <input size="25" type="text" id="efternamn" /></p>

<p><label for="epost">E-post:</label>
   <input size="25" type="text" id="epost" /></p>

</form>
```

Nu talar jag inte på något sätt i HTML-koden om hur jag vill att layouten ska vara - det lämnar jag helt och hållet till CSS-koden.

Permalänk: https://www.webforum.nu/p/1483342

## #3 — icaaq, 2004-11-13T06:36Z

Hej
[martin](http://www.webforum.nu/member.php?s=&action=getinfo&userid=378) har en snygg lösning på sin blog där han använder en definitionslista.

<http://blog.visitkortet.com/blog/2004/11/01/tamja-formular/>

Den kommer jag att använda nästa gång jag kör ett fomulär.

mv icaaq

Permalänk: https://www.webforum.nu/p/1483374

## #4 — Karlsson, 2004-11-14T10:51Z

Även quirksmode.com

<http://www.quirksmode.org/css/forms.html>

Permalänk: https://www.webforum.nu/p/1483804

## #5 — doggelito, 2005-02-24T12:03Z

> **isaaq skrev:**
>
> Den kommer jag att använda nästa gång jag kör ett fomulär.

 Jag antar att du gjort ett formulär sedan den 13/11 -04, använde du martins metod?

Metoden ser ju bra ut men hur ser det ut i olika webbläsare då 
de renderar formulärsfält så himla olika och koden använder 
ganska många margins för att positionera dem!

Permalänk: https://www.webforum.nu/p/1559323

## #6 — icaaq, 2005-02-24T13:47Z

Jag har använt följande faktiskt :)
<http://member.webforum.nu/1029/fieldset.htm>

mv icaaq

Permalänk: https://www.webforum.nu/p/1559390

---

Tråden på webben: https://www.webforum.nu/amne/html-css/115731-bästa-sättet-att-designa-upp-formulär