Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka: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
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: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  +1 24.1.2014 20:36
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Odpovídá na David Čápka
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  +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: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
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: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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Kit
Redaktor
Avatar
Odpovídá na David Čápka
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ů.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka: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
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: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  +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: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
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: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
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: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
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: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
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: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
Avatar
Kit
Redaktor
Avatar
Odpovídá na David Čápka
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ů.
Avatar
done
Člen
Avatar
Odpovídá na Benjibs
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
Avatar
Kit
Redaktor
Avatar
Odpovídá na Benjibs
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ů.
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
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ů.
Avatar
Benjibs
Člen
Avatar
Odpovídá na done
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  +1 25.1.2014 11:27
1 + 1 = 2
Avatar
done
Člen
Avatar
Odpovídá na Kit
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  -2 25.1.2014 11:32
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
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ů.
Avatar
Benjibs
Člen
Avatar
Odpovídá na done
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  +1 25.1.2014 11:36
1 + 1 = 2
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
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ů.
Avatar
done
Člen
Avatar
Odpovídá na Kit
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
Avatar
Benjibs
Člen
Avatar
Odpovídá na done
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  +1 25.1.2014 11:53
1 + 1 = 2
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
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ů.
Avatar
done
Člen
Avatar
Odpovídá na Kit
done:25.1.2014 11:57

Chápu, label je prostě jistota :)

 
Nahoru Odpovědět 25.1.2014 11:57
Avatar
Honza Bittner
Redaktor
Avatar
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
Student FIT ČVUT. Followuj mě na https://twitter.com/tenhobi a ptej se na https://github.com/HoBi/ama.
Avatar
Kit
Redaktor
Avatar
Odpovídá na done
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  +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: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  +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: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
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.