Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Blog 17 sposobów na atrakcyjne formularze na stronie WWW

Blog

17 sposobów na atrakcyjne formularze na stronie WWW

Bartosz Romanowski 12 stycznia 2013 komentarze ()

Tagi:formularze

Fancy Radio Buttons Formularze są nieodłącznymi elementami każdej strony internetowej - to praktycznie jedyna metoda na odbieranie różnych informacji od użytkownika. Wadą formularzy jest jednak to, że wyglądają inaczej w każdej przeglądarce i na każdym systemie operacyjnym. Oczywiście można modyfikować ich wygląd korzystając z CSS, ale na szczęście powstało sporo narzędzi, które pozwalają na dostosowanie wyglądu i sposobu działania formularzy do naszych potrzeb bez większego wysiłku.

Bootstrap

Bootstrap

Bootstrap to otwarty framework front-end, dzięki któremu łatwo i szybko możemy zbudować estetyczną stronę bez tworzenia od podstaw arkuszy stylów CSS. Wprawdzie nie jest on dedykowany formularzom, ale wyglądają one w nim po prostu świetnie. Na dodatek standardowe pola rozszerzono o nowe funkcje, takie jak na przykład lista rozwijana w polu tekstowym. Ponieważ Bootstrap jest zbudowany modułowo, to nic nie stoi na przeszkodzie aby wyciągnąć z niego część odpowiedzialną za formularze i dołączyć do naszego projektu.

Cena: darmowy
Licencja: Apache 2.0

Linki: oficjalna strona | demo | do pobrania

Contactable

ContactableDzięki Contactable w kilka chwil zbudujemy prosty, ale wygodny formularz kontaktowy, wysuwany z boku strony po naciśnięciu przycisku. Jego zawartość jest wysyłana za pomocą AJAXa, bez konieczności przeładowywania strony.

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

Formalize

Formalize

Biblioteka ujednolicająca wygląd formularzy we wszystkich przeglądarkach i na wszystkich systemach operacyjnych. Działa z jQuery, Dojo, ExtJS, MooTools, Prototype, and YUI.

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

Chosen

Chosen

Świetna biblioteka ulepszająca listy rozwijane. Dodaje do nich wyszukiwarkę, możliwość wyboru kilku opcji w formie listy słów (przydatne na przykład do wyboru tagów) i przycisk usunięcia wyboru. Do tego poprawia wygląd list, dzięki czemu wyglądają tak samo na każdej platformie.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

jFormer

jFormer

jFormer to framework do tworzenia formularzy, który poza ujednoliceniem ich wyglądu oferuje również walidacje oraz przesyłanie za pomocą AJAXa (bez konieczności przeładowywania strony).

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

plum.Form

plum.Form

Narzędzie służące jako framework do tworzenia formularzy. Ujenolica ich wygląd oraz posiada wbudowany skrypt do przesyłania plików z paskiem postępu i ograniczaniem wielkości i typów przesyłanych plików. Jest stosunkowo łatwy do modyfikacji za pomocą własnych stylów CSS.

Cena: 8 dolarów
Licencja: GPL

Linki: oficjalna strona | demo | do pobrania

Pretty Checkboxes

Pretty Checkboxes

Ten skrypt służy do zmiany zwykłych elementów typu "checkbox" w atrakcyjne wizualnie pola wyboru. Zastosowań dla tego typu elementu jest naprawdę sporo.

Cena: darmowy
Licencja: nieznana

Linki: oficjalna strona | demo | do pobrania

Fancy Radio Buttons

Fancy Radio Buttons

Skrypt bardzo podobny do poprzedniego, z tą różnicą, że działa dla elementów typu "radio".

Cena: darmowy
Licencja: nieznana

Linki: oficjalna strona | demo | do pobrania

msDropDown

msDropDown

Świetny skrypt do tworzenia własnych list rozwijanych z obrazkami. Pozycje na listach mogą mieć różną wysokość, dzięki czemu możemy wykorzystać je do różnych celów. Można również wypełnić listę danymi pochodzącymi z zewnętrznego źródła, na przykład skryptu PHP.

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

Dropdown Check List

Dropdown Check List

Kolejna modyfikacja standardowych list rozwijanych, tym razem pozwalająca na wybór wielu pozycji z listy za pomocą pól typu "checkbox".

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

FormWizard

FormWizard

Wtyczka dla jQuery ułatwiająca tworzenie formularzy składających się z kilku kroków. Nawigacja pomiędzy poszczególnymi krokami odbywa się bez przeładowywania strony. Skrypt obsługuje walidacje pól formularza oraz przechodzenie pomiędzy krokami za pomocą przycisków przeglądarki.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Fancy Sliding Form

Fancy Sliding Form

Formularz składający się z kilku kroków, z efektownymi przejściami pomiędzy krokami. Jest to bardziej przykład budowy formularza niż jakaś uniwersalna biblioteka, tym niemniej jednak jest wart zainteresowania.

Cena: darmowy
Licencja: własna

Linki: oficjalna strona | demo | do pobrania

Smart Wizard

Smart Wizard

Kolejne narzędzie do tworzenia wieloetapowych formularzy. Posiada możliwość ładowania danych z zewnętrznych źródeł za pomocą AJAXa i walidację na etapie każdego z kroków. Nawigacja pomiędzy etapami może być umieszczona nad formularzem lub z boku.

Cena: darmowy
Licencja: Creative Commons Attribution-ShareAlike 3.0 Unported

Linki: oficjalna strona | demo | do pobrania

Uniform

Uniform

Kolejne narzędzie ujednolicające wygląd formularzy we wszystkich przeglądarkach i na wszystkich systemach operacyjnych. Wyróżnia się możliwością tworzenia schematów kolorystycznych i łatwym dostosowywaniem elementów formularza do własnych potrzeb.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Date Picker

Date Picker

Prosta wtyczka dla jQuery, pozwalająca na dodanie do pola formularza zgrabnego okienka z kalendarzem. Jak na tak prosty skrypt ma naprawdę spore możliwości. Pozwala na wybór jednej daty, jak również zakresu dat.

Cena: darmowy
Licencja: MIT / GPL

Linki: oficjalna strona | demo | do pobrania

Zebra Datepicker

Zebra Datepicker

Kolejny kalendarz, tym razem znacznie bardziej rozbudowany i lepiej wyglądający. Posiada możliwość wyboru pojedynczych dat oraz ich zakresu, pozwala nam także na ograniczenie możliwości wyboru daty do zawierającej się z zdefiniowanym zakresie. Wtyczka jest cały czas dość intensywnie rozwijana.

Cena: darmowy
Licencja: LGPL

Linki: oficjalna strona | demo | do pobrania

Password Strength

Password Strength

Bardzo prosta wtyczka dla jQuery, wyświetlająca pod polem typu "password" szacunkowy czas potrzebny do złamania wpisanego hasła. Efektowne, ale służące tylko do uświadomienia użytkownikowi jak słabe jest jego hasło.

Cena: darmowy
Licencja: MIT

Linki: oficjalna strona | demo | do pobrania

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Zobacz także

Komentarze



HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook