Skjema uten bruk av tabeller
En diskusjon på Typo3 sin nyhetsgruppe har satt søkelyset på hvordan klare å lage designen på skjemaer uten bruk av tabeller. Særlig i tilfeller der man ønsker mer en 1 eller 2 felt på samme rad, og helst etiketten på raden over. Ved hjelp av fieldset, label og input, samt å "pakke inn" i p-tag går dette meget bra. Fordelen er faktisk at å snu skjemaet blir svært enkelt.
HTML-kode
For det første er det viktig at man her bruker XHTML koding. Derfor bør man sette DOCTYPE til XHTML 1.0 Transitional eller XHTML 1.0 Strict.
Første delen av koden ser derfor slik ut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
Det neste er å lage koden for selve skjemaet:
<body>
<p> </p>
<form name="form1" id="form1" method="post" action=""><fieldset class="fieldset">
<legend>testbox</legend>
<p class="field1"><label class="firstname-label">Firstname</label>
<input name="firstname" type="text" class="firstbox"/></p>
<p class="field2"><label class="lastname-label">Lastname</label>
<input name="lastname" type="text" class="secondbox" /></p>
<p class="field3"><label class="username-label">Username</label>
<input name="username" type="text" class="username" /></p>
<p class="field4"><label class="password-label">Password</label>
<input name="password" type="password" class="password" /></p>
</fieldset>
</form>
<p> </p>
</body>
Noen ting å legge merke til her er at jeg har omgitt etikett (<label> </label>) og felt (<input />) med en avsnittstag. Grunnen til at jeg har omgitt med p-tag er at da kan hvert enkelt par av etikett og felt håndteres som en samlet enhet. Videre er alle elementene gitt en klasse (class). Det siste er nødvendig for å kunne håndtere stilene (css-styles) dersom man ønsker en mer avansert formattering. I forhold til å få felta på en rekke har man ikke behov for å angi class, men vi skal se på litt mer avanserte muligheter, og da er det greit å kunne håndtere hvert element separat. !break!
Skjemaet vil nå se slik ut. Som en ser kommer feltene i en kolonne nedover, om enn litt ustrukturert.
Lage CSS - koden.
Målet var å få alle feltene på en rekke bortover, med rett etikett rett over feltet. For å få til dette setter vi en bredde på hele fieldsettet. Er reelt sett ikke nødvendig, men uten bredde vil det bruke all tilgjengelig plass på siden, og det er vi ikke interessert i. I mitt eksempel vil jeg at hvert felt skal være på 95 pixel, og jeg vi ha litt luft mellom feltene. Setter derfor p-taggen til 105 pixel. I tillegg må jeg ha plass til en liten justering i forhold til Opera 8. Setter derfor fieldset til 425px. !break!
For å få elementene på rekke må vi bruke float på p-taggene. I dette tilfelle float:left. Float gjør om p-elementet til en boks, og virker slik at elementet vil flytte seg til venstre helt til det når venstre kant i boksen som omgir eller et annet element med float. Her finner du en enkel beskrivelse av float med eksempler !break!
Koden for css blir derfor som følger
<title>Untitled Document</title>
<style type="text/css">
#form1 {
}
fieldset {
width: 425px;
height: 75px; /* Nødvendig for å få høyde på fieldsetboksen i Opera 8 */
}
fieldset p {
float: left;
width: 105px;
margin: 0;
}
fieldset p.field1 {
margin-left: 5px; /* For å få luft mellom rammen på
fieldset og første felt i Opera 8 */
}
fieldset input {
width: 95px;
}
</style>
</head>
NÃ¥ ser skjemaet slik ut.
For å vise hvilken fleksibilitet bruk av fieldset og css har viser jeg nå css koden for å få feltene i en kolonne.
<style type="text/css">
#form1 {
}
fieldset {
width: 205px;
}
fieldset p {
margin: 1px 0 1px 0;
}
fieldset label {
float:left;
width: 95px;
margin-left: 5px;
}
fieldset input {
width: 95px;
}
</style>
</head>
Denne ser slik ut. Ser du på kildekoden vil du se at ikke et tegn i selve HTML-koden er endret, bare css-koden. !break!
Til slutt et siste eksempel som viser hvordan man kan gi egenskaper til hvert element, her vist med ulik bakgrunnsfarge for de ulike felten. Jeg viser ikke koden, men se på koden i eksemplet.
Problemer med bruk av css
Har du tilgjenglighet på flere nettlesere, IE, Firefox og Opera, vil du se at de ikke oppfører seg helt likt. Dette er et problem med bruk av css, de ulike nettleserene har implementert W3C standarden noe ulikt. De fleste problemene knyttet til dette lar seg løse ved hvordan man koder og bruk av "hacks". Firefox er den nettleseren som oppfører seg mest korrekt. !break!
Men disse problemene kan være et argument for å bruke tabeller, da man der unngår problemene. Men tabeller er ikke framtida når det gjelder webdesign.
