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

8 svar · 469 visningar · startad av web00132 14 feb. 2006

web00132Medlem sedan maj 2001797 inlägg

Frågan14 feb. 2006 14:38#1

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!

zcorpanMedlem sedan dec. 20042 245 inlägg

14 feb. 2006 15:07#2

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. :)

web00132Medlem sedan maj 2001797 inlägg

14 feb. 2006 15:49#3

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.

tantenMedlem sedan nov. 20051 596 inlägg

14 feb. 2006 16:16#4

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å.

web00132Medlem sedan maj 2001797 inlägg

14 feb. 2006 16:23#5

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?

tantenMedlem sedan nov. 20051 596 inlägg

14 feb. 2006 16:31#6

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.

web00132Medlem sedan maj 2001797 inlägg

14 feb. 2006 16:39#7

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

icaaqMedlem sedan okt. 20005 273 inlägg

14 feb. 2006 17:30#8

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

tantenMedlem sedan nov. 20051 596 inlägg

14 feb. 2006 19:39#9

icaaq skrev:

- http://simplyaccessible.org/examples/required-form-fields

mv icaaq

Tack för den länken!