Diskuze: Formulář - table vs. CSS

HTML a CSS HTML a CSS Formulář - table vs. CSS American English version English version

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Ahoj,
chci se zeptat zkušenějších webdesignerů, zda používají pro formuláře tabulky nebo čistě CSSko.

Odpovědět 24.1.2014 20:30
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Čápka
Honza Bittner:

Záleží jak složitý má formulář být, jak se často opakují rozložení atp.

Pokud budu mít formulář kde bude input na jméno a heslo, tak určitě tabulka nemá smysl.

Pokud bude formulář vždy stejné - 3 sloupce - lepší bude asi div a float.

Pokud však bude formulář, kde bude několik různých inputů, které jsou skoro vždy stejně rozložené - třeba každý druhý řádek je stejný, tak dám řádkům class a použiji tabulku. :)

Nahoru Odpovědět  +1 24.1.2014 20:36
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

Já osobně používám tabulka jen jako tabulku, ne jako prostředek pro layout.

Nahoru Odpovědět  +1 24.1.2014 20:37
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

Chci jedno univerzální řešení. Zatím používám tabulku, můžu si s ní dělat pomocí colspanů co chci a dělá mi sloupce, což ve formu potřebuji. Říkám si ale, jestli by ten balast s tr a td nešel odstranit a udělat to jen přes CSSko.

Nahoru Odpovědět 24.1.2014 20:42
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Čápka
Honza Bittner:

No tak šlo by to, žejo, ale pokud používáš slučování dolu, tak to se dělá v CSS docela blbě, jelikož float ti to zajímavě zatrhává.

Nahoru Odpovědět 24.1.2014 20:45
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Kit
Redaktor
Avatar
Odpovídá na David Čápka
Kit:

Podle mne je nejlepší seznam s odstraněnými puntíky. Text před chlívkem je ve spanu a v CSS má stanoven min-width.

Nahoru Odpovědět 24.1.2014 20:49
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

To sice ano, ale CSS si musí poradit i s tímhle:

Pohlaví (x) Muž
        ( ) Žena
        ( ) UFO

V praxi by určitě vyvstalo spousta dalších případů, proto se ptám, jestli tu někdo dělá formuláře bez tabulek.

Nahoru Odpovědět 24.1.2014 20:53
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Kit
Redaktor
Avatar
Odpovídá na David Čápka
Kit:

To se dá elegantně udělat jako seznam v seznamu. Vnitřní seznam má float:left vedle zmíněného spanu. Pokud se to nevejde vedle sebe, hezky se to zalomí.

Nahoru Odpovědět  +1 24.1.2014 20:56
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

Jo, ten seznam by to vyřešil. Ještě jsem viděl, že si lidé hackli br, aby dělalo clear. Ten form pak vypadal takhle:

<form>
   <label><input><br>
   <label><input><br>
   <label><input>
</form>
Editováno 24.1.2014 21:04
Nahoru Odpovědět 24.1.2014 21:04
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na David Čápka
Jiří Gracík:

To je prasárna, nejlépe používat třeba div se třídou clear. Tabulky zásadně nepoužívám, nejlépe (jak říkal Kit) je použít seznam. Já to používám co položka to "řádek tabulky", ty mohou obsahovat v celku cokoliv a jednotlivé "buňky" na sobě nejsou závislé, jako tomu je u table.

Editováno 24.1.2014 21:12
Nahoru Odpovědět 24.1.2014 21:11
Creating websites is awesome till you see the result in another browser ...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jiří Gracík
David Čápka:

Můžeš plz poslat nějakou ukázku složitějšího formu?

Nahoru Odpovědět 24.1.2014 21:14
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Kit
Redaktor
Avatar
Nahoru Odpovědět  +2 24.1.2014 21:57
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

To vypadá dobře i se to chová responzivně. Přemýšlím, jestli je potřeba ten vnější ul.

Nahoru Odpovědět 25.1.2014 10:47
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Benjibs
Člen
Avatar
Odpovídá na David Čápka
Benjibs:

