Co je toto za formulářový prvek?

Nazdar David1256
Jedná sa o jQuery + Html + Css Radio button-y Ukážka
alebo CheckBox máš tam aj zdroják....

MyShare:
Ty z obrázku poznáš, že je to napísané práve v jQuery? Tak to gratulujem, to si lepší ako ja.

David1256:
Ide buď o javascriptovú náhradu, alebo o šikovne naštýlované label-e k radio buttonom + skryté samotné radio buttony (ale tu si nie som istý bezproblémovou funkčnosťou vo všetkých prehliadačoch).

Reaguji na Davida1256:
„Co je toto za formulářový prvek?“
To není žádný formulářový prvek, je to nadbytečný výstřelek riskující použitelnost výměnou za subjektivně „hezčí“ vzhled.
Pokud se jako uživatel rozhoduješ, jestli vyplníš nějaký formulář, má vizáž ovládacích prvků větší váhu než jednoznačnost a předvídatelnost jejich funkce?

(V čistém CSS (funkční od IE 9) to jde obdobně takto.)

Reaguji na Str4wberryho:
Ještě bys tam mohl zmínit, že atrapa musí být <label> (nebo uvnitř <label>u společně s tím zaškrtávátkem), to z textu článku není přímo zřejmé, ale pro funkčnost je to zásadní.
A doplnit nějaký fallback, který celou atrapu ve starších prohlížečích zruší/nevyrobí, šlo by ho navázat třeba na input:empty (tuším, že tato pseudotřída má podobnou podporu jako :checked). Javascriptový fallback, který by atrapu nerušil, by vypadal tak, že by se přidal onclick="this.className = this.checked ? 'checked' : '';" a krom pseudotřídy :checked by se atrapa chytala i třídy .checked.

„je potřeba uvážit, zda uživatel pochopí, jak to celé funguje“
Nad tímhle hodně čtenářů mávne rukou a řekne si „asi jo“… to mi připadá moc zjednodušené. Je zapotřebí představit si celou škálu potenciální hlouposti uživatelů. Jakákoliv atrapa snižuje šanci, že ji uživatel pochopí, byť třeba velmi nepatrně, a je otázka, jestli fakt, že je hezká, dokáže tuto ztrátu vyvážit. Myslím, že skoro nikdy ne. Vezmu-li milion uživatelů, z nichž chce polovina vyplnit formulář, lze předpokládat, že se mezi nimi najde pár tisíc, kteří u atrapy od Davida1256 narazí — najde se v tom milionu i podobné množství těch, kdo formulář vyplnit nechtěli, ale díky úžasnějšímu vzhledu si to rozmysleli?

Děkuji za dobré připomínky.

„to mi připadá moc zjednodušené“
Zjednodušené to je, nezjednodušené povídání by bylo dost dlouhé. Domnívám se, že použitelnost atrapy bude dost záviset na celém formuláři. S tím, že atrapa vždy snižuje šanci na pochopení, nesouhlasím. Hloupí uživatelé důvěrně neznají ani obyčejný checkbox nebo radio. Pro uživatele netykajícího si s myší bude například ovládání atrapy mnohem příjemnější než strefování se do miniaturního, leč klasického, políčka. Ostatně v mobilních OS se atrapové checkboxy používají běžně.

Reaguji na Str4wberryho:
„Hloupí uživatelé důvěrně neznají ani obyčejný checkbox nebo radio.“
V tom hypotetickém milionu uživatelů jsou i lidé, kteří jsou hloupí jen trošku. Je větší pravděpodobnost, že znají systémový vzhled prvků, než že rozeznají jakýkoliv jiný.
Troufnul by sis v rámci jednoho formuláře mít několik různých vzhledů zaškrtávátka?

„Pro uživatele netykajícího si s myší bude například ovládání atrapy mnohem příjemnější než strefování se do miniaturního, leč klasického, políčka.“
Běžně se musí strefovat do podobně malých odkazů (a minimálně každý šestý uživatel si umí přizoomovat). Míra jejich nespokojenosti by neměla překročit hranici, kdy odpadnou z množiny spokojených uživatelů. Strefování jde podstatně vylepšit <label>em.

„v mobilních OS se atrapové checkboxy používají běžně“
To znamená, že jim část uživatelů dobře rozumí. Domnívám se, že neatrapovým dobře rozumí větší část.

Str4wberry:
„(V čistém CSS (funkční od IE 9) to jde obdobně takto.)“
Osobně takové řešení nedoporučuju. Prvky pak není možné ovládat klávesnicí a místo jednoduchého zaškrtnutí/odškrtnutí stránka v prohlížeči popojede dolů. label totiž nedostává focus, pokud je input skrytý. Možná by to šlo zařídit, aby label mohl focus získat díky atributu tabindex, ale pak by se (pravděpodobně) musel nastavit tabindex pro každý prvek ve formuláři...

Reakce na joa:
Dobrá připomínka, ale myslím, že to není problém vyřešit, upravil jsem ukázku.

1) <input> se skryje jinak než display: none,
2) zvýraznit vybraný checkbox mohu přes input:focus + label > atrapa


Reakce na Chamurappiho:
„Troufnul by sis v rámci jednoho formuláře mít několik různých vzhledů zaškrtávátka?“
Ano.

„Strefování jde podstatně vylepšit <label>em.“
Měřil jsi někde procenta zaškrtnutí přes <input> a zaškrtnutí přes <label>? Tipoval bych, že s hloupostí uživatelů bude směřovat k jednoznačnému zaškrtávání přímo přes <input>. Osobně taky (jako uživatel) <label>y většinou nepoužívám, protože výchozí předpoklad je, že nebude fungovat. :–)

„Běžně se musí strefovat do podobně malých odkazů.“
Že běžně musí strefovat do podobně malých odkazů, spíš napovídá, že by se měly ty odkazy dělat větší.

„a minimálně každý šestý uživatel si umí přizoomovat“
Je otázka, jestli to není spíš tak, že každý šestý uživatel si umí omylem přizoomovat. :–)

„To znamená, že jim část uživatelů dobře rozumí. Domnívám se, že neatrapovým dobře rozumí větší část.“
S tím souhlasím. Atrapami půjde formulář více zkazit než běžnými prvky. Pokud se ale udělá dobře, lze tak vytvořit hezčí vzhled a pohodlnější ovládání. Což za lehce horší identifikaci prvku může stát.