Skapa snygga formulär med CSS istället för TABLE?

9 svar · 1 918 visningar · startad av erciz 10 juni 2011

ercizMedlem sedan maj 20011 826 inlägg

Frågan10 juni 2011 12:08#1

Jag vill ha ett formulär med texten (högerjusterad) framför textfältet. Men samtidigt så vill jag att alla textfält ska ligga i en rak kolumn. Det enklaste att få till detta är genom att använda en HTML TABLE. Men man ska ju helst inte använda tabeller för layout. Men går detta verkligen att lösa med CSS?

Här är min tabellbaserade layout:

<form method="post">
<table>
<tr>
<td><label for="name">Namn</label></td>
<td><input type="text" name="name"/></td>
</tr>
<tr>
<td><label for="email">E-post</label></td>
<td><input type="text" name="email"/><td>
</tr>
</table>
</form>

Danne VMedlem sedan aug. 20068 090 inlägg

10 juni 2011 12:37#2

http://mindrulers.blogspot.com/2008/03/create-table-using-css.html
http://www.dev-archive.net/articles/table-in-css.html
osv.

jawbreakerMedlem sedan jan. 2003296 inlägg

10 juni 2011 14:42#3

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Formulär</title>

<style>
form > div {
	margin: 10px 0;
}

label {
	float: left;
	margin-right: 10px;
	text-align: right;
	width: 100px;
}
</style>
</head>

<body>
<form action="#" method="post">
	<div>
		<label for="name">Namn</label>
		<input id="name" name="name">
	</div>
	<div>
		<label for="email">E-post</label>
		<input id="email" name="email">
	</div>
</form>
</body>
</html>

ercizMedlem sedan maj 20011 826 inlägg

10 juni 2011 15:31#4

jawbreaker skrev:

HTML-kod

Tack, den verkar funka helt okej. Nackdelen är ju att man måste sätta en fast bredd för texten. Men det går nog inte att lösa helt i CSS.

ercizMedlem sedan maj 20011 826 inlägg

10 juni 2011 15:34#5

Danne V skrev:

http://mindrulers.blogspot.com/2008/03/create-table-using-css.html
http://www.dev-archive.net/articles/table-in-css.html
osv.

Nja, t.ex. den första innebär att man måste ta en kolumn i taget, då blir HTML-koden ganska ologisk framförallt om man kollar utan CSS. Sen bygger den på att texten och formulärfälten har samma höj men så är sällan fallet i fomulär och man använder t.ex. textarea eller liknande komponenter.

QuidMedlem sedan juni 20006 022 inlägg

10 juni 2011 15:35#6

erciz skrev:

Nackdelen är ju att man måste sätta en fast bredd för texten. Men det går nog inte att lösa helt i CSS.

Eller så tar du bort "width: 100px;" så är det ingen fast bredd längre...

ercizMedlem sedan maj 20011 826 inlägg

10 juni 2011 15:47#7

Quid skrev:

Eller så tar du bort "width: 100px;" så är det ingen fast bredd längre...

Men då blir det pannkaka, eftersom alla textfälten hamnar huller om buller eftersom texterna är olika långa.

Alternativet är väl att placera texterna ovanför formulärfälten.

QuidMedlem sedan juni 20006 022 inlägg

10 juni 2011 16:25#8

erciz skrev:

Men då blir det pannkaka, eftersom alla textfälten hamnar huller om buller eftersom texterna är olika långa.

Sätt en bredd dom matchar det längsta då?

jawbreakerMedlem sedan jan. 2003296 inlägg

10 juni 2011 17:09#9

Precis som Quid skriver får du i så fall sätta en bredd som matchar den längsta texten. Kan vara knepigt när man har flerspråkiga formulär och liknande, men är det bara på svenska så kan du ju testa dig fram lite.

Det _går_ att skapa "css-tabeller" i modernare webbläsare (Firefox, Chrome, Opera, IE8+) också. Du kan använda samma kod som ovan i princip, men får förmodligen lägga till en span runt input-taggarna. I så fall kan du göra typ:

form {
	display: table;
}

form > div {
	display: table-row;
}

form > div > label,
form > div > span {
	display: table-cell;
}

form > div > label {
	text-align: right;
}

Med reservation för att detta är otestat + att jag dricker öl i skrivande stund :)

ercizMedlem sedan maj 20011 826 inlägg

10 juni 2011 17:39#10

jawbreaker skrev:

Det _går_ att skapa "css-tabeller" i modernare webbläsare (Firefox, Chrome, Opera, IE8+) också. Du kan använda samma kod som ovan i princip, men får förmodligen lägga till en span runt input-taggarna.

Med reservation för att detta är otestat + att jag dricker öl i skrivande stund :)

Wow, tackar! Det fungerar utmärkt.