Ja som zvykol používať divy pre každú skupinu prvkov formulára, (napr.

<div class = "form-component">
<label for = "name-field"> Meno </label>
<input type = "text" id = "name-field" required />
<p class = "error-message" id = "name-error-message"> </p>
</div>

dalo sa s nimi výborne narábať,
kód bol celkom prehľadný a semantický (kedže každý "div" tvorí samostatnú plochu vyhradenú pre ten konkrétny prvok formu),
dali sa tam ľahko začlenovať prípadné chybové hlášky pri validácii atď

Nahoru Odpovědět 25.1.2014 11:00
1 + 1 = 2
Avatar
Kit
Redaktor
Avatar
Odpovídá na David Čápka
Kit:

Vzhledem k tomu, že se jedná o seznam vstupních polí formuláře, tak bych to tam to <ul> nechal. Tabulka to není, definice také ne. Co bys tam dal jiného?

Nahoru Odpovědět 25.1.2014 11:17
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
done
Člen
Avatar
Odpovídá na Benjibs
done:

Myslím že místo těch labelů je lepší použít placeholder, vypadá to mnohem lépe.

 
Nahoru Odpovědět 25.1.2014 11:19
Avatar
Kit
Redaktor
Avatar
Odpovídá na Benjibs
Kit:

Chtělo by to místo <div> najít nějakou vhodnější sémantickou značku. Použil jsem <li>, protože je to položka něčeho.

Nahoru Odpovědět 25.1.2014 11:19
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
Kit:

Placeholder je dobrá věc jako doplněk, ale label s ním nenahradíš.

Nahoru Odpovědět 25.1.2014 11:23
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Benjibs
Člen
Avatar
Odpovídá na done
Benjibs:

Áno, vyzerá to lepšie,
lenže (z HTML5 špecifikácie):

Placeholder should not be used as an alternative to a label.”
Nahoru Odpovědět  +1 25.1.2014 11:27
1 + 1 = 2
Avatar
done
Člen
Avatar
Odpovídá na Kit
done:

Label bych použil pro případný výpis chyby při validaci, ale jinak mi to nepřipadá lepší než placeholder,při použití placeholderu je to potom takové uhlazené, naopak v případě labelu text vedle inputu nevypadá tak dobře.
Proč myslíš že to nelze nahradit ?

 
Nahoru Odpovědět  -2 25.1.2014 11:32
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
Kit:

Ve chvíli, kdy někdo vyplní formulář a chce si ho zkontrolovat, už nevidí, jestli omylem nepřehodil jméno a příjmení.

Nahoru Odpovědět 25.1.2014 11:35
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Benjibs
Člen
Avatar
Odpovídá na done
Benjibs:

Lenže špecifikácia je náš kódex, a preto by sme sa jej mali držať,
definícia labelu:

The <label> element represents a caption in a user interface.

HTML5 kladie dôraz na sémantickosť a správne využitie elementov,
na chybové hlásenia by sa určite hodil nejaký iný.

Editováno 25.1.2014 11:37
Nahoru Odpovědět  +1 25.1.2014 11:36
1 + 1 = 2
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
Kit:

Naopak bych do placeholderu klidně dal string "* povinné pole".

Nahoru Odpovědět 25.1.2014 11:37
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
done
Člen
Avatar
Odpovídá na Kit
done:

Dobře, chápu, ale na druhou stranu když při na událost onchange v JS vytvoříš funkci, která to ihned zvaliduje a vedle vypíše např: *"Jméno je příliš krátké" * tak je mu jasné ve kterém inputu má být jméno a kde něco jiného.
Kdo tam chce label, dá si tam label, komu se líbí placeholder tak to udělá jinak, myslím že už pak záleží na vývojáři.

 
Nahoru Odpovědět 25.1.2014 11:46
Avatar
Benjibs
Člen
Avatar
Odpovídá na done
Benjibs:

V podstate je jedno, čo sa použije na zobrazenie chybovej hlášky,
záleží len na vývojárovi, či chce mať kód v súlade s platnými štandardmi :)

Nahoru Odpovědět  +1 25.1.2014 11:53
1 + 1 = 2
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
Kit:

V některých prohlížečích se placeholder vůbec nezobrazí. Podle specifikace ani nemusí. Prohlížeč totiž značky a atributy, které nezná, musí ignorovat. Uživatel pak neví, co má do toho pole vyplnit.

Nahoru Odpovědět 25.1.2014 11:53
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
done
Člen
Avatar
Odpovídá na Kit
done:

Chápu, label je prostě jistota :)

 
Nahoru Odpovědět 25.1.2014 11:57
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

IMHO hlavně dělá placeholder a label úplně něco jiného. Ač se to zdá podobné.

Editováno 25.1.2014 12:04
Nahoru Odpovědět 25.1.2014 12:02
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
Kit:

Ano, dokonce ho zobrazí i prohlížeč, který vůbec nezná <label>. Je to dáno tím, že je párový.

Nahoru Odpovědět  +3 25.1.2014 12:03
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na David Čápka
Jiří Gracík:

Já osobně to dělám třeba takto, zde nepoužívám seznam, protože se na to v tomto případě tak úplně nehodí.

http://funebrak.hys.cz/devbook/table/

Nahoru Odpovědět  +3 25.1.2014 12:31
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Dá se samozřejmě natáhnout jak je potřeba, ty bloky udělat širší, ale pro pochopení myslím postačí.

Nahoru Odpovědět 25.1.2014 12:36
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 31 zpráv z 31.