Formuláře jsou často považovány za jeden z nejvíce bolestivých prvků HTML, které lze programovat. Forma a vývoj formy však pokročily skoky a hranice; není to tak těžké, jako kdysi.

Přestože průmysl dosáhl obrovského pokroku, stále existují určité překážky. Nakonec jsou možné zkrocené formy; to jen trvá nějakou práci.

V tomto příspěvku se podíváme na nejčastěji používané ovládací prvky formuláře a na různé nástroje a pluginy, které by vám měly pomoci při zavádění formulářů na vašich webových stránkách.

Pokud máte nějaké další tipy nebo odkazy na další užitečné zdroje, neváhejte a vložte je do komentářů.

Zrušení ovládacích prvků

Začněme tím, že je rozdělíme do dvou kbelíků, protože některé ovládací prvky s formátem nikdy nebyly s nimi těžké pracovat.

Přátelské ovládání

Ovládací prvky, s nimiž se nejlépe pracuje, jsou základní vstupní pole, textová oblast a tlačítko. Pracují dobře se standardním CSS a naštěstí jsou nejběžnějšími prvky. Pokud nepotřebujete používat složitější, máte štěstí.

S pokrokem CSS3 zaoblených rohů, stoupání stínů a přechodů je mnoho z nejběžnějších stylů nyní ještě jednodušší. Nemusíte se těmito kontrolami bát.

Nepohodlné ovládací prvky

Některé další formy kontroly mohou být masivní bolesti na krku. Například pokud navrhnete rozbalovací ovládací prvek, který je extrémně stylizovaný, bude pravděpodobně chtít, aby si s vámi povídal. Vaše možnosti stylingu budou poměrně omezené: barva okraje, polstrování, barva pozadí, takové věci. Pokud potřebujete více stylů než toto, doporučuji konzultovat s vývojářem, abyste se ujistili, že pro ně nevytváříte velký problém.

Ovládací prvky s problematickou formou zahrnují:

  • vyberte více,
  • vyberte rozevírací nabídku,
  • zaškrtávací políčka,
  • přepínače,
  • nahrání souboru.

Moderní nástroje pro formuláře

Jak bylo zmíněno, je k dispozici řada neuvěřitelných nástrojů, které vám pomohou bičovat ovládací prvky tvaru.

Formalizovat je vaše tajná zbraň pro získání základních formulářových ovládacích prvků a stylů, aby se chovali důsledně v různých prohlížečích. A její výchozí styly jsou čisté a krásné. Tato úžasná knihovna také funguje dokonale se širokou škálou knihoven JavaScriptu, jako je jQuery , Dojo a MooTools .

Nahrazení řízení formuláře

Pokud chcete do formy nějaké radikální věci, jsou k dispozici užitečné nástroje. Skvělá taktika pro zkroucení webových formulářů je skrýt skutečné ovládání a nahradit jej zcela vyrobeným. Tím získáte mnohem větší kontrolu nad tím, jak se formulář vykresluje.

Jedním z dobrých příkladů je Jednotný , jQuery plug-in pro vytváření hladkých formulářů. Přichází ve třech různých tématech. A chcete-li vytvořit vlastní téma, stačí použít službu CSS generátoru jednoduše zakrýt plug-in.

Další jQuery plug-in Niceforms . Zatímco to nemá šikovný re-pokožku funkce Uniform, to nabízí základní styl, který by velmi dobře vyhovoval vašim potřebám jak je.

Konečně je k dispozici komerční rozšíření jQuery Wijmo . Modul, o který nás zajímá, je formovat dekoratér , který je skutečně zdarma k použití. Zabývá se několika málo problematickými kontrolami: zaškrtávacími políčkami, přepínači a drop-downy. Tento nástroj, který je součástí větší komerční knihovny, přináší některé výhody, z nichž nejdůležitější jsou silné dokumentace a zaplaceno Podpěra, podpora . Konečně mám rád způsob, jakým se zabývá kůže; to používá jQuery UI ThemeRoller , díky snadné práci na zakázkových vzorů.

Vymyslené formuláře

Konečně, pokud neexistuje kontrola formuláře, která dělá to, co potřebujete, můžete vymyslet jednu! Někteří velmi chytří lidé to již udělali hodně a snad jeden z jejich nástrojů již vyhovuje vašim potřebám.

Posuvníky

Jedna věc, která chybí ve standardním HTML (ale je součástí HTML5), je základní ovládací prvek posuvníku. Existuje mnoho odpovědí, včetně toho jeden z Wijmo , která je založena na posuvník jQuery UI .

Uploadery

Zatímco můžete použít ovládací prvek pro vkládání souborů, chcete-li povolit uživatelům vybrat soubor pro nahrávání, možná budete chtít něco trochu snazzier, obzvláště pokud jsou na vaše webové stránky kritické informace. Jedním z nejlepších řešení je Nahrát . Umožňuje uživatelům vybrat více souborů a zobrazit průběh. Dodává se s řadou možností rozvržení a funkcí.

Zaškrtávací políčka ve stylu posuvníku a přepínací tlačítka

Jeden z nejoblíbenějších prvků UI (díky iPhone) je přepínač zapnutí / vypnutí, který se posouvá ze strany na stranu. S tento praktický plug-in jQuery , můžete změnit základní zaškrtávací políčko nebo přepínač do jednoho. Ať už tohle nazýváte vymyšlená kontrola formuláře nebo nástroj výměny formuláře, je to skvělý způsob, jak umožnit uživatelům zapínat a vypínat možnosti.

Kreativní tlačítka

jQuery UI je další zajímavý zájem o základní ovládání. Co označuje jako tlačítka může být také použito pro vytvoření sady voleb na základě tlačítek, přepínačů a zaškrtávacích políček. Tímto způsobem přeměníte tyto ovládací prvky do jiné vizuální podoby. Na následujícím obrázku je řada rádiových tlačítek, které jsou navrženy jako řada tlačítek.

Formuláře HTML5

HTML5 přineslo do webových formulářů spoustu zajímavých možností. I když je to mimo rozsah tohoto článku, je to stále relevantní. Zde jsou některé klíčové zdroje, které vám pomohou zabudovat:

Závěrem, kontrola formulářů je jednou z nejkritičtějších překážek při tvorbě základní webové stránky.

Návrhář, který chápe omezení, zná nástroje a uznává příležitosti pro snadné vylepšení, bude schopen činit informovaná rozhodnutí, která nakonec zlepší spodní linie.