Autor Zpráva
David1256
Profil
Dobrý den,

chtěl bych se zeptat, jakým způsobem se má vytvořit tento formulářový prvek

Funkčně se jedná o type="radio", ale nejsou tam ty zaškrtávátka, takže bych se rád zeptal, jak toto udělat.

Děkuji.
MyShare
Profil
Nazdar David1256
Jedná sa o jQuery + Html + Css Radio button-y Ukážka
alebo CheckBox máš tam aj zdroják....
shaggy
Profil
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).
David1256
Profil
MyShare:
Díky.
Chamurappi
Profil
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?
Str4wberry
Profil
(V čistém CSS (funkční od IE 9) to jde obdobně takto.)
Chamurappi
Profil
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?
Str4wberry
Profil
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ě.
Chamurappi
Profil
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.
joe
Profil
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...
Str4wberry
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: