/ 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
forms og labels
Fra : Michael Foged


Dato : 05-10-04 13:36

Hej

Jeg er ved at lave en form, til indtastning af søgekriterier til søgning
i en database.

Nu vil jeg så lave den om, men vil gerne være sikker på at jeg ikke
misbruger <label>.

Jeg har 3 grupper, af 3 radio-buttons med hver deres <label>.
Jeg har så placeret de 3 labels i en venstre floated div, og de 3
radiobuttons i en højrefloated div. Er det misbrug? (At have radiobuttons
og labels i hver sin <div>).

Jeg fik et problem med afstanden mellem de radiobuttons. Jeg prøvede at
give den omsluttende <div> et line-height:1.18em; men det ændrede ikke
noget (i mozilla) før jeg indsatte et &nbsp; efter hver <br>, det syntes
jeg er lidt klodset.

Der ligger også et skærmdump, fordi layoutet endnu ikke er på plads,
så hvis det ser helt andeledes ud i jeres browsere, hører jeg det gerne.

http://mogif.de/test/trade/search.php
http://mogif.de/test/trade/search.php.jpg

--
mvh
Michael Foged

 
 
Martin Hintzmann And~ (05-10-2004)
Kommentar
Fra : Martin Hintzmann And~


Dato : 05-10-04 14:06

Michael Foged wrote:
>
> Jeg har 3 grupper, af 3 radio-buttons med hver deres <label>.
> Jeg har så placeret de 3 labels i en venstre floated div, og de 3
> radiobuttons i en højrefloated div. Er det misbrug? (At have radiobuttons
> og labels i hver sin <div>).
>

At have dem i hver sit div element er ikke "misbrug". Men ikke at kunne
se hvilken label der høre til hvilket form felt, er uhensigtsmæssigt.

Men du har faktisk selv mulighed for at vurdere det.
Se din side uden css, og se om det giver mening

PS. du mangler "for" attributten på dine labels

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Michael Foged (05-10-2004)
Kommentar
Fra : Michael Foged


Dato : 05-10-04 15:07

On Tue, 05 Oct 2004 15:05:50 +0200, Martin Hintzmann Andersen wrote:

> Men du har faktisk selv mulighed for at vurdere det.
> Se din side uden css, og se om det giver mening

har lige installeret lynx og iih du forbarmede, tilbage til tænkeboksen.

> PS. du mangler "for" attributten på dine labels.

Ja det undrer mig ikke.

--
mvh
Michael Foged

