Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

Dokonalé stylování formulářů

formulář

Vytvořit dokonalý vzorový CSS styl pro formulářové prvky, to je výzva.

Co se od něj očekává? Tak především, že formuláře učiní co nejhezčí. Zejména v majoritních prohlížečích a operačních systémem. Ale zároveň plně použitelné i v těch minoritních. Nebo při zobrazení bez CSS stylů.

Přehledné, přístupné, kontrastní, čitelné, ať už uživatel používá jakýkoliv vizuální styl, jakékoliv systémové barvy.

Napsat takový mustr není žádná legrace. Ale myslím, že se mi to nakonec, po dlouhých hodinách ladění, podařilo.

Stáhněte si jej

Vzor můžete používat zcela volně a dále jej upravovat. Nicméně doporučuji zasahovat pouze do CSS vlastnosti font-size a font-family. Jinou modifikací pravděpodobně znehodnotíte křehkou funkčnost stylu.

Stáhněte si: CSS vzor pro formulářové prvky

A vyzkoušejte si, jak jej váš prohlížeč zobrazí na jednoduchém příkladu.


Související:

Komentáře

  1. habendorf #1

    he he :o)

    Jinak form * {vertical-align:middle;} se hodí skoro vždy.

    před 10 lety
  2. Shaman http://www.adaptic.cz #2

    avatar

    Kvůli kterým prohlížečům tam musí být to „darkred“?

    Jinak pěkné :-)

    před 10 lety
  3. PM* #3

    avatar

    Myslím že dle specifikace je li input přímo v labelu, tak se for=„něco“ psát nemusí. Bohužel pokuď to takhle uděláte tak IE nepochopí pro koho ten určitý label je.

    před 10 lety | reagoval [5] David Grudl
  4. piler #4

    Taká malá otázočka: nedá sa to bez tabuliek? Ja som dávnejšie niečo také univerzálne skúšal a podarilo sa mi to bez tabuliek. Akurát som dával

    label {
     width: 120px;
     display: block;
     float: left;
     text-align: right;
     margin: 0 10px 0 0;
    }
    input {
     margin: 0 0 3px 0;
    }
    
    <label for="firstname">Meno:</label><input type="text" name="firstname" value="" /><br/>

    akurat vzdy zmenim width podla dlzky textu a ty je problem: aky bude dlhy text, ak sa to bude robit dynamicky, alebo bude viac jazykovych mutacii?
    Takze tie tabulky asi fakt treba :(((

    před 10 lety | reagoval [5] David Grudl [6] pangi [27] Morty
  5. David Grudl http://davidgrudl.com #5

    avatar

    #3 PM*, …a tedy se psát musí.

    #4 pilere, Jednodušší formuláře samozřejmě lze zvládnout i bez tabulek, ale je v tom už krapet CSS akrobacie. Jelikož „horizontální formulář“, tj. formulář s label a input v jedné řádce, je ryzí případ tabulky, proč komplikovaně hledat jiná řešení?

    před 10 lety
  6. pangi http://henten.net #6

    #4 pilere, A preco preboha bez tabuliek ? Tabulky su pre formulare ako stvorene..

    před 10 lety
  7. bignose #7

    dokonalé? to je trochu nadsazené, nemyslíš? je to teda dost o ničem, nic objevného. Navíc ani nemáš horizontálně zarovnané popisky s texty ve formulářových polích – popisky jsou výš (minimálně v Opeře a zdá se, že i ve Firefoxu) a to vypadá dost blbě. A tabulka by se na to taky neměla používat – na žádné pozicování. Pokud vím, tak není problém to napozicovat čistě pomocí css – když nevíš jak na to – stačí trochu pohledat a myslím, že na toto téma najdeš spoustu vyčerpávajících článků

  8. Dero http://dero.name/ #8

    avatar

    #7 bignose, Na tento komentář jsme myslím všichni čekali. :o)

    před 10 lety | reagoval [11] David Grudl
  9. blackman http://www.blackman.cz #9

    Není problém napozicovat pole formuláře pomocí CSS, ale imho je to kravina. Části formuláře, pokud mají LABEL a nějaký INPUT (SELECT, TEXTAREA) svou strukturou k použití tabulek přímo vybízejí a blbnout s nějakým „floutováním“ mi připadá, jako škrábání se pravou rukou za levým uchem. Imho v tomto případě nějaký zatvrzelý CSS purista vymyslel kravinu, které se další, jemu podobní, ujali.

    Není problém formátovat formulář tabulkou, pokud je „čitelná po řádcích“.

    před 10 lety
  10. gwh http://www.bulant.cz/ #10

    #7 bignose, A řekneš mi, jak se zachová rozvržení formuláře bez použití tabulek?

    před 10 lety
  11. David Grudl http://davidgrudl.com #11

    avatar

    #8 Dero, jen se divím, kde se tak zdržel :-)

    #7 bignose, člověče, máš recht, to horizontální nezarovnání úplně kazilo dojem. Opravil jsem to a teď už je to božské.

    ad tabulky: hele, myslíš, že tohle už je tabulka, nebo ještě furt ne?

    před 10 lety | reagoval [23] Multimotyl
  12. dizzyn http://mobilovinky.cz #12

    Já jsem si ještě zvykl, že vedle je takové vysvětlení pro uživatele. Pěkně v pravo od každé položky, nejlépe šedou barvou.

    <tr class="required">
      <th><label for="name">Jméno: *</label></th>
      <td><input name="name" id="name" size="30" /></td>
      <td class="hint">1.) Zvolte si takové jméno, aby se vám dobře pamatovalo.</td>
    </tr>

    A teď je to dokonalé

    před 10 lety
  13. pixy http://www.wellstyled.com #13

    Skvělé, odborně na výši. Je vidět, že to máš opravdu „testováno na lidech“ a tak to má byt, tak je to spravne.

    Akorát ty lichý komnetáře ti ještě nějak drhnou, sudý jsou o dost lepší. Měl by sis opravit rnd.generátor.

    před 10 lety
  14. loyza #14

    Osobně také považuji tabulkou upravený vzhled formulářů za nevhodný. V tomto případě má tabulka za úkol pouze definovat vizuální uspořádání formuláře. S logikou stránky nemá tato tabulka nic společného. Proto je imho vhodnější vzhled formuláře upravený pomocí stylů.
    Co když si grafik za týden vzpomene, že by vlastně bylo lepší mít formulářové prvky pod sebou? Bude se rušit celá tabulka? Jenom kvůli vzhledu se bude zasahovat do HTML?

  15. Plaváček http://www.plavacek.net #15

    #7 bignose, #14 loyza

    Nemyslím, že máte tak docela pravdu. Viz třeba http://www.plavacek.net/…tabulka.html .

    před 10 lety | reagoval [18] VfB [33] bignose
  16. David Grudl http://davidgrudl.com #16

    avatar

    #14 loyzo, a co dělají takové odstavce, nadpisy nebo seznamy? Uspořádávají text do logických celků. Prohlížeč je transformuje do vizuální podoby a mozek zpětně transformuje do logického uspořádání.

    Tabulka je opět jen logickým uspořádáním prvků. Jde o jediný HTML element, který umožňuje vytvořit mřížku, tedy typické logické uspořádání formuláře. Podívej se třeba na daňové přiznání. Imitovat mřížku jinými technikami je hloupost, projev fanatického chápání evangelizace.

    Co když si grafik za týden vzpomene, že by vlastně bylo lepší mít formulářové prvky pod sebou?

    Tak předělá, co je potřeba. Nebo zasahovat do HTML je zapovězeno?

    před 10 lety | reagoval [30] loyza
  17. Plaváček http://www.plavacek.net #17

    Kruciš, že já si tady povídám s nějakým automatickým generátorem komentářů? Ach jo.

    před 10 lety | reagoval [33] bignose
  18. VfB http://waffen-microsoft.com #18

    avatar

    #15 Plaváčku, i mistr tesař se někdy utne, myslím, že když použiji label a další prvky není sebemenší důvod doplňovat formulář tabulkovým balastem, když bych chtěl zpřehlednit strukturu formuláře spíše vložím mezi dvojice (návěstí a chlívek či rádio…) vodorovnou čáru (hr)

    před 10 lety | reagoval [19] David Grudl [20] Martin [20] Martin
  19. David Grudl http://davidgrudl.com #19

    avatar

    #18 VfBe, a víš co – tak schválně. Zkus vyrobit alternativu onoho formuláře bez použití tabulky. Potom srovnáme klady a zápory.

    před 10 lety
  20. Martin #20

    #14 loyzo, #18 VfB A až to dotyčný udělá, společně se zasmějeme při tom, až já navrhnu novou podobu formuláře a milí pánové #14 loyza a #18 VfB změní vzhled svého řešení pouhou změnou CSS, bez zásahu do svatého a nedotknutelného HTML…

    před 10 lety
  21. rarouš http://www.rarous.net #21

    avatar

    Co všichni máte proti drbání se pravou rukou za levým uchem a vice versa? Vždyť je to IMHO pohodlnější a ergonomičtější, tak proč to všichni pořád zapovídaj a zesměšňujou? Nebo jde jen o to, že si nešikovná menšina utahoje ze šikovnějšího zbytku?

    před 10 lety
  22. numero #22

    avatar

    Díky, hodí se mi to. (mám plus do vzdělání :) )

    před 10 lety
  23. Multimotyl #23

    avatar

    #11 Davide Grudle, Troufnu si tvrdit, že to není tabulka, ale definiční list. Ovšem je fakt, že hranice mezi nimi, zvláště u dvousloupcových tabulek, je velmi rozmazaná.

    před 10 lety
  24. Karel #24

    Článek o ničem.. věnuj se raději svýmu programování a toto téma přenech zkušenějším v oboru (nejsem DGX ani generator komentuu)..

    před 10 lety | reagoval [25] Lukáš Havrlant
  25. Lukáš Havrlant http://atd.havrlant.net #25

    #24 Karle, Ale já bohužel nemám čas…

    před 10 lety
  26. moon #26

    Jak to tak sleduju, tak kolem roku 2004 se každý ofrfňoval nad tím, když byla stránka s table layoutem, bylo něco nesémantického, něco nevalidního. Člověk byl hned zavržen za to co si to dovolil, byl to lama, loser atp…

    V roce 2006 mi příjde, že se trend obrací, tak nějak se naopak validátoři a sémantitátoři nazvývají fanatiky a Chamurappiho výraz evangelizátoři se celkem ujal, že dgx;))

    Jen ten pixy se snaží bránit, ale argumentuje tak, jak on by sám u jiných označil za bezzubé argumentování („je to snůžka nesmyslů, demagogie“, atp)

    Takže kde je pravda? Všichni zas přejdou na HTML? Bude HTML in?

    Myslím, že ať si dělá každý formuláře po svym, tabulka, odstavce, seznam, dyt je to jedno;) hlavně že se to prodá…

    před 10 lety | reagoval [28] llook [35] David Grudl [38] David Grudl
  27. Morty #27

    Hned po přečtení článku jsem se bezhlavě vrhnul na vytváření varianty bez tabulek , ale opravdu to není ono. Souhlasím, že tabulky jsou elegantnější řešení, které ve formulářích většinou odpovídají logice uspořádání. Vždyť výsledky jsou většinou z formuláře interpretovány také jako tabulka, uspořádaný seznam vložený do databáze. Proto se přikláním k názoru, že tabulky zde nejsou čistě jen kvůli layotu.
    Při stylování jsem ostatně narazil na stejný problém jako #4 piler.

    před 10 lety
  28. llook http://llook.wz.cz/weblog/ #28

    avatar

    #26 moone, Evangelizátoři nejsou Chamurappiho výraz. S evangelizací přišel někdo jiný a kdo evangelizuje, ten je evangelizátor. Amen.

    Přejdem zas na HTML? Existuje takový názor, že od něj skoro nikdo zatím nikam neodešel. Ten názor je založený na tom, že XHTML zasílané jako „text/html“ se zpracovává jako HTML, takže tvůrcova činnost se od psaní HTML liší pouze tím, že používá konstrukce v HTML zakázané, avšak prohlížeči tolerované.

    Akorát Pixy se snaží W3C bránit a Chamurappi z něj pak dělá idiota tím, že poukazuje na jeho slabé znalosti webových standardů. Viz tohle. :-)

    před 10 lety
  29. noname http://kapler.cz #29

    no striktně řečeno, v html by nemělo být nic co definuje vzhled, proto je CSS obvykle lepší. Ano, je to složitější, ono udělat tabulkový vzhled v CSS je vždy složitější než udělat jej tabulkou. Ano, jsou i formuláře, které nelze navrhnout nějakým univerzálním způsobem přes CSS (velmi krátké labely vedly velmi dlouhých, někde required, jinde ne atp.)
    Přesto se domnívám, že pro naprostou většinu formulářů je prostě pure CSS vhodnější.
    Jinak pro datum bych také už začal používat jeden input type date, případně by se alespoň hodilo napovědět, jaký formát do kterého políčka patří.
    BTW Yes, send me some spam se mi moc líbí ;)

    před 10 lety
  30. loyza #30

    #16 Davide Grudle,

    Tak předělá, co je potřeba. Nebo zasahovat do HTML je zapovězeno?

    Podle mého názoru je HTML jazyk definující LOGICKOU STRUKTURU stránky a CSS jazyk definující VZHLED stránky. Zasahovat do HTML jenom kůvli vzhledu by mělo být zapovězeno. Nebo alespoň omezeno na co nejmenší míru.

    před 10 lety | reagoval [45] Miloš
  31. Non_E #31

    V příkladu mi chybí vnořené tabulky. Řekněme každá řádek jedna? Pozicovat přes tabulky může být pohodlnější, ale stejně budu stylovat formuláře přes css. Už jen proto, že je to tak správně. Jakou malá (nedokonalá – s javascriptem) inspirace může posloužit http://www.alistapart.com/…ssibleforms/

    před 10 lety | reagoval [46] Miloš
  32. Filosof http://blog.filosof.biz/ #32

    Jednoduché, originální, vkusné.. jen jsem čekal trochu šťavnatější texty.. nemáš tam vůbec žádnou zmínku o ovoci! Ale když přimhouřím obě bulvy, tak 9/10 :-)

    před 10 lety
  33. bignose #33

    #17 Plaváčku, nepovídáš – jen nejsem online 24/7 :-)
    Osobně jsem vždycky pro filozofii: logická struktura – html, forma – css, nicméně #15 Plaváček mi pěkně připoměl, že tu a tam se objevují případy, kdy je třeba zapojit selský rozum a nedržet se striktně naučených postupů (a to nejen ve webdesignu :-) ). Narážím tím na jeho zmínku, že formuláře v tabulkách vypadají přehledněji a příjemněji i při vypnutých stylech. To je pro mě zatím jediný argument, proč bych uvažoval o spojování formulářů s tabulkama (na druhou stranu, styly jsou tu od toho, aby stránka vypadala přehledně a příjemně). To, že je to pro kodéra jednodušší, je dost vachrlaté – každému přece vyhovuje něco jiného.

    před 10 lety
  34. zipper http://www.rswebdesign.net #34

    Ve své pubertální drzosti, kterou mi dodává anonymita internetu, si troufám tvrdit, že uspořádání formuláře (tj. label a pole vedle sebe/pod sebou) není až tolik záležitostí vzhledu, ale právě logické struktury. Já sám většinu formulářů bezproblémů formátuji pomocí CSS, nicméně zde bych si vylámal zuby a bez nejmenšího váhání zformátoval pomocí HTML, které je zde jasnou volbou. Prostě ano, CSS rád používám kdykoli a kdekoli, ale jen do té míry, kdy výhody převažují nad nevýhodami a to v případě formulářů obecně neplatí.

    před 10 lety
  35. David Grudl http://davidgrudl.com #35

    avatar

    Pánové, to je diskuse jak rozprávka :-)

    Víte, kde je váš problém? Že nepoužíváte svou hlavu, ale papouškujete, co kde prohlásila nějaká jiná autorita. Sami názor nemáte, často jste dotyčnou autoritu vůbec nepochopili, často neodhalíte, kdy se autorita mýlí, ale máte pocit, že můžete psát co je správné a někomu se smát, že to dělá špatně.

    S tím běžte na jiný blog.

    #26 moone, když ani nevíš, co to je table layout, tak si laskavě neber Pixyho do huby.


    Fajn, diskutujme, ale bez invektiv. OK?

    Nejprve si prosím uvědomte, že <table> není zapovězená značka. Že má svůj smysl. A pak mi prosím napiště svůj názor: je tohle tabulka?

    • pokud není, tak proč ne
    • pokud ano – je nějaký důvod ji neformátovat k tomu určeným tagem <table> ?
    před 10 lety | reagoval [37] moon [48] Zdenda
  36. David Grudl http://davidgrudl.com #36

    avatar

    Stejně ja zajímavé, jak se téma, že formulářové prvky je nejlépe vůbec nestylovat, může ještě v roce 2006 zvrhnout ve flamewar mezi zastánci a odpůrci tabulek, ba co víc, já stojím na opačné straně barikády…

    před 10 lety
  37. moon #37

    #35 Davide Grudle, nevim z čeho usuzujes, že nevím co je table layout, a taky jsem napsal ať si na formuláře používá každy co chce, nikomu jsem se nesmál…

    jen jsem zmínil, že jsem zaznamenal nějaký posun v názorech na věc, tak mi laskavě nepřikazuj koho si můžu brát do huby.

    před 10 lety | reagoval [38] David Grudl
  38. David Grudl http://davidgrudl.com #38

    avatar

    #37 moone, polopaticky?

    Padl tady názor, že formulářová mřížka nemá (nemůže, je to špatně) být tvořena tabulkou, tj. značkou pro definování mřížky.

    Jenže ty #26 moon najednou píšeš o „stránce s table layoutem“. Otočka o 180 stupňů. My o koze, ty o voze. Jenže z toho vyvodíš záver, že já se pokorně obracím k Chamurappimu, používám „jeho“ výrazy, Pixy se snaží z posledních sil argumentovat, ale už je to bezzubé. Takové nesmysly, až nevím, jestli se mám smát nebo žasnout…

    Je mi líto, ale Pixy (ale i Chamurappi) mají až nevšedně konzistentní názory. A právě tím, že jsi je nepochopil, tak ti jen postupně dochází určité roviny a připadají ti nové.

    před 10 lety
  39. Pavel http://www.macdesign.cz #39

    avatar

    Pokud to není ftip, tak jsem to nepochopil :)

    před 10 lety
  40. Lokutus #40

    Zajímavé, jak dgx šťourá klackem do posvátné krávy. A ještě zajímavější je, jak ta kráva bučí pořád stejně. Možná bysme jí mohli konečně zaříznout, ne?

    před 10 lety | reagoval [41] Arthur Dent
  41. Arthur Dent #41

    #40 Lokutusi, Nechápu o čem hovoříš, ale každému je přeci jasné, že to tak není. Stačí se podívat na internet – chceš snad říct, že ti všichni se mýlí? Tabulky jsou zlo, CSS je univerzální dobro, Firefox je panda červená, IE je zjevné zlo, objekty jsou dobré, assembler špatný, profesionálové nepoužívají PHP, AJAX je dobrý, Windows nemohou být bezpečné, Linux je bezpečný sám od sebe a jednoduché pravdy jsou nejpravdivější, to přece všichni vědí! ;)

    Žádné podřezávání! Jsem pro princip trvale udržitelné krávy, ať mají i naše děti do čeho šťouchat!

    před 10 lety
  42. P_V #42

    Vypadá to že na jednu stranu je tabulkový layout na formátování věcí jako formulář to pravé, na druhou stranu tu vidím, že tabulka je fuj. Takže, co třeba udělat tabulku bez tabulky, pomocí CSS?

    <html><head>
    <style>
    .table { display:table; }
    .tr { display:table-row; }
    .td { display:table-cell; padding:0.5em; }
    </style>
    </head><body>
    
    <div class=table>
      <span class=tr>
        <div class=td>prvni</div>
        <div class=td>druhy</div>
      </span>
      <span class=tr>
        <div class=td>treti prevelice dlouhy</div>
        <div class=td>ctvrty</div>
      </span>
    </div>
    
    </body></html>
  43. error414 #43

    #42 P_Ve, tak tohle je uz uchylny. Za chvilu bude jen div. heh

    před 10 lety
  44. Lukáš Havrlant http://atd.havrlant.net #44

    #42 P_Ve, A poběží to určitě i v IE?

    před 10 lety
  45. Miloš #45

    avatar

    #30 loyzo, Už jsem tě pochopil – chceš říct, že tabulka není logickou strukturou, že.

    před 10 lety
  46. Miloš #46

    avatar

    #31 Non_E, ale stejně budu stylovat formuláře přes css. Už jen proto, že je to tak správně.
    Proč je to správně? Respektive proč je nesprávné zapisovat tabulková data do tabulek? A pokud podle tebe formuláře nejsou tabulková data, pokus se, prosím, zdůvodnit, proč nejsou.

    před 10 lety | reagoval [78] Non_E
  47. Miloš #47

    avatar

    #42 P_Ve, To nakonec dopadne tak, že zavrhneme html a veškerý text budeme zapisovat „pomocí“ :before { content: a malovat budeme taky tak – http://www.designdetector.com/…erDemo2.html

    před 10 lety
  48. Zdenda #48

    #35 Davide Grudle, Jo, psát formuláře do tabulky má smysl, tabulka se používá pro výpis název pole (klíč …) – hodnota (hodnoty). Takže z hlediska sémantiky to je v naprostém oklandu, ostatní způsoby to spíše zatemňují. Takže souhlas s dgx.

    před 10 lety | reagoval [59] pixy
  49. pejay #49

    stare, ale dobre (mozno este doplnit fieldset):
    http://www.quirksmode.org/css/forms.html

    před 10 lety | reagoval [50] Roman
  50. Roman http://www.c64.sk #50

    avatar

    #49 pejay, Quirskmode je taká malá oáza pokoja a rozumného uvažovania v džungli internetového šialenstva za takými či onakými trendami. Osobne ale neznášam ak sa pod nejakým riešením začínajú objavovať linky na (úplne) iné (cudzie a priamo nesúvisiace) riešenia namiesto vlastného prístupu k prezentovanému problému a ukážky že sa to dá skutočne inak a lepšie. Podobne sa tuším stalo aj pod anglickými prekladmi článkov o vkladaní flashov ktoré pred pár mesiacmi DGX napísal… v diskusiých začali ľudia odkazovať na všelijaké kraviny namiesto toho aby to rozumne zhodnotili. Mimochodom podarilo sa niekomu (kto to použáva) vyriešiť ten IE-specific problém s doťahovaním 1 objektu ktoré neprestávalo?

    před 10 lety
  51. Fred http://js-playground.blogspot.com/ #51

    avatar

    Jde to i bez tabulek, ale je to poněkud pracné a stejně se musí předem zasahovat do html http://xy.wz.cz/form.html Zas až tak rozbitý to bez stylů není. tabulka 5 minut, bez tabulky hodinka doladění pro IE.

    před 10 lety | reagoval [53] nhek [55] Fred [57] pa3k
  52. Peter p360t Kováč http://www.fotopriestor.sk #52

    avatar

    No tiež som sa chvíľu snažil robť formuláre bez tabuliek (nejak mi vtedy nesedelo, že aj formulár je vlastne tabuľka – a nesedí mi to ani teraz, ale už to neriešim :) ), ale vždy po druhej káve som sa na to vykašľal a spravil tabuľku.

    Inak jedným z dôvodov bolo aj rozpadnutie sa pure-css pri vypnutých štýloch – to je jedna z vecí, ktorá mi fakt vadí, pretože potom sa stratí akákoľvek štruktúra a človek nevie, čo má kam vyplniť.

    A inak nevidím nejaký veľký prínos v tom, že značky <tr> a <td> vymeníme za rovnako veľkú armádu <div> a <span> tagov.

    před 10 lety | reagoval [55] Fred
  53. nhek #53

    V zásadě souhlasím – proč si hrát hodinu s ccs, když může mít člověk za 5 minut tabulkovou verzi… (viz #51 Fred).
    Napadá mne jedna oblast použití, kde by možná vyhrání si s ccs bylo přínosem pro uživatele – pokud stejný formulář používají jednak uživatelé „desktopoveho“ prohlížeče, pro které chceme mít formulář hezky v podobě

    label 1 input 1
    label 2 input 2

    a jednak se k němu přistupuje z palmpc, kde je (většinou) kvůli rozměrům a poměru stran zobrazení lepší podoba:
    label 1
    input 1
    label 2
    input 2

    I když si nejsem jistej, jestli i zde by nešlo tu původní tabulku nějak znásilnit speciálním stylem pro handheld a něčím jako

    `td, tr {
    display:inline
    }`

    před 10 lety | reagoval [54] nhek
  54. nhek #54

    #53 nhku, uff…
    #define ccs CSS
    asi bych takhle po ránu do žádných veřejných fór psát neměl ;-)

    před 10 lety
  55. Fred http://js-playground.blogspot.com #55

    avatar

    #52 Petere p360te Kováči, Ono na to není potřeba armáda divů ani tagů, mrkni se na #51 Fred do zdrojáku. Jen je rozdíl v té pracnosti a objemově hlavně v tom, že roste datová velikost css, celkový výsledek je pak o půl kB větší. V předchozím komentáři jsem nereagoval na flame tabulka versus bez tabulek, ale jsem toho názoru, že pokud to jde udělat jinak a logičtěji, proč to tak neudělat. Např. to pohlaví tam je jasný dl. Jméno a heslo by klidně mohlo být v ul. Pokud by byl u datumu narození správný a smysluplný label u položky den (label for=day Day a ne Date of Birth což je dt ), měl by to být zrovna tak dl. Email a adresa a pošli spam jsou zase v klidu ul. Jenže poměr cena výkon je nepříznivý. Doba než ostyluji formulář, tak aby byl sémanticky správný a zobrazoval se tak jak potřebuji je mnohdy delší než stylování celého webu a proto chápu proč mnozí sáhnou po tabulce, jako po nejsnažším řešení, protože výsledek není o moc horší a někdy to ani jinak nejde.

    před 10 lety | reagoval [56] Roman
  56. Roman http://www.c64.sk #56

    avatar
    [smazáno] [smazáno] Ďakujem.

    #55 Frede, Načo je dobré mať sémanticky správy obal okolo formulára, keď samotné prvky formulára nesú svoj význam. Ani bot keď príde zaspamovať diskusiu, sa nepozerá či je okolo DL, LI, DIV, alebo TD.. nájde input, pozre TYPE, pozre názov a je mu viac menej jasné čo to je. IM(ako hovoria naši anglickí priatelia)HO , najsémantickejšie je nebaliť tie prvky do ničoho používať iba značky ktoré sú k dispozícíí na popisovanie formov.

    Ako tak pozerám na tú snahu o presné umiestnenie prvkov a pekný vzhľad, napadá ma, že najideálnejšie by bolo urobiť pekné rozmiestnenie bez CSS a potom individuálne na každý formulárový prvok prásknuť presnú pozíciu cez position:absolute; ;-))).

    před 10 lety
  57. pa3k #57

    #51 Frede, Presne tak, ide to. Ale výsledok rozhodne nestojí za tú námahu. Bežne používam 200% zväčšenie textu a tie CSS hračičky sú potom často nepoužiteľné. Jednoduché veci áno. Zložitejší formulár pure CSS je masochizmus a sadizmus zároveň.

    před 10 lety
  58. Mark #58

    avatar

    Skvělá práce :-D … v mém minoritním prohlížeči to kupodivu vypadá stejně krásně jako v majoritním prohlížeči mé babičky ;-) … to muselo dát hroznou práci, máš můj respekt …

    před 10 lety
  59. pixy http://www.wellstyled.com #59

    Skoro abych už se tady bál říct, že tabulky ve formulářích taky používám, sémanticky je to podle mě čisté. Jak správně poznamenává #48 Zdenda formálně je to uspořádaný výpis dvojic „klíč-hodnota“, což jsou ve své podstatě tabulární data. To nemá se zneužíváním tabulek pro layout stránky mnoho společného.

    Pánové, ta kráva je chcíplá a pěkně nafouknutá. Proto se do ní tak dobře tím klacíkem šťourá. =)

    před 10 lety | reagoval [61] Lokutus
  60. Petr Steinbauer http://jihoceske-webstudio.cz #60

    avatar

    ANO, mohli jsme Vám to všechno pěkně ostylovat – a krásně.

    Ale my jsme řekli NE!

    Když formuláře – tak pro všechny!

    O těchto vánocích dostanou všichni návštěvníci webů jednotně ostylované formuláře – všechny systémově.

    před 10 lety
  61. Lokutus #61

    #59 pixy, Takže ta kráva vlastně nebučí, jen upouští plyny…

    před 10 lety | reagoval [62] pixy
  62. pixy http://www.wellstyled.com #62

    #61 Lokutusi, Přesně tak, pochopil's =) Štouchneš do ní a vypšoukne se obláček smradu.

    před 10 lety
  63. Roj http://roj.bloguje.cz #63

    avatar

    Super clanek!
    Dovolim si prihrat tematickou polivcicku a zavzpominat:
    http://roj.bloguje.cz/…ormulare.php

    Ale proti danemu pouziti tabulky mam zasadni a neotresitelny argument: Potrebuju to prepnutim stylu zcela prehazet!
    A to se ti s tabulkou proste nepodari. :-)

    …jeste by to chtelo vymyslet zpusob, jak pres CSS prehazet tabindex.:-)


    PS. Jestli je tohle for, tak je genialni:
    „Je-li to mo?né, pi?ti prosím s diakritikou“ :-) :-)

    před 10 lety | reagoval [68] David Grudl
  64. Chamurappi http://www.webylon.info #64

    Pojmem „tabulka“ můžeme označit prakticky cokoliv. Tabulka čokolády je také tabulkou, kde jediným smyslem existence mřížky je lehce naivní představa, že se konzument s někým rozdělí. Nebo taková tabulka skla – ta ani nepotřebuje mřížku, tu nikdy nejí více lidí. V angličtině má „table“ také řadu významů, mezi nimiž krásně vyniká „stůl“. I pokud odfiltrujeme homonyma, tak webdesignem nepostižení lidé nazývají tím slovem mnoho věcí. „Vyskočila na mě tabulka, jestli chci nainstalovat virus, tak jsem zmáčkla OK a šla na oběd“. Takže se kdysi dávno nikdo nepozastavoval nad tím, že jsou i weby tabulkové, svým způsobem to dávalo smysl.

    Žádné W3C doporučení tabulku podrobně nevymezuje, takže i jednobuňkový exemplář je plně vyhovující. Existuje ovšem několik specifických podob tabulek, kdy sémanticky smýšlející kodér element <table> neužije. Popíšu jednu z nich:

    • dva sloupce, z nichž ani jeden nepotřebuje záhlaví k tomu, aby byl pochopen
    • buňky v prvním sloupci jsou hlavičkami pro buňky v druhém sloupci
    • k jedné hlavičce v prvním sloupci může náležet více buněk v druhém sloupci

    … v případě takové tabulky jde jednoznačně o definiční seznam. Vrátíme-li se k tématu článku:

    A pak mi prosím napiště svůj názor: je tohle tabulka?

    • pokud není, tak proč ne
    • pokud ano – je nějaký důvod ji neformátovat k tomu určeným tagem <table>?

    Je to definiční seznam. Je nějaký důvod jej nevyznačit k tomu určeným elementem <dl>? K čemu jinému by měl být tento element užíván, když ne k vyjadřování dvojic klíč-hodnota? Tabulka je obecná dvojrozměrná struktura, kdežto druhý rozměr ve struktuře definičního seznamu je přesně vymezen, jde o sémanticky výstižnější prvek. Samozřejmě, že <table> je lepší než <div>, ale stejně tak je <dl> lepší než <table>.

    Mimochodem, poslední řádek oné „tabulky“ v odkázaném příkladu obsahující osamocené tlačítko do ní tak či onak sémanticky nepatří. Prázdný <th> napovídá, že je něco v nepořádku.

    před 10 lety | reagoval [67] Roman [68] David Grudl
  65. Hds #65

    Kurňa fix a já si pořád říkal, jestli se to sou hyperkorektností a slepým dodržováním každého uprdnutí té šílené krávy trochu nepřehání… a ono jo. Díky dgx, díky za tenhle článek, který dává mému selskému rozumu za pravdu :-)

    před 10 lety
  66. Hds #66

    před 10 lety | reagoval [67] Roman
  67. Roman http://www.c64.sk #67

    avatar

    #66 Hdsi, August 2003, zufalo neaktuálne.

    #64 Chamurappi, Už pri Pixiho príspevku som chcel reagovať, že asi je dosť jedno sa hádať čo je sémanticky čisté a čo je sémanticky čistejšie(či výstižnejšie). Pretože formuláre samy o sebe z hľadiska sémantiky tieto prvky okolo seba nevyžadujú. Pre pochopenie formulára postačuje použítie tagov (značiek) ktoré sú na tvorbu formulárov určené. Ak tam pridávame ďaľšie značky, vždy je to len z dôvodu toho, že chceme ovlyvniť jeho vzhľad, alebo nie?

    V takom prípade, je naozaj jedno čo okolo tých formulárových prvkov dáme. A ak už tam chceme niečo dať, logicky bude s tým najjednoduchšia práca ak použijeme table,tr,td atd. ;-) .

    před 10 lety | reagoval [75] Chamurappi [81] Roman
  68. David Grudl http://davidgrudl.com #68

    avatar

    #64 Chamurappi, nejprve tedy… vážím si snad prvního inteligentního příspěvku na téma „tabulky ne“.

    Zároveň se musím ohradit vůči „rozumně smýšlejícímu kodérovi“ a jeho třem kritériím, co nejsou tabulky. To je samozřejmě demagogie a proti takové nemá smysl argumentovat.

    Názor, že formulář by se mohl formátovat pomocí definičního seznamu, chápu, nakonec jsem tak několik webů vyrobil. Stejně tak pochopím argumenty pro <ol>, <ul>. Sémanticky a vizuálně dobrý formulář může použít členění do bloků <div>. A samozřejmě, jak uz tu bylo zmíněno, lze použít <table>.

    Rozumně smýšlející kodér je ten, kdo si pro konkrétní případ zvolí vhodné značky. Resp. jedny ze několika vhodných značek.

    #63 Roji, aj jsem tě chtěl původně odkázat v článku, ale pak jsem tě neodkázal, neboť jsem dorostl do fáze, kdy bych neměnil ani tu barvu ;)

  69. Arthur Dent #69

    #68 Davide Grudle, „Rozumně smýšlející kodér je ten, kdo si pro konkrétní případ zvolí vhodné značky. Resp. jedny ze několika vhodných značek.“ – Zbláznil ses? Ty chceš říct, že neexistuje jediné správné řešení? To jako naznačuješ, že všechny ty spory byly úplně zbytečné a že nikdo nemá Ultimátní Pravdu? No panejo… :)

    před 10 lety | reagoval [75] Chamurappi
  70. Roj http://roj.bloguje.cz #70

    avatar

    #68 Davide Grudle, Jsem fanousek fanousku ještě alternativnějších point!

    před 10 lety
  71. AlešD http://adobrovolny.net #71

    avatar

    Formuláře bez tabulek: zkusil se někdo na to podívat s vypnutým CSS? Přístupnost a použitelnost sama.

    Jednoduché třeba ještě ujdou, ale něco složitějšího…

    před 10 lety | reagoval [72] David Grudl
  72. David Grudl http://davidgrudl.com #72

    avatar

    #71 AlešDe, tak nevím, jestli už jsem z toho tak zblblý, že váhám, jestli to není ironie.

    Pokud ne, pak zcela souhlasím. Zmíněný formulář vypadá s vypnutnými styly prakticky totožně. Prostě formuláře pokud možno nestylovat vůbec.

    před 10 lety
  73. poiuz #73

    avatar

    #68 Davide Grudle, Proč je to demagogie? Napsal definici definičního seznamu a prohlásil, že sémanticky smýšlející kodér na definiční seznam nepoužije tabulku, což je imho absolutně korektní. Seš demagog.

    před 10 lety | reagoval [74] David Grudl
  74. David Grudl http://davidgrudl.com #74

    avatar

    #73 poiuzi, Právě jsi pěkně demonstroval, proč je to demagogie. „Sémanticky smýšlející kodér na definiční seznam nepoužije tabulku“ – ano, to je korektní. Jenže pozor, diskuse nebyla o definičních seznamech, ale o příkladu formuláře. Pro nějž přichází v úvahu hned několik sémanticky korektních vyznačení.

    Demagogií je označit formulář definičním seznamem a poté říct, že je hloupost definiční seznam kódovat pomocí tabulky. Přesune se tak ohnisko zájmu a všichni přikyvují: „no jistě, jen hlupák definiční seznam dělá tabulkou“. Šikovné, že?

    před 10 lety
  75. Chamurappi http://www.webylon.info #75

    #67 Romane, Samozřejmě, že je to úplně jedno.

    A ak už tam chceme niečo dať, logicky bude s tým najjednoduchšia práca, ak použijeme table, tr, td atd.

    Jak kdy. Nastylovat definiční seznam tak, aby vypadal podobně, je triviální (ale ano, je to práce navíc). V tabulce tě navždy svazuje mřížka, což může být nežádoucí.

    #68 Davide Grudle, Čísly v chlupatých závorkách značím příslušný bod v Arthurově pětadvacítce.

    Zároveň se musím ohradit vůči „rozumně smýšlejícímu kodérovi“ a jeho třem kritériím, co nejsou tabulky.

    To není reakce na mě, že ne?

    • Psal jsem o „sémanticky smýšlejícím kodérovi“, nikoliv o „rozumně smýšlejícím“ {8}. V tom je značný rozdíl. Odvozovat rozumnost kodéra ze vztahu k sémantice bych se neopovážil.
    • Nepsal jsem, že tabulka vyhovující třem kritériím není tabulka {5}. Naopak. Každý definiční seznam je i tabulka. Jak jsem již minule naťukl, zahnáno do extrému: libovolný blok kódu můžeš uzavřít do jednobuňkové tabulky a také to není nic proti ničemu, neboť <table> z definice značí pouhopouhou dvojrozměrnou strukturu, jejíž rozměry nejsi povinen nijak využívat. Každé <p> i každý <h1> můžeš obalit do <td>, <tr>, <tbody> a <table>, klidně několikanásobně a brána do „sémantického nebe“ zůstane tvé duši otevřena i v době, kdy tě za to nějaký CSS-fanatik rituálně rozčtvrtí a vzteky sežere (opět — aniž by se s někým rozdělil).

    Bavíme-li se o sémantice v HTML, hledáme zpravidla nejspecifičtější řešení opřené o zažité či někým standardizované definice elementů a atributů. Nadpis můžeme psát <table class="nadpis1"><tr><td>takhle nebo <div class="nadpis1">takhle a pořád je jasné, že to je nadpis. Pro tento speciální druh blokového elementu ovšem existuje specializovaný element <h1>, a ten je tudíž považován za čistší řešení. Stejně tak menu: můžeme seznam odkazů zavřít buď do obecného bloku <div>, nebo do obecného seznamu <ul>, nebo do k tomu určeného <menu>.

    To je samozřejmě demagogie a proti takové nemá smysl argumentovat.

    Kdyby to byla demagogie, tak naopak má smysl proti ní argumentovat {17}. Ba dokonce by to bylo vhodné, neboť kvalita demagoga se měří množstvím jím oblbnutých, nikoliv množstvím jej obviňujících.

    Rozumně smýšlející kodér je ten, kdo si pro konkrétní případ zvolí vhodné značky. Resp. jedny z několika vhodných značek.

    Přesně tak {9}. Nerozumím, proč jsi mě zašoupnul do přihrádky „tabulky ne“. Moc se mi po boku těch <div>ných fanatiků nelíbí, páchnou nafouknutým telecím. Přiznávám, že během posledních sedmi set let jsem žádný formulář definičním seznamem neřešil.

    Ozval jsem se, jelikož zde někteří dělají z výpisu dvojic klíč-hodnota typický příklad tabulky. A také proto, že u mě hromada lidí zčistajasna hledala Googlem Pixyho :-)

    #69 Arthure Dente, V užších kontextech existuje Ultimátní Pravda. Jediná. Správná. A většinou zbytečná. Kontext, v němž se pohyboval můj příspěvek, se zabýval sémantikou (nikoliv rozumností). Z hlediska sémantiky platí, že specifičtější element je lepší.

    před 10 lety | reagoval [76] David Grudl [89] Roj
  76. David Grudl http://davidgrudl.com #76

    avatar

    #75 Chamurappi, za záměnu „rozumně“ vs. „sémanticky“ se omlouvám, mea culpa. Reakce tím vyzněla jinak, nicméně na postoji trvám.

    Ať tu nemícháme dvě věci. Dvojici klíč-hodnota realizuji jako dvojici label-input. Tím jsem učinil sémantice za dost. Tedy té smysluplné sémantice, co má skutečně alespoň nejaký efekt v reálném světě.

    Pak přichází na řadu formát formuláře. Pro ten někdy zvolím mřížku. Řeším rozložení prvků do mřížky a použiji <table>.

    Zdůrazňuji, že mám na mysli „formát“ ve smyslu „logického uspořádání prvků“, tedy ve smyslu HTML, nikoliv CSS.

    Tuto analýzu provádím jako sémanticky smýšlející kodér a výsledkem je tabulka. Toť vše.

    Sémanticky smýšlející kodér, opakuji sebe #68 David Grudl, pro konkrétní případ zvolí vhodné značky. A rozhodně to nemusí být zrovinka definiční seznam.

    před 10 lety | reagoval [84] Chamurappi
  77. pixy http://www.wellstyled.com #77

    Aby bylo úplně jasno (tedy z mého úhlu pohledu): formulář není definiční seznam. Ano, má mu blízko, ale jeho pravý smysl (definice nějkaého pojmu a jeho popis) zcela nenaplňuje. Stejně tak má blízko k tabulce – nejde totiž nutně jen o dvojici hodnot, může to být trojice, čtveřice i více (může zde být např. label, hodnota, popis, instrukce, vzor, příznakové symboly, výsledek validace atd.). A tady už by definiční seznam zcela selhal.

    Můžeme se dohadovat, jestli má formulář sémanticky blíže k definičnímu seznamu nebo k tabulce nebo k něčemu jinému, a může to být možná zajímavá akademická debata. Ale výslovně není formulář ani jedno z nich – formulář je prostě formulář a jeho prvky (label, fieldset apod.) dokonale naplňují potřebné sémantické vyznačení. Bohužel tyto prvky mají nedostatečnou podporu pro stylování v CSS, proto tady mírně uhýbáme a části formulářů se snažíme napasovat ještě do jiných struktur. Je od nás hezké, že se snažíme nadále udržet sémantický význam v maximální míře – ale je už naopak hloupé, když tuto činnost někdo začne považovat za primární a bude tvrdit, že formulář JE SEZNAM typu XYZ, nebo že formulář JE TABULKA. Není. Formulář je formulář a jeho podkonstrukce mají k některým jiným konstrukcím HTML blíž než k jiným. To je celé.

  78. Non_E http://rada.borec.cz #78

    #46 Miloši, Ze sémantického hlediska je podle mě formulář na stránce jen hromada dvojic klíč-hodnota. To se vyjadřuje pochopitelně ve formuláři: hodnota jako input a nejbližší (a proto imho semanticky nejpřiléhavější) zařazení klíče je element label. Zastávam názor, že formuláře se vyplňují postupně (nebo se jedná o možnosti) a tak v duchu odkazu na ALA tyto dvojce uzavřu do číslovaného seznamu.

    Použitím tabulky se podle mě snažíte vyjádření vztahu klíč-hodnota zbytečně opakovat. (Uzavíráte h1 do dalšího elementu h1?) Otázka tedy je, jestli má použití tabulky sémantický význam nebo se jedná o ulehčení práce se stylováním (jak vyplýva ze článku).

    Jak v #77 pixy píše Pixy, tak se jedná skutečně o akademickou debatu.

    před 10 lety | reagoval [84] Chamurappi
  79. Arthur Dent #79

    #77 pixy, Rozvinu ideu známým „Co by kdyby“ obratem: Formulář by byl sémanticky „dobrý“ např. takto (hrubá struktura):

    <form>
     <fields>
      <field required="yes">
       <label>Jméno</label>
       <data><input....></data>
       <description>Jméno uživatele</description>
       <instruction>
        Pomocí klávesnice napište svoje jméno
      </instruction>
      </field>
      <field required="yes">
       <label>E-mail</label>
       <data><input.... mask...></data>
       <description>E-mail uživatele</description>
       <instruction>
         zadejte e-mail ve tvaru adresa@domena.cz
       </instruction>
      </field>
      <field>
       <label>Pohlaví</label>
       <data><radio....></data>
       <description>Pohlaví uživatele</description>
       <instruction>
        Zkontrolujte a vyplňte dle reality
      </instruction>
      </field>
     </fields>
     <actions>
      <submit><button....></submit>
      <revert><button...></revert>
      <save><button...></save>
      <default><button...></default>
     </actions>
    </form>

    Zhruba takhle by mohl vypadat „sémantický formulář“. Formulář sestává z polí (field), každé pole formuláře má nějaký název, nějaký prostor kam uživatel něco vyplní, může mít popis, může mít instrukce pro vyplnění, může mít další části, pole může být označeno jako povinné… A formulář má definovány nějaké akce, např. odeslání či návrat k předchozím hodnotám, vyvolání předvyplněných hodnot apod. Takhle nějak vypadá „sémantický formulář“ v čisté teorii. Není to ani tabulka, ani definiční list, ani nic z toho, přesně jak píše Pixy: Formulář je formulář a Solnohrad je hlavní město Solnohrad.

    A protože takové „opravdu sémantické“ značky nejsou k dispozici, tak si je HOLT musí kodéři nahradit jinak. A je víceméně už jedno, jestli to udělají DIVama, SPANama, Pčkama, zda „field“ nahradí TR a label, data, description a instruction TDčkem nebo zda LABEL nahradí DT a zbytek různými konstrukcemi vnořenými do DD, „sémantické“ není nic z toho a můžete se pouze přít o míře „nesémantičnosti“. Ale smysl to moc nemá. Pokud se ovšem chcete přít, tak prosím:

    <form>
     <fieldset>
      <div class="field required">
       <label>Jméno</label>
       <div class="data"><input....></div>
       <div class="description">Jméno uživatele</div>
       <div class="instruction">
         Pomocí klávesnice napište svoje jméno
       </div>
      </div>
      {...}
     </fieldset>
     <div class="actions">
      <div class="submit"><button....></div>
      <div class="revert"><button...></div>
      <div class="save"><button...></div>
      <div class="default"><button...></div>
     </div>
    </form>

    A vyvraťte mi, že toto není ten sémanticky nejlepší tvar HTML formuláře z těch špatných, které jste zde jmenovali.

    před 10 lety | reagoval [84] Chamurappi
  80. Arthur Dent #80

    Ještě PS pro vyvraceče: V HTML slouží DIV defacto jako „prázdná značka“ v případech, kdy kodér nemá „sémanticky odpovídající“ značku k dispozici… Takže z porovnání možných přepisů MOJÍ IDEÁLNÍ značky <field> mi stále vychází nejlépe DIV (coby univerzální náhrada neexistujících značek), pak P (teoreticky by to mohl být odstavec) a TR či dvojice DT+DD je prašť jako uhoď náhrada stylem „je tam víc položek, tak by to mohl být řádek tabulky“ nebo „je tam nějaký popis a nějaký zbytek, tak by to mohlo fungovat jako definice“; obojí je jako zjišťovat čas z holínek, když nemám hodinky, protože přeci i ty holínky jsem si ráno natáhnul.

    před 10 lety | reagoval [84] Chamurappi
  81. Roman http://www.c64.sk #81

    avatar

    #77 pixy, Presne to som chcel týmto komentárom povedať → #67 Roman. A som poctený tým, že so mnou súhlasí niekto, komu nesiaham ani po päty. ;)

    před 10 lety
  82. zirafka http://zirafka.cz #82

    avatar

    mas digitalni holinky?

    před 10 lety | reagoval [83] Arthur Dent
  83. Arthur Dent #83

    #82 zirafko, Digitální holínky se nenatahují, z nich čas nezjistím!

    před 10 lety
  84. Chamurappi http://www.webylon.info #84

    #76 Davide Grudle,

    Dvojici klíč-hodnota realizuji jako dvojici label-input. Tím jsem učinil sémantice za dost. Tedy té smysluplné sémantice, co má skutečně alespoň nejaký efekt v reálném světě.

    Nicméně seznam dvojic pak realizuješ jako tabulku, nikoliv jako seznam dvojic. Ale ano, učinil jsi sémantice za dost. Zřejmě přeci jen jsi sémanticky smýšlející tvor. Gratuluji.

    #77 pixy,

    Aby bylo úplně jasno (tedy z mého úhlu pohledu): formulář není definiční seznam. Ano, má mu blízko, ale jeho pravý smysl (definice nějakého pojmu a jeho popis) zcela nenaplňuje.

    Stejně tak zápis rozhovoru realizovaný skrze <dl>, kdy dáváme do <dt> jméno hovořícího a do <dd> vše vyřčené, neodpovídá zmíněné představě definičního seznamu (jméno také není pojem), a přesto je to nyní nejčistší možné řešení.

    Stejně tak má blízko k tabulce – nejde totiž nutně jen o dvojici hodnot, může to být trojice, čtveřice i více. A tady už by definiční seznam zcela selhal.

    Samozřejmě.

    #78 Non_E,

    hodnota jako input a nejbližší (a proto imho semanticky nejpřiléhavější) zařazení klíče je element label

    Element <label> se může vztahovat pouze k jednomu formulářovému prvku, což nemusí být dostačující.

    #79 Arthure Dente,

    „sémantické“ není nic z toho a můžete se pouze přít o míře „nesémantičnosti“

    Bavíme se o sémantice v HTML. Ne o nějaké iluzorní sémantice při použití vlastních názvů k vlastním účelům. Tvůj ideální <field> je jen a pouze tvůj. Ty mu přisuzuješ význam. Neopírá se ani o zažité zvyklosti, ani o definici nějakého standardizačního tělesa. Jeho sémantiku bychom mohli pouze hádat z jeho jména, kdybys nám ji sám nevyzradil.

    Když vezmu tvůj ideální příklad, nahradím v něm <field> za <tetička> a řeknu, že políčko formuláře je <tetička>, tak je to pořád stejně ideálně sémantický formulář. Když pak vezmu tenhle svůj příklad, nahradím v něm <tetička> za <div class="field"> a řeknu, že políčko formuláře je <div> s třídou „field“, je to pořád stejně ideálně sémantický formulář. Pořád se opírá o pochopení nikde nedefinovaných názvů. Že tak činí pomocí atributu class a nikoliv pomocí názvů elementů, není podstatné. Ideální či špatné jsou oba dva stejně.

    V daném kontextu (tedy v HTML) hledáme nejlepší řešení z možných, nikoliv nejméně špatné ze špatných.

    #80 Arthure Dente,

    V HTML slouží DIV defacto jako „prázdná značka“ v případech, kdy kodér nemá „sémanticky odpovídající“ značku k dispozici…

    Prapůvodně značil oddíl dokumentu (division). Až HTML 4 mu tento význam odňalo. Nebyl to jediný element, jehož význam se vyvíjí.

    Nemá-li kodér k dispozici ideální element, jehož definice by úplně a neotřesitelně vyjadřovala význam dat (to nemá takřka nikdy), hledá z existujícího sortimentu ten nejpříbuznější. Na seznamu vhodných kandidátů by měl být <div> mezi posledními.

  85. Arthur Dent #85

    #84 Chamurappi, „Na seznamu vhodných kandidátů by měl být <div> mezi posledními.“ Proč? Dojem nebo dogma? Nebo názor? Čím je podepřený?

    Já svůj protinázor postavím takto: Každá značka je sémantickým vyjádřením nějaké funkce, kterou v dokumentu zastává daný prvek. Pokud nemám k dispozici značku, která vyjádří přesně funkci nějakého prvku, můžu buď použít značku jinou na základě nějaké vzdálenější podobnosti funkce, nebo mohu použít značku „prázdnou“, tedy takovou, která funkci prvku blíže nespecifikuje, pouze říká „toto je prvek“. První řešení říká „prvky formuláře by měly být uspořádány nějak jako tabulka, tak je uzavřu do tabulky“, druhé řešení říká „tady je nějaký zvláštní prvek, jehož funkce není přesněji specifikována“. Mně připadá lepší raději funkci nespecifikovat než ji specifikovat nesprávně, a to proto, že případný sémantický analyzátor nebude zmaten „falešnými“ tabulkami či „falešnými“ definicemi. Definice pojmu „jméno“ přeci není „input box“.

    „V daném kontextu (tedy v HTML) hledáme nejlepší řešení z možných, nikoliv nejméně špatné ze špatných.“ – máte-li k dispozici pouze špatná řešení, tak jsou výrazy rovnocenné.

    „Bavíme se o sémantice v HTML.“ – Nikoli, bavíte se o sémantice. Dohadujete se co je sémanticky lepší. Já jen poznamenal, že sémanticky jsou nesprávná všechna navržená řešení, vyšel jsem z řešení sémanticky správného, byť zapsaného v „pseudokódu“ a implementoval jsem ho do reálného jazyka. Udělal jsem tedy to samé, co dělají programátoři při návrhu algoritmů: Zapíšou si postup pseudojazykem tak, aby byl správný (sémanticky…) a pak jej implementují s většími či menšími obtížemi v reálném jazyce. To co mi vyčítáš je totéž jako kdybys mi vyčítal, že si před psaním programu v C do algoritmu v pseudokódu budu psát příkazy jako „všechny prvky nastav na 0“, když nic takového v programovacím jazyku C není!

    před 10 lety | reagoval [92] Chamurappi
  86. pixy http://www.wellstyled.com #86

    #84 Chamurappi,

    … zápis rozhovoru realizovaný skrze <dl>… je … nyní nejčistší možné řešení.

    A proč jako, proboha? To je nějaká ministerská vyhláška, která mi unikla? Mně to třeba nepřijde ani trochu „čisté“.

    před 10 lety | reagoval [87] Arthur Dent [92] Chamurappi
  87. Arthur Dent #87

    #86 pixy, Světe div se: „Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.“ (http://www.w3.org/…t/lists.html)

    před 10 lety | reagoval [88] pixy [90] Arthur Dent
  88. pixy http://www.wellstyled.com #88

    #87 Arthure Dente, „An application, for example“ a „nejčistší možné řešení“ – já tam cítím velmi podstatný rozdíl. Ty ne?

    před 10 lety | reagoval [90] Arthur Dent [92] Chamurappi
  89. Roj http://roj.bloguje.cz #89

    avatar

    #75 Chamurappi, #84 Chamurappi – ty se mi libis, chlape! :-)

    před 10 lety
  90. Arthur Dent #90

    #88 pixy, Ale no jistě. Tím „světe div se“ vyjadřuju podiv nad tím, že je něco takového zmiňováno coby „example“, když o kousek výš píšou o „term and definition“. Ale možná by stálo za to přejmenovat „definition list“ na „doubles list“. A v souvislosti s #87 Arthur Dent zodpovědně prohlašuju: Ničemu už nerozumím a až uvidím telefonní seznam jako DL, tak kývnu na to, že Josef Novák je termín a jeho definice je „linka 213“. Když může být hovor seznamem definic, tak může být i tabulka formulářem, tlačítko jednosloupcovou jednořádkovou orámovanou tabulkou, básnička číslovaným seznamem nebo Trabant autem, a podobné disputace jsou pak opravdu jen dohady teoretiků o tom, jestli je lepší chcíplou krávu dřív podojit nebo nakrmit a zároveň dokázat, kdo kravám víc rozumí. Éljen, dále nemá smysl.

    PS: Osobně si vystačím s konstrukcí „p – label – input – /p“, popř. s nějakým tím SPANem. Není sice tak krásně sémantická jak teoretici žádají, ale dokud teoretici nebudou vědět co vlastně žádají, tak je, myslím, víc než dobrá.

    před 10 lety | reagoval [91] David Grudl
  91. David Grudl http://davidgrudl.com #91

    avatar

    Díky za pěknou diskusi.

    Opojení ze standardů a čistého webového jazyka je krásné. O to horší pak je kocovina po vystřízlivění.


    #90 Arthure Dente, v definičním seznamu může být více termínů spojeno s více definicemi, tedy nejde o doubles, ale n-n relations. Já to tak vnímám, název „definiční seznam“ beru jako kryptonázev :-)

    před 10 lety | reagoval [92] Chamurappi
  92. Chamurappi http://www.webylon.info #92

    #85 Arthure Dente,

    „Na seznamu vhodných kandidátů by měl být <div> mezi posledními.“ Proč? Dojem nebo dogma? Nebo názor? Čím je podepřený?

    Praktické důvody. V tom si snad neodporujeme. Když víš, že nemáš k dispozici ultravýstižný element <seznam-roztomilých-mrtvol>, tak asi nesáhneš po <div>u, ale třeba po <ul>. Až kdybys neměl k dispozici seznam, tak je na řadě <div>.

    Mně připadá lepší raději funkci nespecifikovat než ji specifikovat nesprávně, a to proto, že případný sémantický analyzátor nebude zmaten „falešnými“ tabulkami či „falešnými“ definicemi.

    Říkal jsem, že <div> by měl být mezi posledními na seznamu vhodných kandidátů. Zde je pudlí jádro — nepovažuješ <dl> za vhodnou strukturu pro tento případ.

    Definice pojmu „jméno“ přeci není „input box“.

    Definiční seznam musí být seznam definic? Proč? Dojem nebo dogma? Nebo nádor? Název elementu není rozhodující, význam se může postupně přechylovat. Stejně jako <div> ztratil svoji rázovitost částečně i <dl>. Příkladů znám více.

    Kdybych chtěl v HTML neprůstřelně vyjadřovat definice, užíval bych na příslušných místech k tomu určený (mladší) řádkový element <dfn>.

    „Bavíme se o sémantice v HTML.“ – Nikoli, bavíte se o sémantice.

    Asi jsem někdy ztratil nit. Kdy jsme se přestali bavit o HTML?

    To, co mi vyčítáš, je totéž, jako kdybys mi vyčítal, že si před psaním programu v C do algoritmu v pseudokódu budu psát příkazy jako „všechny prvky nastav na 0“, když nic takového v programovacím jazyku C není!

    Ne. Vyčetl jsem ti, že překladem pseudokódu <xyz> na reálný kód <div class="xyz"> nedochází ke ztrátě (ani k nabytí) sémantické správnosti, neboť se nikterak nezměnilo názvosloví (ani jeho autor), pouze jsi ho v HTML přesunul na místo k tomu určené. Atribut class není prezentační berlička, doplňuje význam elementu.

    Příslušnou analogii k jazyku C si, prosím, domysli sám. A ať je přesvědčivá!

    #86 pixy,

    A proč jako, proboha? To je nějaká ministerská vyhláška, která mi unikla?

    To je takzvaná „past na Pixyho“. Když už se rochňáme v útrobách sémantiky, zkusil jsem, jestli vůbec víš, jak je definiční seznam v HTML již devět let definován.

    Na WWW byl odjakživa <dl> užíván pro dvojsložkové seznamy jméno-hodnota, nikoli výhradně pro vysvětlování pojmů (ukázka z listopadu 1990).

    Doporučení HTML 4 o sedm let později tuhle praxi oficiálně přiznalo. Za domácí úkol doporučuji nastudovat celou tamní kapitolku o seznamech. Recept totiž může být vylepšen přidáním hrozinek.

    #88 pixy,

    „An application, for example“ a „nejčistší možné řešení“ – já tam cítím velmi podstatný rozdíl.

    Ideální element pro dialog je <dialog> z návrhu HTML 5 (části WA 1). Dokud nemá dostatečnou podporu, upřednostňuji <dl>.

    #91 Davide Grudle,

    Já jsem opojen de facto standardy více než těmi de jure. Kocovina nehrozí :-)

    před 10 lety | reagoval [93] Arthur Dent [95] pixy [96] Chamurappi
  93. Arthur Dent #93

    #92 Chamurappi, Na jiném místě sice nabádám „nebavte se s právníky o právu a s fanatiky o ničem“, ale zde učiním výjimku.

    „Když víš, že nemáš k dispozici ultravýstižný element "seznam-roztomilých-mrtvol“, tak asi nesáhneš po <div>u, ale třeba po <ul>"

    Jak správně říkáš: Pokud nemám seznam-roztomilých-mrtvol, tak použiju seznam. Něco jako takový „krok zpět“ či „slevení z požadavků“. Použiju ho spíš než třeba seznam-dvojic, což by byl „krok zpět a úkrok stranou“.

    Takže pokud nemám k dispozici „prvek formuláře“, tak použiju CO? „prvek“, „položku seznamu“, „položku definičního seznamu“ nebo „políčko tabulky“?

    Ale OK, když se podržím tvého slovíčkaření: DIV je tedy „nejméně vhodný“, ostatní jsou přímo „nevhodné“. Zároveň není žádná vhodnější značka. Ty tvrdíš, že DIV je „poslední na seznamu vhodných“, já říkám, že pokud (a dokud) na tom seznamu nejsou jiné, je zároveň i první.

    Definiční seznam musí být seznam definic? Proč?

    Rozmar starého zbrojnoše, co má za to, že „seznam“ je „seznam“, že „definition“ znamená „definice“, že „definice“ že je „slovní vymezení obsahu pojmu či výklad významu slova (termínu, výrazu) uvedením jeho základních, typických znaků“ a co si holt nezvykl na to, že se „definičním seznamem“ může myslet „seznam jakýchkoli dvojic“ nebo že se „celebritou“ může označit „každý kdo se mihnul na TV obrazovce“.

    Vyčetl jsem ti, že překladem pseudokódu <xyz> na reálný kód <div class="„xyz“"> nedochází ke ztrátě (ani k nabytí) sémantické správnosti, neboť se nikterak nezměnilo názvosloví (ani jeho autor), pouze jsi ho v HTML přesunul na místo k tomu určené. Atribut class není prezentační berlička, doplňuje význam elementu.

    V tom případě mi tedy vyčítáš něco, o co mi šlo. Mám totiž takový dojem, že chcete-li se bavit o tom, zda je „správnější“ tabulka, definiční seznam nebo odstavce s LABELem, tak by bylo dobré mít nejprve onen „ideální stav“, který je „správný“, a pak při posuzování porovnávat, kolikrát bylo od tohoto ideálu sleveno, popř. kolikrát byl posunut význam. Z této poměrně jednoduché úvahy vyplývá, že „správnější“ (ve smyslu menší zvěrstvo) bude to řešení, které vzniklo z ideálu nejmenším možným počtem změn. Je-li ideálem „šikmo přeškrtnutý text“, tak první ústupek je „přeškrtnutý text“, druhý ústupek je „text“ a třetí (= krok stranou) je třeba „blikající text“.

    Takže celá disputace záleží na tom, zda je můj příklad v pseudokódu oním ideálem. Jeho „překlad do HTML“ je zhruba podobný „překladu tvého komentáře do jazyka, tvořeného jen jednoslabičnými českými slovy“. Můžeme se dohadovat, jestli to má být FIELD či ELEMENT či ITEM nebo snad FORM-SEMANTIC-CONTAINER, ve chvíli kdy nic z toho není k dispozici je to spíš akademická diskuse (zde žvanění o chcíplé krávě). Je jedno jak si prvky ve struktuře pojmenuješ, je jedno kdo je autorem onoho názvosloví, jde o to, zda tvé označení respektuje logickou strukturu, zda respektuje význam prvků a zda ten význam neposouvá jinam.

    Jinak – bavit se o „sémantice v HTML“ má stejný smysl jako „bavit se o sémantice v jednoslabičném jazyce“ a dohadovat se, zda pro vyjádření pojmu „páprda“ použijete „muž“, „chlap“, „pán“ či „kmet“. S tím rozdílem, že vy jste v téhle diskusi nezačali od „páprdy“ ani jste k němu nedospěli, jen na sebe poštěkáváte, zda je líp psát pán či kmet. A pak též proč kdo řek to co řek či jak to chtěl říct a co kdo měl říct; tak tu spor jen kvet'. Jak dáš tu řeč, hned je tu blb, co ví líp než ty cos řek' za lež a proč jsi ty sám blb – že snad víš, co je muž a co chlap a že je líp psát chlap, když to ví i ten a ten.

    (Holt v JDNSL jsem neměl jiný sémanticky vhodnější JDNSL element na „zastánce svaté krávy“, „muž“ bylo příliš obecné, tak jsem použil „blb“, nevadí to, že ne? On se ten význam přechyluje, už to není tak dogmatické jako před lety…)

    před 10 lety | reagoval [96] Chamurappi
  94. Arthur Dent #94

    Ještě PS pro Chamurappiho k tomu seznamu roztomilých mrtvol: UL či OL je seznam, který neříká, čím jsou jeho prvky. „ordered“ nebo „unordered“ se vztahuje k tomu seznamu samotnému, nikoli k jeho prvkům. DL naopak říká, že jeho prvky jsou dvojice (tvrdíš ty; definice jsem si myslel já). Mimochodem, už ses díval do „bookmarks.html“ od Mozilly či Netscape? Struktura „dl – dt – dt – dt – /dl“ mi připadá jako opravdu hodně volný výklad „definition list“ :)

    Rozdíl je tedy stejný jako mezi „roztomilým seznamem“ a „seznamem roztomilých“ – to první je „obecný seznam“ s nějakou vlastností, to druhé je „seznam něčeho konkrétního“, kde to NĚCO má konkrétní vlastnost. Pro „seznam hříšníků“ můžeš celkem bez obav z posunutí smyslu použít „roztomilý seznam“, vznikne „roztomilý seznam hříšníků“. Inu, co už, jiná forma… Použiješ-li ovšem druhou variantu, vznikne „seznam roztomilých hříšníků“, což už poněkud posouvá význam…

    Já vím, v HTML není nic z toho… Ještě že při přemýšlení o něm nemusím přemýšlet v něm… :)

    před 10 lety
  95. pixy http://www.wellstyled.com #95

    #92 Chamurappi, Bohužel musím konstatovat, že splývají-li někomu takovouto měrou pojmy „upřednostňuji <dl>“ a „<dl> je nejčistší možné řešení“, nemůže být debata příliš plodnou.

    před 10 lety | reagoval [96] Chamurappi
  96. Chamurappi http://www.webylon.info #96

    #92 Chamurappi,

    Kdybych chtěl v HTML neprůstřelně vyjadřovat definice, užíval bych na příslušných místech k tomu určený (mladší) řádkový element .

    Tam před tečkou měl být element dfn.

    #93 Arthure Dente,

    Na jiném místě sice nabádám „nebavte se s právníky o právu a s fanatiky o ničem“, ale zde učiním výjimku.

    Doporučíš mi sehnat si dobrého právníka? :-)

    Jak správně říkáš: Pokud nemám seznam-roztomilých-mrtvol, tak použiju seznam. Něco jako takový „krok zpět“ či „slevení z požadavků“.

    Tak nějak (krok zpět netřeba). Pokud nemám <seznam-formulářových-prvků-s-popisky>, tak použiju rovněž seznam.

    Takže pokud nemám k dispozici „prvek formuláře“, tak použiju CO? „Prvek“, „položku seznamu“, „položku definičního seznamu“ nebo „políčko tabulky“?

    Ano.

    Ale OK, když se podržím tvého slovíčkaření… Ty tvrdíš, že DIV je „poslední na seznamu vhodných“, já říkám, že pokud (a dokud) na tom seznamu nejsou jiné, je zároveň i první.

    Jistěže. Myslím, že mé „slovíčkaření“ šlo pochopit na první pokus. Ta poučka (dojem či názor, chceš-li) platí. Pouze se neshodneme, zda je <dl> pro daný účel vhodný.

    Rozmar starého zbrojnoše, co má za to, že „seznam“ je „seznam“, že „definition“ znamená „definice“, že „definice“ že je „slovní vymezení obsahu pojmu či výklad významu slova (termínu, výrazu) uvedením jeho základních, typických znaků“ a co si holt nezvykl na to, že se „definičním seznamem“ může myslet „seznam jakýchkoli dvojic“.

    Starý zbrojnoš si ovšem zvykl, že „oddíl“ není „oddíl“, považuje jej za „prázdnou značku“. Kdepak dlí jeho selský rozum, který by zapátral po významu slova „division“ stejně, jako se pídil po významu spojení „definition list“?

    Takže celá disputace záleží na tom, zda je můj příklad v pseudokódu oním ideálem. Jeho „překlad do HTML“ je zhruba podobný „překladu tvého komentáře do jazyka, tvořeného jen jednoslabičnými českými slovy“. Můžeme se dohadovat, jestli to má být FIELD či ELEMENT či ITEM nebo snad FORM-SEMANTIC-CONTAINER, ve chvíli, kdy nic z toho není k dispozici, je to spíš akademická diskuse.

    Při překladu do HTML nedochází ke ztrátě informace. Hodnoty atributů class a id nesou právě ten význam, který nemohou nést existující značky. Oba atributy stále jsou součástí HTML, nacpat do nich můžeš cokoliv, takže máš prostor k vyjádření libovolného významu. Akorát na jiné úrovni. Ne lepší, ne horší. O tom celou dobu mluvím. Nezpochybňoval jsem hledání ideálního pseudokódu, ani jeho provedení.

    Jelikož jsou oba zmíněné atributy globální, nabízí se otázka, k jakým elementům je připojit — a tehdy přichází ke slovu mé „slovíčkaření“ se zástupem vhodných kandidátů.

    #95 pixy,

    Kdybych v pátek (#84 Chamurappi) tušil, že se před pár týdny v návrhu HTML 5 zrodil <dialog>, zvolil bych jinou formulaci.

    Doporučením HTML 4 je výslovně dáno, že užití <dl> pro dialogy je čisté, což představuje při hledáního řešení nejčistšího výrazné plus.

    před 10 lety | reagoval [99] Arthur Dent [100] pixy
  97. Genix #97

    avatar

    Doufejme, že čím dříve budou všechny prohlížeče podporovat specifikaci standardu XForms tím lépe. Aspoň se nebudou vést sáhodlouhé diskuse jak na formuláře. Já nemám rád tabulky na formuláře. Myslím, že pokud už nepoužít jen elementy fieldset, label input…tak spíše dl, dt, dd neboť vystihují více formulářovou strukturu.

    před 10 lety
  98. Roman http://www.c64.sk #98

    avatar

    A čo keby sme sa vymanili z argumentácie v kruhu a pokúsili sa akceptovať fakt, že formulárové prvky samy o sebe tvoria štruktúru a že to čo okolo nich nabalujeme tam dávame len kvôli ich vzhľadu.

    před 10 lety
  99. Arthur Dent #99

    #96 Chamurappi, Nemohu si pomoct, ale mám dojem, že jediný sporný bod je pro nás vhodnost či nevhodnost DL. Vezmu to tedy takto: Formulář (třeba daňového přiznání) není seznam nějakých dvojic, ale strukturovaný dokument. „Seznam dvojic popis-políčko“ je jeden z případů formuláře, ta téměř maximální simplifikace, podobně jako jsem někde psal: Básnička je – simplifikováno – seznam řetězců. Sonet je tříprvkový seznam, kde první dva prvky jsou čtyřprvkové seznamy řetězců a poslední prvek je šestiprvkový seznam řetězců.

    Starý zbrojnoš si ovšem zvykl, že „oddíl“ není „oddíl“, považuje jej za „prázdnou značku“. Kdepak dlí jeho selský rozum, který by zapátral po významu slova „division“ stejně, jako se pídil po významu spojení „definition list“?

    Tak to tedy udělal a našel si: division – dělení, divize, rozdělení; hlasování; sekce, část, oddíl, skupina, členění; členitost; okres, dělící čára; nejednotnost, rozkol; dílkování (stupnice), dílek stupnice

    „Prázdná značka“ ve smyslu „blíže nespecifikovaný oddíl dokumentu“ to tedy je, protože DIVISION označuje ČÁST. Její význam tedy je „Toto je (nějaká blíže nespecifikovaná) část dokumentu.“ Bližší specifikaci tomu dodává třeba ten class. Ale v kontextu toho o čem se bavíme je opravdu možno považivat DIVISION za „rozdělení“ či „oddělení“ sémanticky významných prvků. Říká že jde o část, ale neříká CO je tou částí či jakou má ta část vlastnosti, na rozdíl od např. Hx či EM… Už si rozumíme?

    před 10 lety
  100. pixy http://www.wellstyled.com #100

    #96 Chamurappi,

    Doporučením HTML 4 je výslovně dáno, že užití <dl> pro dialogy je čisté, což představuje při hledáního řešení nejčistšího výrazné plus.

    S takto formulovaným tvrzením už konečně mohu souhlasit :)

    před 10 lety
  101. noname http://kapler.cz #101

    hezky se to tu rozjelo. Já jsem striktní zastánce semantiky, takže můj názor jak by měl vypadat formulář je zhruba takto:

    <form>
    <fieldset>
    <legend>Můj formulář</legend>
    <label>Můj label<input type="text" /></label>
    <label>Jiný label
        <select>
             <option>Moje volba</option>
             <option>Jiná volba</option>
    </label>
    <fieldset>
    <legend>Přepínače</legend>
    <label>Přepínač<input type="checkbox" /></label>
    <label>Druhý<input type="checkbox" /></label>
     </fieldset>
    <button>Odeslat</button>
    <fieldset>
    </form>

    Nastylovat takový formulář je velmi jednoduché, a je to semanticky zcela čisté, i hlasové čtečky to takto čtou imho nejlépe. Jsou zde fakticky jen 3 problémy – prohlížeče nenastylované elementy zobrazují za sebou – to je možná chyba prohlížečů, možná je to správně, stačí to vyřešit umístěním BR tam kde chcete BReak line a je to opět semanticky zcela v pořádku
    Špatně se stylují, když jsou složitější, ale to je problém všech složitějších formulářů.
    A za třetí – WCAG z nepochopitelných důvodů penalizuje použití label jako obal pro labelovaného prvku (i když je to dle W3C také správná možnost), s odůvodněním, že když to někdo použije v tabulce, tak že to narušuje DOM, protože se prolínají prvky (což by byl dobrý argument, kdyby byl platný jen pro formuláře s tabulkami).
    takže suma sumárum když obrousím tyto nevýhody, tak imho nejlepší formulář je prostě

    <form>
    <fieldset>
    <legend>Můj formulář</legend>
    <label for="muj">Můj label</label><input type="text" id="muj"/><br />
    <label for="jiny">Jiný label</label>
        <select id="jiny">
             <option>Moje volba</option>
             <option>Jiná volba</option>
    </label>
    <fieldset>
    <legend>Přepínače</legend>
    <label for="prepinac">Přepínač</label><input type="checkbox" id="prepinac"/><br />
    <label for="druhy">Druhý</label><input type="checkbox" id = druhy/>
     </fieldset>
    <button>Odeslat</button>
    <fieldset>
    </form>

    Semanticky zcela čisté, dobře se to zobrazuje v prohlížečích i bez stylů, bez JAKÉKOLIV zbytečné html značky ať už li, dl nebo table, celkem snadno stylovatelné a to při zachování semantičnosti (můžu třeba ten fieldset dát doprava, takže to bude formulář s dvěma sloupci, a přitom na rozdíl od použití tabulky bude zcela zřejmé, že to je na konci, nikoliv že to patří k prvnímu řádku).
    P.S.: Je smutné, že se tu diskuse odborníků a „odborníků“ svrhla na „jestli použít table nebo dl nebo ul“, když prostě formulář je formulář a použití čehokoliv jiného je prostě nesemantické, podobně jako P font-size: 200%; pro nadpisy. Ať už ve formuláři používáte Table nebo DL nebo UL, tak to prostě používáte jen jako prázdné bezvýznamové značky, zcela z nich odebíráte jejich účel a k tomu jsou kdyžtak určeny elementy div a span.
    Chápu, že udělat formulář vypadající jako tabulka svádí k použití tabulek a je to tak i jednodušší, podobně je tomu ovšem i u webů, které třeba vypadají jako tabulka. Ano, je to jednodušší, ano, může to být v některých případech i stejně logické – jako třeba v tom, který jste dali jako příklad v tomto článku. Ale udělejte jiný vzhled (třeba viz ten můj příklad – rozdělte tabulku jakoby do dvou sloupců) s použitím tabulky a při zachování semantičnosti a zjistíte, že jste v kelu, respektive budete potřebovat dvě tabulky, ale tak by se dalo pokračovat dál.

    před 10 lety | reagoval [102] pixy
  102. pixy http://www.wellstyled.com #102

    #101 noname, Jestliže si stěžuješ, že umístění formulářového prvku dovnitř jeho návěstí „je nesmyslně penalizováno“, pak jsi to asi poněkud nepochopil. Konstrukce:

    <návěstí prvku="x"> text návěstí <prvek x> </návěstí>

    je skutečně nesmyslná. Když nic jiného, tak proto, že prohlížeče mají dělat a dělají dynamické vazby v GUI mezi návěstím a „jeho“ prvkem. Když jedno vložíš do druhého, popíráš logiku. Je to skoro totéž, jako bys chtěl dělat

    <dt> LOL <dd>Lots Of Laught</dd> </dt>

    před 10 lety | reagoval [103] noname [104] David Grudl
  103. noname http://kapler.cz #103

    #102 pixy, důvod, proč to označuji za nesmyslné, je ten, že, na rozdíl od tvého příkladu, je použití formulářového prvku uvnitř prvku label a tedy implicitní pojmenovávání W3C povoleno. Kdyby tomu tak nebylo, neřeknu ani pudla. Vyzkoušej si to, žádný validátor proti tomu ani nic nemá. Pouze WCAG to zakazuje z toho důvodu, že „by to mohlo“ narušovat DOM a nesmyslné je to právě proto, že to zakazuje i v případech, kdy to DOM nenarušuje.

    Jsem ale rád, že nikdo nenašel žádný protiargument na to, že použití jakýchkoliv ne-formulářových tagů vyjma je nesemantické a vyjma div a span i nesmyslné.

    před 10 lety
  104. David Grudl http://davidgrudl.com #104

    avatar

    #102 pixy, je to trošku složitější.

    Vem si typické GUI prvky checkbox a radiobutton. V podstatě jde o speciální případy, protože zde návěští i samotný prvek tvoří nedílnou součást. A předpokládané chování je, že prvek bude klikací v celé ploše této pravoúhlé součásti. A to i přesto, že textový popisek není na pixel přiražen k prvku, že nemusí mít stejnou výšku, atd.

    Tohle lze vyřešit například tak, že návěští bude rodičem prvku a popisky.

    před 10 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.