html - Test formular design - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css html design

<< < 1 2 > >>

Bruger #10216 @ 01.09.11 20:06

Hey Gutter,

Jeg har de sidste par dage arbejdet på en formular som gerne skulle kunne fungerer crossbrowser og med downgrade gracefully hvis der klienten mangler en feature der kræves ved normal redering.

Jeg kunne godt tænke mig hvis i lige gad at bruge et par sekunder på at validere kode/design i jeres foretrukne browser.

http://dykkerture.net/tests/form.php

Det skulle gerne se nogenlunde ud i Chrome & Firefox som i det linkede billede. Slåes JS state fra, så skulle alle placeholders gerne være konverteret til smukke labels.

http://dykkerture.net/tests/form.jpg

Check det ud og giv en melding...

Mange tak!

Indlæg senest redigeret d. 02.09.2011 09:58 af Bruger #10216

16 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #2416 @ 04.09.11 21:33

314

Kan godt være det er en bug i Chrome. Jeg kender dog andre sider hvor det virker, hvor input checkboxen er puttet ind i labelen (og altså ikke virker ud fra for-attributen). ( <label><input ...> Teksts</label> ) Så vil tro det kan løse problemet - men hvorfor det er lavet sådan i Chrome ved jeg ikke, har ikke lige undersøgt problemet nærmere.

Indlæg senest redigeret d. 04.09.2011 21:34 af Bruger #2416

Bruger #10576 @ 04.09.11 21:52

287

Fordi du mangler at smide et <span> tag til at gruppe dem :=)
Skulle gerne gøre underværker.

HTML kode

 <span><input type="radio" id="test3" name="test3"><label for="test3">Value 1</label></span>

Indlæg senest redigeret d. 04.09.2011 21:53 af Bruger #10576

Bruger #10216 @ 04.09.11 22:55

4.283

@Benni. Den tror jeg ikke på...

Den bliver du nødt til at smide noget dokumentation for...

En label med for-attribute referende med id, skal kunne aktivere ethvert form element på en side...

Men jeg kan se at det er blevet validt at indpakke inputfelter med en label. Kan være der skal ses på at omskrive markuppen. Jo mere simpelt det kan blive, des bedre - så længe at designet ikke ryger...

Bruger #3427 @ 05.09.11 00:17

1.520

Labels virker ik i OS X..
Safari Version 5.0.5 (6533.21.1)
Firefox Version 5.0.1
Chrome Version 13.0.782.220

prøvet at tilføje:

JScript kode

 $("label").click(function(){
           console.log("test");
         });

som ikke udskriver noget når man trykket på labels..

så rodet jeg lidt rundt i dit CSS og kom frem til at pointer-events gjore at click ik virket.

CSS kode

 form > fieldset div > label {
     color: #999;
     cursor: text;
     pointer-events: none;
     position: absolute;
     left: 0px;
     z-index: 2;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     user-select: none;
     padding: 6px 6px 2px;
     white-space: nowrap;
     display: none;
     line-height: 100%;
 }

Indlæg senest redigeret d. 05.09.2011 00:34 af Bruger #3427

Bruger #10576 @ 05.09.11 07:00

287

Michael, jeg har testet det på din side med bravour, så prøv lige før du helt forkaster det :=)

Bruger #10216 @ 05.09.11 10:53

4.283

Benni, tak for opfordringen... jeg gjorde hvad du sagde, og testede samtidig også med <p> Det gjorde ingen forskel. Mit eneste umiddelbare gæt for hvorfor det har virket for dig, er at du har redigeret direkte i HTMLen hvormed at de CSS regler som normalt er tilknyttet ikke længere er aktive grundet struktur ændringer.

Kiggede på Kenneths forslag, og det har netop været pointer-events som startede problemerne i NoJS-state.

<< < 1 2 > >>

Test formular design

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler