Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
David Hartinger
Vlastník
Avatar
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
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.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na David Hartinger
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
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Honza Bittner
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
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.
Avatar
Kit
Tvůrce
Avatar
Odpovídá na David Hartinger
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 Hartinger
Vlastník
Avatar
Odpovídá na Kit
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
Avatar
Kit
Tvůrce
Avatar
Odpovídá na David Hartinger
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ů.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Kit
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
Nahoru Odpovědět
24.1.2014 21:04
New kid back on the block with a R.I.P
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na David Hartinger
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
Nahoru Odpovědět
24.1.2014 21:11
Neaktivní uživatelský účet
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Neaktivní uživatel
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
Avatar
Kit
Tvůrce
Avatar
Odpovídá na David Hartinger
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ů.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Kit
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
Avatar
Benjibs
Člen
Avatar
Odpovídá na David Hartinger
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
Tvůrce
Avatar
Odpovídá na David Hartinger
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
Tvůrce
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
Tvůrce
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
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
25.1.2014 11:32
Avatar
Kit
Tvůrce
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
Nahoru Odpovědět
25.1.2014 11:36
1 + 1 = 2
Avatar
Kit
Tvůrce
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
25.1.2014 11:53
1 + 1 = 2
Avatar
Kit
Tvůrce
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
Tvůrce
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
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.
Avatar
Kit
Tvůrce
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
25.1.2014 12:03
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na David Hartinger
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
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
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.