Jak oswoić formy w projektowaniu stron WWW
Formularze są często uważane za jeden z najbardziej bolesnych elementów HTML do zaprogramowania. Ale projektowanie i rozwój formy rozwijały się skokowo; nie jest tak twardy jak kiedyś.
Mimo że przemysł poczynił ogromne postępy, nadal istnieją pewne przeszkody. W końcu możliwe są formy oswajania; to wymaga trochę pracy.
W tym poście przyjrzymy się niektórym najczęściej używanym formantom formularzy oraz różnym narzędziom i wtyczkom, które powinny pomóc w wdrożeniu formularzy na stronach internetowych.
Jeśli masz inne wskazówki lub linki do innych przydatnych zasobów, możesz je opublikować w komentarzach.
Łamanie kontroli
Zacznijmy od podzielenia ich na dwa segmenty, ponieważ niektóre formanty formularzy nigdy nie sprawiały kłopotów.
Przyjazne sterowanie
Najłatwiejsze w obsłudze są podstawowe pola wprowadzania, obszar tekstowy i przycisk. Działają dobrze ze standardowym CSS i na szczęście są najczęstszymi elementami formularza. Jeśli nie musisz używać trudniejszych, masz szczęście.
Wraz z postępem zaokrąglonych narożników CSS3, cieni i gradientów wiele najpopularniejszych stylów jest teraz jeszcze łatwiejszych. Nie musisz się niczego obawiać z tymi kontrolkami.
Kłopotliwe kontrole
Niektóre inne formy kontroli mogą być ogromnym bólem w szyi. Na przykład, jeśli zaprojektujesz rozwijaną kontrolę, która jest bardzo stylizowana, programista prawdopodobnie będzie chciał z tobą porozmawiać. Twoje opcje stylizacji będą dość ograniczone: kolor obramowania, dopełnienie, kolor tła, tego typu rzeczy. Jeśli potrzebujesz więcej stylów niż to, proponuję skonsultować się z programistą, aby upewnić się, że nie stwarzasz dla nich większego problemu.
Kłopotliwe kontrole formularzy obejmują:
- wybierz wiele,
- wybierz rozwijane menu,
- pola wyboru,
- przyciski radiowe,
- Udostępnianie pliku.
Nowoczesne narzędzia do form
Jak już wspomniano, dostępnych jest wiele niewiarygodnych narzędzi, które pomagają wprowadzić kontrolę formy w kształt.
Sformalizować to twoja tajna broń do uzyskiwania podstawowych kontroli form i stylów, aby zachowywać się konsekwentnie w różnych przeglądarkach. A domyślne style są czyste i piękne. Ta wspaniała biblioteka działa również doskonale z szeroką gamą bibliotek JavaScript, takich jak jQuery , Dojo i MooTools .
Wymień zastępczą kontrolę
Jeśli chcesz zrobić radykalne rzeczy w formularzu, dostępne są pomocne narzędzia. Znakomita taktyka oswajania formularzy internetowych polega na ukryciu faktycznej kontroli i zastąpieniu jej w całości produkowaną. Daje to znacznie większą kontrolę nad renderowaniem formularza.
Jednym świetnym tego przykładem jest Mundur , wtyczka jQuery do tworzenia przejrzystych formularzy. Występuje w trzech różnych tematach. A jeśli chcesz stworzyć własny motyw, po prostu skorzystaj z usług Generator CSS aby łatwo wkręcić wtyczkę.
Kolejna wtyczka jQuery Niceformy . Choć nie ma poręcznej funkcji ponownego ubierania się Uniform, oferuje podstawowy styl, który bardzo dobrze pasuje do Twoich potrzeb.
Wreszcie istnieje komercyjne rozszerzenie jQuery Wijmo . Moduł, którym jesteśmy zainteresowani, to dekorator formularzy , który jest rzeczywiście darmowy w użyciu. Obejmuje kilka bardziej problematycznych elementów sterujących: pola wyboru, przyciski opcji i rozwijane menu. Będąc częścią większej komercyjnej biblioteki, narzędzie to przynosi pewne korzyści, z których najważniejsze są silne dokumentacja i opłacone wsparcie . Wreszcie uwielbiam sposób, w jaki radzi sobie ze skórowaniem; korzysta z jQuery UI ThemeRoller , co ułatwia pracę z niestandardowymi projektami.
Wynalezione formanty kontrolne
Na koniec, jeśli nie ma kontroli formy, która spełnia to, czego potrzebujesz, możesz ją wymyślić! Niektórzy bardzo inteligentni ludzie już to zrobili i być może jedno z ich narzędzi pasuje już do twoich potrzeb.
Suwaki
Jedną z rzeczy, której brakuje w standardowym HTML (ale jest częścią HTML5), jest podstawowa kontrola suwaków. Istnieje wiele odpowiedzi na to, w tym jeden z Wijmo , który opiera się na suwak jQuery UI .
Przesyłający
Mimo że możesz użyć kontroli wprowadzania plików, aby umożliwić użytkownikom wybieranie plików do przesłania, możesz chcieć czegoś bardziej snazzierskiego, szczególnie jeśli przesyłanie plików ma kluczowe znaczenie dla Twojej witryny. Jednym z najlepszych rozwiązań jest Uploadify . Pozwala użytkownikom wybierać wiele plików i wyświetlać postępy. Zawiera wiele opcji układu i funkcjonalności.
Suwakowe pola wyboru i przyciski opcji
Jednym z popularnych elementów interfejsu użytkownika (dzięki iPhone'owi) jest przełącznik on / off, który przesuwa się z boku na bok. Z ta poręczna wtyczka jQuery możesz przekształcić podstawowe pole wyboru lub przycisk opcji w jedno. Niezależnie od tego, czy nazywasz to wymyśloną formą kontroli formularzy, czy też narzędziem do wymiany formularzy, jest to świetny sposób, aby umożliwić użytkownikom włączanie i wyłączanie opcji.
Kreatywne przyciski
jQuery UI to kolejne ciekawe podejście do podstawowych kontroli. Co oznacza jako guziki może również służyć do tworzenia zestawów opcji opartych na przyciskach, przyciskach radiowych i polach wyboru. W ten sposób przekształcasz te kontrole w inną formę wizualną. Na poniższym obrazku znajduje się zestaw przycisków radiowych stylizowanych na rząd przycisków.
Formularze HTML5
HTML5 przyniósł wiele ekscytujących możliwości formularzy internetowych. Chociaż wykracza to poza zakres tego artykułu, nadal ma znaczenie. Oto kilka kluczowych zasobów, które pomogą Ci zagłębić się w:
- " Forma szaleństwa "Dive Into HTML5;
- " Zabawne z formularzami HTML5 , "Richard Shepherd;
- " Formularze HTML5 , "Wufoo;
- " Miej dzień Field With HTML5 Forms , "Inayaili de León.
Podsumowując, kontrole formularzy są jedną z najważniejszych przeszkód w tworzeniu podstawowej strony internetowej.
Projektant, który rozumie ograniczenia, zna narzędzia i rozpoznaje możliwości łatwej korekty, będzie mógł podejmować świadome decyzje, które ostatecznie poprawią wyniki finansowe.