Vytvářejte formuláře pomocí Material Design

Jedním z nejzákladnějších aspektů každé aplikace jsou formuláře, protože nám umožňují zachytit informace o uživateli týkající se obchodního modelu, který naše aplikace spravuje.

Materiálové provedení Díky kombinaci osvědčených postupů klasického designu a implementace originálních a inovativních efektů nám umožňují vytvářet formuláře, které nejen dobře vypadají, ale také dávají naší aplikaci přidanou funkčnost.

Podívejme se tedy, jak vytvořit základní formulář pomocí principů Materiálové provedení.

PožadavkyPřed zahájením tohoto kurzu doporučujeme projít si úvod do Material Design zde. Budeme se spoléhat na rámec nazvaný Materialize a je důležité, abychom pochopili, jak kontejner naší aplikace funguje.

Kontejner materializace

Kontejner Zhmotnit funguje to stejně jako to funguje BootstrapV případě, že jsme se již tohoto rámce dotkli, nebudeme mít problém pochopit, jak to funguje, ale pro ty, kteří to neznají, je to hlavně kontejner 12 sloupců, ve kterém můžeme říci našim prvkům, kolik sloupců může pokrýt.

Má docela podobnou hierarchii, má kontejnerovou třídu, následovanou třídou řádků a nakonec třídami použitelnými na sloupce, podívejme se, jak by vypadala struktura celého řádku, následuje řádek, který by obsahoval dva prvky.

Toto je 12sloupcový divToto je 6sloupcový divToto je 6sloupcový div

Jak to vidíme, je docela jednoduché, jen musíme mít jasno v tom, že máme dvanáct sloupců, se kterými je možné pracovat, a tak udržet náš obsah organizovaný a vizuálně lépe prezentovaný. Když už vidíme, jak kontejner funguje, přejděme ke konstrukci našeho základního formuláře.

Vytváření formulářů

Pojďme vytvořit a HTML s naší výchozí strukturou a první věc, kterou uděláme, je zahrnout knihovny obou CSS jako JavaScript z Zhmotnit a tímto způsobem aplikovat funkce, které chceme, na náš formulář.

Je důležité, abychom zahrnuli jQuery ve své nejnovější verzi pro správné fungování rámce navíc musíme zahrnout speciální řádek, který nám umožní používat jeho ikony.

Jakmile budeme mít zahrnuty knihovny, konstrukce naší formy zůstane, většina prvků bude mít strukturu podobnou následující, kde budeme mít třídu řádek, následovaná třídou zelí a počet sloupců, které prvek obsadí.

názevPříjmení

Zhmotnit Umožňuje nám také ověřit pole, v případě e -mailu uvedením typu, kterému můžeme přiřadit zprávy v případě, že jsou informace platné nebo ne, podívejme se:

 E-mailem

Můžeme také zahrnout slavné ikony, což je funkce převzatá z plochého designu, která dává naší aplikaci vyšší úroveň použitelnosti. K tomu použijeme značku s konkrétní třídou:

 e-mailem

Nakonec žádná základní forma není úplná bez slavného textarea, textová pole, která nám umožňují shromažďovat mnohem více informací, jako je adresa uživatele nebo popisy nějakého obsahu.

 Oblast textu

Jakmile máme vyplněný formulář, musíme pouze otestovat jeho fungování Zhmotnit Zahrnuje mnoho efektů do naší formy a je vysoce vizuální, podívejme se, jak to vypadá v následujícím animovaném GIF.webpu.

Jak vidíme konstrukci základního formuláře pomocí návrhového jazyka Materiálové provedení a podporovány rámcem jako Zhmotnit Může to být úkol, který zvládneme za několik minut a dosáhneme kvalitního výsledku, který poskytne nejen lepší vizuální stránku, ale také funkce, které mají jen ty nejlepší aplikace.

Nejlepší je, že si ho stáhnete a vyzkoušíte, určitě se vám bude líbit.

form-material-design.html 2,75 kB 647 stažení