I serien pixelperfekt webdesign utan tabeller har vi idag kommit till tämjande av formulär.
Att göra formulär utan att boxa in dem i en massa tabeller kan vara rätt krångligt. Häromdan satt jag och min kompis Kristin och slet våra hår över formulärfält som inte ville linjera fint utan att ligga i tabeller (tabeller är självklart fusk 
). ett sätt att ordna det på är att använda floats, men det brukar kunna bli en aning skakigt.
Efter ett tag testade vi med definitionslista. När vi hade testat lite kändes det stabilare och funkade rätt bra.
Så här gjorde vi formuläret:
<form>
<dl>
<dt><label for="ettan">ettan </label></dt><dd><input type="text" id="ettan" name="ettan" /> lite text efter ettan</input></dd>
</dl>
</form>
Sen var det bara att placera grejerna rätt. Eftersom beställaren hade bestämt att det skulle vara 10px storlek i normaltexten rättade vi oss efter det (även om det är fel 
).
Det vi gjorde var i princip att göra dt 80 pixlar brett och flytta upp dd och sätta vänstermarginalen till 80 pixlar. Problemet var att inputfälten är ju högre än radavståndet, så det blev en negativ toppmarginal på dem plus att jag positionerade ner dem några pixlar för att det skulle se bra ut.
body {
font-size:62.5%;
font-family: verdana, sans-serif;
width:500px;
}
* {
font-size:10px;
}
form {
background:#eee;
padding:10px;
}
dl {
line-height:16px
}
dt {
position:relative;
margin:12px 0 0 0;
width:80px
}
dd {
margin:-16px 0 0 80px
}
input {
position:relative;
top:3px;
margin:-7px 4px 0 0;
}
button {
float:right;
margin-top:-30px;
}
<pust/>!
Det färdiga resultatet kan ses på http://ingenstans.com/formtest.html.
coolt, det ska jag testa någon gång
Kommenterat av Martin Persson — 02 november 2004 klockan 00.54
Åhå. Smart att göra detta utan tabell. Som sagt så bör ju en tabell vara en tabell och inget annat. Ska prova själv!
Kommenterat av Aron — 29 november 2004 klockan 21.32
Man kan ju fundera på hur semantiskt korrekt det är.
Är ett inputfält en definition av sin label. Svaret jag kommer fram till (även om man ska vara ganska sträng i sin tolkning av vad definitionslista) är att det är det ju! Om det till exempel står Namn och jag skriver mitt namn så måste ju det vara en definition av namn.
Snyggt jobbat. Definitivt väl värt att tänka på nästa gång man ska till att använda en form.
Kommenterat av Anders Johansson — 10 januari 2005 klockan 21.22
Nja Anders, tycker du verkligen det? Jag menar, ett namn är ju inte definitionen av ett namn.
Kommenterat av Peter Wängelin — 18 januari 2005 klockan 15.57
Är det inte en för mycket? För övrigt tycker jag att det redan finns en relation mellan LABEL och INPUT (och man kan lägga INPUT inuti LABEL om man vill), så det behövs ingen definitionslista för den sakens skull. Och en definitionslista är det ju egentligen inte. Så jag skulle nog använda mig SPAN för att få till en layout.
Kommenterat av zcorpan — 24 februari 2005 klockan 13.49
Hoppsan… Det borde stå ”Är det inte en
</label>för mycket?”.Kommenterat av zcorpan — 24 februari 2005 klockan 13.51
</input>menar jag!Kommenterat av zcorpan — 24 februari 2005 klockan 13.54
Jo visst är det en
</input>för mycket. det ska alltså se ut såhär i HTML-koden:<form><dl>
<dt><label for="ettan">ettan
</label></dt><dd><input type="text" id="ettan"
name="ettan" /> lite text efter ettan</dd>
</dl>
</form>
Kommenterat av martin — 30 mars 2005 klockan 13.27