Diskuze: Formulář - table vs. CSS

David Hartinger

Vlastník

David Hartinger:24.1.2014 20:30

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

New kid back on the block with a R.I.P

Honza Bittner

Tvůrce

Honza Bittner:24.1.2014 20:36

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

24.1.2014 20:36

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:24.1.2014 20:37

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

Nahoru Odpovědět

24.1.2014 20:37

David Hartinger

Vlastník

David Hartinger:24.1.2014 20:42

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

New kid back on the block with a R.I.P

Honza Bittner

Tvůrce

Honza Bittner:24.1.2014 20:45

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

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Kit

Tvůrce

Kit:24.1.2014 20:49

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

David Hartinger

Vlastník

David Hartinger:24.1.2014 20:53

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

New kid back on the block with a R.I.P

Kit

Tvůrce

Kit:24.1.2014 20:56

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

24.1.2014 20:56

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

David Hartinger

Vlastník

David Hartinger:24.1.2014 21:04

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

New kid back on the block with a R.I.P

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:24.1.2014 21:11

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

Neaktivní uživatelský účet

David Hartinger

Vlastník

David Hartinger:24.1.2014 21:14

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

Nahoru Odpovědět

24.1.2014 21:14

New kid back on the block with a R.I.P

Kit

Tvůrce

Kit:24.1.2014 21:57

Zkus tohle:
http://kit.moxo.cz/menu.html

Nahoru Odpovědět

24.1.2014 21:57

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

David Hartinger

Vlastník

David Hartinger:25.1.2014 10:47

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

New kid back on the block with a R.I.P

Benjibs

Člen

Benjibs:25.1.2014 11:00

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

Kit

Tvůrce

Kit:25.1.2014 11:17

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

done

Člen

done:25.1.2014 11:19

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

Kit

Tvůrce

Kit:25.1.2014 11:19

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

Kit

Tvůrce

Kit:25.1.2014 11:23

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

Benjibs

Člen

Benjibs:25.1.2014 11:27

Á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

25.1.2014 11:27

1 + 1 = 2

done

Člen

done:25.1.2014 11:32

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

25.1.2014 11:32

Kit

Tvůrce

Kit:25.1.2014 11:35

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

Benjibs

Člen

Benjibs:25.1.2014 11:36

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

25.1.2014 11:36

1 + 1 = 2

Kit

Tvůrce

Kit:25.1.2014 11:37

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

done

Člen

done:25.1.2014 11:46

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

Benjibs

Člen

Benjibs:25.1.2014 11:53

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

25.1.2014 11:53

1 + 1 = 2

Kit

Tvůrce

Kit:25.1.2014 11:53

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

done

Člen

done:25.1.2014 11:57

Chápu, label je prostě jistota

Nahoru Odpovědět

25.1.2014 11:57

Honza Bittner

Tvůrce

Honza Bittner:25.1.2014 12:02

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

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Kit

Tvůrce

Kit:25.1.2014 12:03

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

25.1.2014 12:03

Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.1.2014 12:31

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

25.1.2014 12:31

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:25.1.2014 12:36

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

Neaktivní uživatelský účet

Nejčastěji vyhledáváné

Diskuze: Formulář - table vs. CSS