---
title: "Avstånd mellan textboxar och hur man bäst ska koda ett fint formulär"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/142488-avstånd-mellan-textboxar-och-hur-man-bäst-ska-koda-ett-fint-formulär"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "web00132"
published: "2006-02-14T14:38:33.000Z"
updated: "2006-02-14T19:39:07.000Z"
replies: 8
views: 486
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/142488-avstånd-mellan-textboxar-och-hur-man-bäst-ska-koda-ett-fint-formulär"
---

# Avstånd mellan textboxar och hur man bäst ska koda ett fint formulär

## #1 — web00132, 2006-02-14T14:38Z

Så här vill jag att mitt lilla formulär ska se ut:

```
Förnamn		<input type="text">
Efternamn	<input type="text">
Adress		<input type="text">
Postnummer	<input type="text">
Ort		<input type="text">
E-post		<input type="text">
```

 Just nu har jag rubrikerna (förnamn, efternamn etc) i en div som är absolut positionerad från vänster och inputboxarna i en likadan div fast med större avstånd från vänster. Ett stort problem med denna kodning är att IE verkar sätta ett litet avstånd mellan inputboxarna (på höjden alltså) även om jag har noll i padding, margin och border. I FF ligger boxarna kant i kant. Så när jag ställer avstånden för att de ska ligga i höjd med respektive rubrik blir det olika i IE och FF. Hur kan lösa detta?

Sen undrar jag om man kanske bör koda formuläret på nåt bättre sätt, rent semantiskt. Jag testade att göra en lista (ul) först men jag visste inte hur jag skulle få inputboxarna att bli vänsterställda. Vad tror ni, hur gör ni med sånt här?

Tack på förhand!

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

## #2 — zcorpan, 2006-02-14T15:07Z

Jag tror det går att ge IE en negativ marginal på input för att slippa glappet. 

Jag ser inte riktigt varför du behöver divar eller absolut positionering för att uppnå denna layout. På reflektion skulle jag vilja använda: 

```
label { display:inline-block; width:10em; }
```

 ...men nu är det inte så många webbläsare som har stöd för inline-block ännu...så man kanske får använda floats så länge. Jag vill inte påstå att absolut positionering är att förkasta dock; alla sätt är bra utom de dåliga. ;) 

Formulär och semantik har varit diskuterats här på wF ett par gånger tidigare vill jag minnas. :)

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

## #3 — web00132, 2006-02-14T15:49Z

Ok, vilka webbläsare är det som inte pallar label då?
Det lutar åt en vanlig enkel p-taggslösning med br:ar.  §jr  Trodde Tidy skulle säga ifrån om man stoppade en input i en p-tagg men det funkar bra.

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

## #4 — tanten, 2006-02-14T16:16Z

Så här brukar jag göra, men nu blev det en inloggningsgrej i stället, går ju att översätta till andra textfält. Blir övervarandra med litet mellanrum utan att behöva ange någon margin

```
<fieldset>
               <label for="user">Användarnamn:</label>
		<input type="text" name="user" id="user" />
		<label for="password">Lösenord:</label>
		<input type="password" name="password" id="password" />
		<input type="submit" value="Logga in" class="skickaknapp" /> </fieldset>
```

 och i css

```
fieldset{
	background:.....
	border:none;
	color:.......
	float:left;
	font-size:90%;
	font-weight:bold;
	width:3em;
	}
	input{
	background-color:.......
	border:............
	}
	input .submit:active{
	border:........
	}
	label{
	display:block;
	}
	legend{
	color:.......;
	font:100%;
	}
```

För att vara riktigt användarvänlig så bör man ha med platshållare också.

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

## #5 — web00132, 2006-02-14T16:23Z

Tack för ditt svar!
Men funkar det i alla webbläsare då? Eller snarare, är det någon viktig webbläsare som det inte funkar i?

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

## #6 — tanten, 2006-02-14T16:31Z

Av vad jag vet så funkar det i alla, och rekommenderas av de som arbetar för en användarvänlig web.
Men det finns andra som kan det bättre.

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

## #7 — web00132, 2006-02-14T16:39Z

Ok, tack! Jag har ändrat mig, det får bli label!   :birp

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

## #8 — icaaq, 2006-02-14T17:30Z

Två länkar som tar upp ämnet
 \- <http://particletree.com/features/10-tips-to-a-better-form/>
 \- <http://simplyaccessible.org/examples/required-form-fields>

mv icaaq

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

## #9 — tanten, 2006-02-14T19:39Z

> **icaaq skrev:**
>
> \- <http://simplyaccessible.org/examples/required-form-fields>
> 
> mv icaaq

Tack för den länken!

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/142488-avstånd-mellan-textboxar-och-hur-man-bäst-ska-koda-ett-fint-formulär