Erik Ginnerskov (05-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 05-10-04 21:05

Michael Foged wrote:
> Hej
>
> Jeg er ved at lave en form, til indtastning af søgekriterier til
> søgning i en database.
>
> Nu vil jeg så lave den om, men vil gerne være sikker på at jeg ikke
> misbruger <label>.
>
> Jeg har 3 grupper, af 3 radio-buttons med hver deres <label>.
> Jeg har så placeret de 3 labels i en venstre floated div, og de 3
> radiobuttons i en højrefloated div. Er det misbrug? (At have
> radiobuttons og labels i hver sin <div>).

Læs her om en hensigtsmæssig måde at lave formularer på:

http://www.hjemmesideskolen.dk/html/formular.asp#look

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Michael Foged (06-10-2004)
Kommentar
Fra : Michael Foged


Dato : 06-10-04 09:24

On Tue, 05 Oct 2004 22:05:11 +0200, Erik Ginnerskov wrote:

> Læs her om en hensigtsmæssig måde at lave formularer på:
> http://www.hjemmesideskolen.dk/html/formular.asp#look

Mange gode ting der, tak for det link. Jeg har nu omstruktureret det hele
lidt, resultatet kan ses her: http://mogif.de/test/trade/search.php

I sættet simpel søgning har jeg bare 2 problemer. Jeg kan ikke
sætte en "vertical-align:middle;" på fieldsettet (så det virker).
"optaget" og input feltet dato skulle gerne justeres lodret. Da det ikke
virkede at sætte vetical-align på fieldsettet, prøvede jeg at smide
alle 3 (floatede <div>'er) ind i en div, og sætte vertical-align på den,
men det hjalp mig heller ikke:|

Andet problem er at jeg gerne vil have label'en før en radiobutton. Det
er jo let nok, men labels skal være venstrestillet og radiobuttons
skal være højrestillet, som det kan ses på
http://mogif.de/test/trade/search.php.jpg
(det var det krav der gjorde at jeg forbrød mig mod dokumentstrukturen i
formen igår.

Nogen ideer til de 2 ting?

--
mvh
Michael Foged

Michael Foged (07-10-2004)
Kommentar
Fra : Michael Foged


Dato : 07-10-04 12:53

On Wed, 06 Oct 2004 10:23:30 +0200, Michael Foged wrote:

> I sættet simpel søgning har jeg bare 2 problemer. Jeg kan ikke
> sætte en "vertical-align:middle;"

Og det kan jeg ikke få til at virke fordi elementerne er floatede, så
tages de jo ud af flow?

--
mvh
Michael Foged

Erik Ginnerskov (07-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 07-10-04 15:47

Michael Foged wrote:

> http://mogif.de/test/trade/search.php
>
> Andet problem er at jeg gerne vil have label'en før en radiobutton.
> Det er jo let nok, men labels skal være venstrestillet og radiobuttons
> skal være højrestillet, som det kan ses på
> http://mogif.de/test/trade/search.php.jpg
> (det var det krav der gjorde at jeg forbrød mig mod
> dokumentstrukturen i formen igår.

Jeg kan se den side, du linker til, men linket til dumpet giver en fejl-404.
Prøv at tjekke navnet på filen og lav eventuelt navnet om, så første punktum
bliver en bindestreg.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Michael Foged (07-10-2004)
Kommentar
Fra : Michael Foged


Dato : 07-10-04 16:01

On Thu, 07 Oct 2004 16:46:54 +0200, Erik Ginnerskov wrote:

> Jeg kan se den side, du linker til, men linket til dumpet giver en fejl-404.
> Prøv at tjekke navnet på filen og lav eventuelt navnet om, så første punktum
> bliver en bindestreg.

Sorry, den slags filnavne virker lokalt, og derfor tænker jeg
ikke videre over det.

så har jeg omdøbt billedet til
http://mogif.de/test/trade/search.jpg

(men det fylder 42 KB)

Nu stemmer dump og aktuel kode ikke sammen, det er der for at
illustrere mit ønske med hensyn til radio-buttons og labels.

--
mvh
Michael Foged

Erik Ginnerskov (07-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 07-10-04 17:44

Michael Foged wrote:

> så har jeg omdøbt billedet til
> http://mogif.de/test/trade/search.jpg
>
> (men det fylder 42 KB)

Kan du bruge det her:

<fieldset style="padding:15px">
<legend>Søg efter bootlegs</legend>
<div style="float: left; width:150px">
<label for="rb1" style="width:100px">Gruppenavn</label><input id="rb1"
type="radio" name="g1" value="gn">
<label for="rb2" style="width:100px">Bootlegtitel</label><input id="rb2"
type="radio" name="g1" value="blt">
<label for="rb3" style="width:100px">Track</label><input id="rb3"
type="radio" name="g1" value="tck">
</div>
<label for="inp1">Indtast</label><br><input id="inp1" name="inp1">
</fieldset>

<fieldset style="padding:15px">
<legend>Datosøgning</legend>
<label for="rb4">Dato</label><input type="radio" id="rb4" name="dato">

<fieldset style="float: left; width: 45%;padding:15px;margin-right:15px">

<div style="float:left; width:70px"><br><br>Optaget</div>

<legend>Simpel søgning</legend>
<div style="float:left; width: 100px">
<label for="rb5" style="width: 70px">Før den</label><input id="rb5"
type="radio" name="dt" value="fd"><br>
<label for="rb6" style="width: 70px">Efter den</label><input id="rb6"
type="radio" name="dt" value="ed"><br>
<label for="rb7" style="width: 70px">Den</label><input id="rb7" type="radio"
name="dt" value="dn">
</div>
<div style="float:left"><br><input type="text" name="inp2"
style="width:70px"></div>

</fieldset>

<fieldset style="float:left;width:47%;padding:15px">
<legend>Avanceret søgning</legend>
<div style="float:left;width:100px">
<label for="rb8" style="width:50px">AND</label><input type="radio" id="rb8"
name="andor" value="and"><br>
<label for="rb9" style="width:50px">OR</label><input type="radio" id="rb9"
name="andor" value="or">
</div>
<div style="float:left;width:100px">
<label for="rb10" style="width: 70px">Før den</label><input type="radio"
id="rb10" name="avdt" value="avf"><br>
<label for="rb11" style="width: 70px">Efter den</label><input type="radio"
id="rb11" name="avdt" value="ave"><br>
<label for="rb12" style="width: 70px">Den</label><input type="radio"
id="rb12" name="avdt" value="avd">
</div>
<div style="float:left"><br><input type="text" name="inp3"
style="width:70px"></div>
</fieldset>

</fieldset>

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Michael Foged (08-10-2004)
Kommentar
Fra : Michael Foged


Dato : 08-10-04 11:17

On Thu, 07 Oct 2004 18:43:48 +0200, Erik Ginnerskov wrote:

<snip>
> <label for="rb1" style="width:100px">Gruppenavn</label><input id="rb1"
<snip>

Desværre ikke, da width tilsyneladende ikke virker ordentligt på labels.
(ihvertfald ikke i min mozilla), men tak for forsøget. her er et par
links: http://mogif.de/test/trade/test.html
http://mogif.de/test/trade/test.jpg

Men det er ikke så vigtigt at det er værd at bruge en masse krudt på det.

Lige et tillægsspørgsmål
I en <label> angiver for="" hvilket element(?) label'en er for. Hvis man
angiver en label således:
<label>Navn<input type="text" name="ger"></label>
er det så korrekt forstået at man ikke behøver "for"?. Det er jo
implicit erklæret. ved at have inputfeltet imellem <label> og </label>

--
mvh
Michael Foged

Erik Ginnerskov (08-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 08-10-04 17:52

Michael Foged wrote:

> <snip>
>> <label for="rb1" style="width:100px">Gruppenavn</label><input
>> id="rb1" <snip>
>
> Desværre ikke, da width tilsyneladende ikke virker ordentligt på
> labels. (ihvertfald ikke i min mozilla),

Det virker da helt perfekt i min Mozilla 1.6 på W2K. Du kan da se mine egne
formularer rundt omkring på Hjemmesideskolen. Eneste forskel er, at jeg der
har defineret width i et eksternt css.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Michael Foged (08-10-2004)
Kommentar
Fra : Michael Foged


Dato : 08-10-04 18:51

On Fri, 08 Oct 2004 18:51:56 +0200, Erik Ginnerskov wrote:

> Michael Foged wrote:

>> Desværre ikke, da width tilsyneladende ikke virker ordentligt på
>> labels. (ihvertfald ikke i min mozilla),
>
> Det virker da helt perfekt i min Mozilla 1.6 på W2K. Du kan da se mine egne
> formularer rundt omkring på Hjemmesideskolen. Eneste forskel er, at jeg der
> har defineret width i et eksternt css.

Du har eksempler hvor det virker fint med <input type="text"> og med
<textarea>, men ikke hvor radio buttons klistrer sig op ad højre border,
mens label klistrer sig op ad venstre border (eller også kunne jeg ikke
finde dem). Mozilla 1.7.3 Debian Linux.

--
mvh
Michael Foged

Erik Ginnerskov (08-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 08-10-04 20:52

Michael Foged wrote:

>> Det virker da helt perfekt i min Mozilla 1.6 på W2K. Du kan da se
>> mine egne formularer rundt omkring på Hjemmesideskolen. Eneste
>> forskel er, at jeg der har defineret width i et eksternt css.
>
> Du har eksempler hvor det virker fint med <input type="text"> og med
> <textarea>, men ikke hvor radio buttons klistrer sig op ad højre
> border, mens label klistrer sig op ad venstre border

Jeg har nu leget lidt mere med koden fra før. Det ser fornuftigt ud i både
Mozilla og IE. Jeg kan sende dig den side, jeg har lagt det på.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Michael Foged (09-10-2004)
Kommentar
Fra : Michael Foged


Dato : 09-10-04 08:45

On Fri, 08 Oct 2004 21:51:45 +0200, Erik Ginnerskov wrote:

> Jeg har nu leget lidt mere med koden fra før. Det ser fornuftigt ud i både
> Mozilla og IE. Jeg kan sende dig den side, jeg har lagt det på.

Det lyder lækkert, du må gerne sende siden (eller et link) til mig:)

--
mvh
Michae Foged

Erik Ginnerskov (10-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 10-10-04 14:37

Michael Foged wrote:

>> Jeg har nu leget lidt mere med koden fra før. Det ser fornuftigt ud
>> i både Mozilla og IE. Jeg kan sende dig den side, jeg har lagt det
>> på.
>
> Det lyder lækkert, du må gerne sende siden (eller et link) til mig:)

http://hjemmesideskolen.dk/temp/labeltest.htm

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Michael Foged (10-10-2004)
Kommentar
Fra : Michael Foged


Dato : 10-10-04 16:08

On Sun, 10 Oct 2004 15:36:33 +0200, Erik Ginnerskov wrote:

> Michael Foged wrote:
>
>>> Jeg har nu leget lidt mere med koden fra før. Det ser fornuftigt ud
>>> i både Mozilla og IE. Jeg kan sende dig den side, jeg har lagt det
>>> på.
>>
>> Det lyder lækkert, du må gerne sende siden (eller et link) til mig:)
>
> http://hjemmesideskolen.dk/temp/labeltest.htm

Smart løsning, tak fordi du kiggede på det, den ide havde jeg aldrig
fundet på selv!

--
mvh
Michael Foged

Erik Ginnerskov (10-10-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 10-10-04 16:28

Michael Foged wrote:

>> http://hjemmesideskolen.dk/temp/labeltest.htm
>
> Smart løsning, tak fordi du kiggede på det, den ide havde jeg aldrig
> fundet på selv!

Lidt pay back for den hjælp, du selv giver i php-gruppen ;)

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Jens Gyldenkærne Cla~ (08-10-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 08-10-04 12:27

Michael Foged skrev:

> Hvis man angiver en label således:
> <label>Navn<input type="text" name="ger"></label>
> er det så korrekt forstået at man ikke behøver "for"?. Det er
> jo implicit erklæret.

Det er rigtigt - men IE forstår ikke implicitte labels. Firefox og
Opera håndterer det uden problemer.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Michael Foged (08-10-2004)
Kommentar
Fra : Michael Foged


Dato : 08-10-04 14:07

On Fri, 08 Oct 2004 13:27:08 +0200, Jens Gyldenkærne Clausen wrote:

> Det er rigtigt - men IE forstår ikke implicitte labels.

Æv. Så må jeg jo lave det explicit.

--
mvh
Michael Foged


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

Månedens bedste
Årets bedste
Sidste års bedste