---

Hejsa

Hvordan gør I andre når I skal sætte ting og sager (f.eks. en registrer-
mig-som-bruger-form) op?

<TABLE>-tags er jo beregnet til tabel-data - dvs. prislister og andet godt
- men bliver i mindst lige så høj grad brugt til layout. Vha. CSS kan man
lave sit layout "på den rigtige måde" - men hvor mange gør det? ... og kan
man gøre det så det ser rigtigt ud på tværs af browsere eller er
understøttelsen endnu for dårlig?

.... jeg er bare lidt nysgerrig.

--
Hyggehej
/Thomas

---

Thomas Lindgaard wrote:
> Hvordan gør I andre når I skal sætte ting og sager (f.eks. en
> registrer- mig-som-bruger-form) op?

Sjovt du spørger. Jeg benytter selv primært div-tags til overordnede
layouts, men her på det seneste har jeg fået til opgave at bikse noget
sammen, der bl.a. involverer større formularer med mange text-felter,
radiobuttons, textareas m.v.. Til dette formål er CSS faktisk temmelig
besværligt, da en formular af hensyn til brugervenlighed helst skal
opstilles på en nøje tilrettelagt måde.

Problemstillingen blev vist diskuteret for nogen tid siden - enten her
eller i dk.edb.internet.webdesign. Et af synspunkterne var, at
formularer kræver/fordrer brugerinput og derfor adskiller sig væsentligt
fra de øvrige HTML-elementer, der blot beskriver struktur. Et andet
synspunkt var, at formularer netop også er en form for
præsentation/formidling af data, og derfor naturligt falder ind under
samme kategori som tabeller. Sidstnævnte kan man sige retfærdiggør
layout af formularer ved hjælp af tabeller.

Mit eget mål er at begrænse brugen af tabeller mest muligt, og i stedet
forsøge at benytte CSS til positionering og definition af størrelser på
form-elementer. De nyere browsere har en ganske fornuftig understøttelse
af CSS til dette formål. Til de mere indviklede formularer kan man dog
se sig nødsaget til at søge hjælp i gammeldaws tabeller.

Er hensigten også at få en anstændig præsentation af formularer i ældre
browsere som Netscape Navigator 4.x, kommer man ikke uden om tabeller og
ældre HTML attributter, da denne desværre ikke understøtter CSS specielt
godt.

Beklager det lidt tvetydige svar, men lige netop formularer er en sær
størrelse

Jeg vil dog lige til sidst nævne det ganske udmærkede HTML-element til
samling af relaterede form-elementer, nemlig fieldset (sammen med
legend).

<fieldset>
<legend>Brugeroplysninger</legend>
<input type="radio" value="1" name="sex" id="male"><label
for="male">Male</label>
<input type="radio" value="2" name="sex" id="female"><label
for="female">Female</label>
<label for="name">Navn:</label><input type="text" name="name" value="">
<label for="address">Adresse:</label><input type="text" name="address"
value="">
</fieldset>


--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fredgaard!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/?page=fredgaard

---

"Anders Thorsen Holm" <zoolook.removethis@daimi.au.dk> wrote:

>Jeg vil dog lige til sidst nævne det ganske udmærkede HTML-element til
>samling af relaterede form-elementer, nemlig fieldset (sammen med
>legend).
>
><fieldset>
><legend>Brugeroplysninger</legend>
><input type="radio" value="1" name="sex" id="male"><label
>for="male">Male</label>
><input type="radio" value="2" name="sex" id="female"><label
>for="female">Female</label>
><label for="name">Navn:</label><input type="text" name="name" value="">
><label for="address">Adresse:</label><input type="text" name="address"
>value="">
></fieldset>

Dejlig ting
Kan du der snildt få 2 kolonner, så labels står under hinanden og
inputfelterne står under hinanden, altså som jeg plejer at gøre med en
tabel:
<table>
<tr><td>navn:</td><td><input ...></td></tr>
<tr><td>adresse:</td><td><input ...></td></tr>
</table>

Hvilket formål er der med at sætte <label for="navn> på?
--
med venlig hilsen
Leonard - http://leonard.dk/

---

Leonard wrote:
> "Anders Thorsen Holm" <zoolook.removethis@daimi.au.dk> wrote:
[snip fieldset eksempel]

> Dejlig ting

Ja, ikke?

> Kan du der snildt få 2 kolonner, så labels står under hinanden og
> inputfelterne står under hinanden, altså som jeg plejer at gøre med en
> tabel:

I det her forholdsvis enkle eksempel kunne man vel ved hjælp af CSS
angive en fast bredde på label og input elementer, eller tildele klasser
til de forskellige elementer, alt efter hvilken bredde man nu synes, de
skal have.

En revideret udgave kunne derfor være:

<fieldset>
<legend>Brugeroplysninger</legend>
<div>
<input type="radio" value="1" name="sex" id="male">
<label for="male">Male</label>
</div>
<div>
<input type="radio" value="2" name="sex" id="female">
<label for="female">Female</label>
</div>
<div>
<label class="col1" for="name">Navn:</label>
<input class="col2" type="text" name="name" value="">
</div>
<div>
<label class="col1" for="address">Adresse:</label>
<input class="col2" type="text" name="address" value="">
</div>
</fieldset>

Her benyttes så en smule CSS til at angive bredden af de forskellige
elementer:

fieldset {
width: 300px;
}

..col1 {
float: left;
width: 100px;
}

..col2 {
width: 150px;
}

Ovenstående eksempel er meget banalt og anvender endvidere absolutte
enheder som px... det bliver faktisk lidt mere tricky at holde styr på
elementerne, når layoutet skal være flydende og tage hensyn til relative
fontstørrelser. Mere avancerede formularer kan gå hen og blive et
decideret helvede - særligt hvis man skal tage hensyn til ældre
browsere.

> Hvilket formål er der med at sætte <label for="navn> på?

Som sådan set alle andre HTML-elementer beskriver en eller anden
strukturel
egenskab, tjener label til at angive, at der her er tale om noget tekst,
der beskriver et eller andet element. I dette tilfælde betyder det, at
denne label knytter sig til elementet med navn eller id "navn".
Funktionelt set betyder det også, at du (formentlig) i browseren har
mulighed for at klikke på teksten og dermed aktivere pågældende
input-element.

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fredgaard!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/?page=fredgaard

---

Thomas Lindgaard wrote:
>
> Hvordan gør I andre når I skal sætte ting og sager (f.eks. en registrer-
> mig-som-bruger-form) op?
>
> <TABLE>-tags er jo beregnet til tabel-data - dvs. prislister og andet godt
> - men bliver i mindst lige så høj grad brugt til layout. Vha. CSS kan man
> lave sit layout "på den rigtige måde" - men hvor mange gør det? ... og kan
> man gøre det så det ser rigtigt ud på tværs af browsere eller er
> understøttelsen endnu for dårlig?

Jeg bruger div'er til sidens overordnede design, men hvis jeg skal lave
noget i stil med det her...

Navn: [__________]
Alder: [__________]

....bruger jeg tabeller. Man kan godt lave det med div'er, men det er ret
besværligt. Fordelen ved tabeller her er, at browseren forstår, at idet det
hele er en del af en tabel, er der en indbyrdes relation mellem cellerne.
Det betyder, at hvis der f.eks. er en rullegardinmenu, der fylder rimeligt
meget i bredden, så forstår browseren, at den skal udvide ikke bare det
felt, som rullegardinmenuen er i, men også de andre felter i samme kolonne.

--
Jonas Koch Bentzen

http://findhim.com/