1

Onderwerp: Peer review

In de loop der jaren heb ik zo m'n eigen manier ontwikkeld van het opzetten van een formulier. Ooit begonnen met ranzige tables en van labels had ik nog nooit gehoord. Tegenwoordig gaat het allemaal een stuk semantischer, althans, dat hoop ik smile En om dat uit te vinden wil ik jullie vragen om eens een kritische blik te werpen op m'n standaard formulier HTML + CSS en mij te vertellen wat ik allemaal verschrikkelijk fout/super goed heb gedaan.

http://jsfiddle.net/TGGgp/1/

Ik hoop dat anderen ook zo avontuurlijk zijn en hun HTML/CSS code aan een peer review willen bloot stellen.

2

Re: Peer review

Leuk forumonderwerp.

Je formulier ziet er goed uit: semantische html, toegankelijk, en het ziet er prima uit.

Blijft alleen nog wat mierenneuken over:

  • Het nut van de hover-achtergrondkleur is onduidelijk

  • Het sterretje bij het land is niet nodig, kan verwarrend zijn

  • In het algemeen (Mac, Windows) staat het vinkje vóór het label, niet er achter.

3

Re: Peer review

Ik ben niet zo van de lijstjes voor formuliervelden. Net als dat ik niet voor geordende lijstjes ben voor een zin van woorden. Bij de submitbutton onderaan voelt dat ook wat gek (smerig bijna tongue). En waarom gebruik je geen legends of geneste fieldsets voor bijvoorbeeld Geslacht en Naam?

Ikzelf probeer formulieren zoveel mogelijk zoals op http://fronteers.nl/stijlgids#formulier te HTML'en, maar styling is vaak een hel/uitdaging (vandaar ook loze spans in de legends). Voor 'vereist' sterretjes of -graphics probeer ik een em te gebruiken in het label en voor validatiemeldingen een strong (ook in het label, zoals hier), zodat ik het idee heb dat het toegankelijk is, zonder het te testen :'). Heb best lang gezocht naar een patroontje waar ik blij mee ben qua eenvoud en wat flexibel genoeg is om te kunnen hergebruiken in verschillende sites en designs.

Ben wel benieuwd naar of en hoe anderen de problemen met styling oplossen, of dat ze concessies doen in de HTML smile

4

Re: Peer review

Ziet er prima uit Thijs, formstyling blijft nou eenmaal een b%tch.

Ik gooi meestal de inputs in de labels en gebruik zelden lijstjes maar vaker p elementen (klopt niet echt, I know) of gewoon div's.

Wat ik wel wat vaker doe is, in een label, nog een spannetje zetten met daarin de labeltekst. Dus: <label><span>text</span><input/></label>

Dit stelt mij in staat om met 1 class de labels zowel boven als naast de inputs te zetten.

Verder gebruik ik voor het sterretje* vaak de tekst "(verplicht)" in een span of em (semantischer) en verander ik die in een "*" sterretje met :after{content: "*";} maar dat is natuurlijk geneuzel wink

Ik gebruik niet zovaak (meerdere) fieldsets en legend al helemaal niet. Daar gebruik ik (net als jij) gewoon een Hn voor.

5

Re: Peer review

David Hund schreef:

Ik gebruik niet zovaak (meerdere) fieldsets en legend al helemaal niet. Daar gebruik ik (net als jij) gewoon een Hn voor.

Vanwege styling of iets anders?

6

Re: Peer review

Ja <legend> is (zoals je ongetwijfeld weet) <del>een bitch</del><ins>vervelend</ins> om te stylen. Of is dat inmiddels anders? Bovendien is een Hn toch semantisch net zo waardevol (of mis ik iets met AT [ARIA] ?)

7 Laatst bewerkt door Glenn Glerum (27-09-2011 06:15:23)

Re: Peer review

Bijna alle desings waar ik mee gewerkt heb gaat de designer er vanuit dat het wel visueel duidelijk is waar het formulier voor dient en hoe het ingevuld moet worden. Ik probeer, waar dat logisch is, een formulier op te splitsen in <fieldset>s en dan in de <legend> te beschrijven wat de gebruiker in moet vullen, persoonsgegevens, creditcard, etc en welke velden er verplicht zijn.

Ik verberg de <legend> trouwens wel met css en gebruik dan net als jullie een Hn voor de caption. Het boven elkaar of naast elkaar plaatsen van formulier velden doe ik altijd met een div om de label en input heen, gaat immers toch alleen om de styling.

8 Laatst bewerkt door Mallory van Achterberg (29-09-2011 13:45:53)

Re: Peer review

David schreef:

Ik gooi meestal de inputs in de labels...

Dat doe ik niet meer vanwege te veel bugs in OSX en verschillenden AT (maar meestal VoiceOver).  Jammer, want het is wel toegestaan in de specs.

Ik doe ook geen meer twee labels per input meer, en ook is dat geldig per de specs.

Re Thijs' formulier: ik vind ook ul's en ol's overbodig en zorgen voor extra CSS.
Gelukkig doen veel AT nix met de lijst stukjes, maar kijken alleen naar formulier controls (zoals ze ook vaak met tabellen in formulieren doen).

Maar...

Edwin schreef:

Het nut van de hover-achtergrondkleur is onduidelijk

Ik vind het wel nuttig.  Wij vullen formulieren in met toetsenboord; wij zijn nerds.

Moeders vullen alles in met de muis.  5 keer langzamer en moeilijker dan met de TAB maar, dat is wat ze doen.  Een beetje :hover achtergrondkleur helpt mensen iets beter zien waar ze bezig zijn, voor hetzelfde reden waarom sommige mensen een boek lezen met zn wijsvinger of met de muis alle tekst highlighten (dat vind ik heel irritant om te zien, maar mensen zeggen ze kunnen beter zn ogen op de juiste lijn houden).

Voor dat reden doe ik vaak een highlight kleurtje op gefocussed inputs.