/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Brug af DIV
Fra : Thomas Lindgaard


Dato : 25-02-03 23:47

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

 
 
Anders Thorsen Holm (26-02-2003)
Kommentar
Fra : Anders Thorsen Holm


Dato : 26-02-03 00:21

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



Leonard (26-02-2003)
Kommentar
Fra : Leonard


Dato : 26-02-03 00:43

"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/

Anders Thorsen Holm (26-02-2003)
Kommentar
Fra : Anders Thorsen Holm


Dato : 26-02-03 02:04

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



Jonas Koch Bentzen (26-02-2003)
Kommentar
Fra : Jonas Koch Bentzen


Dato : 26-02-03 10:30

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/

Søg
Reklame
Statistik
Spørgsmål : 177554
Tips : 31968
Nyheder : 719565
Indlæg : 6408852
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste