Dokonalé stylování formulářů

he he :o)

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

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

Jinak pěkné 🙂

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.

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 :(((

#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í?

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

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ů

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

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“.

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

#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?

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é

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.

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?

#7 bignose, #14 loyza

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

#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?

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

#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)

#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.

#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…

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?

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

#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á.

Č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)..

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

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á…

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.

#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. 🙂

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í ;)

#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.

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 https://alistapart.com/…ssibleforms/

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 🙂

#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.

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á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> ?

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…

#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.

#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é.

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

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?

#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!

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>

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

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

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

#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.

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

#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.

stare, ale dobre (mozno este doplnit fieldset):
https://web.archive.org/…s/forms.html

#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?

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

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.

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
}`

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

#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.

[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; 😉.

#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ň.

Skvělá práce 😁 … 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 …

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á. =)

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ě.

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

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

Super clanek!
Dovolim si prihrat tematickou polivcicku a zavzpominat:
https://web.archive.org/…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“ 🙂 🙂

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.

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 🙂

Ještě bych dodal: https://web.archive.org/…iscuss/29710

#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. 😉 .

#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 ;)

#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… :)

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

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…

#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.

#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.

#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?

#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</table> nebo <div class="nadpis1">takhle</div> 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ší.

#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.

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é.

#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.

#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.

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.

#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. ;)

mas digitalni holinky?

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

#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.

#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í!

#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é“.

#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.“ (https://www.w3.org/…t/lists.html)

#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?

#75 Chamurappi, #84 Chamurappi – ty se mi libis, chlape! 🙂

#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á.

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 🙂

#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í :-)

#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…)

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… :)

#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.

#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.

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.

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.

#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?

#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 :)

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.

#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>

#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é.

#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.