Tworząc strony dość często trzeba powojować z formularzami. Niestety dość często się zdarza współpraca z grafikiem, który o htmlu to za dużo nie wie, a wizje formularzy ma dość... finezyjne (np. ostylowany button przy input type="file"). Wtedy możemy albo zacząć ostro kombinować (background, js, pełna przezroczstość... po prostu cuda) albo powiedzieć, że się nie da. Ostatecznie pozostaje nam użyć Niceforms, czyli skryptu, w którym autor ostro pokombinował za nas.

Jak to działa?

Dla usera - po prostu banalnie. Całość ogranicza się do dopisania linijki (załączenie skryptu) oraz dopisania class="niceform". Dodatkowo jeżeli chcemy zmienić wygląd formatek należy zedytować pliczek psd załączony do archiwum i zapisać obrazki.

Pod maską już się dzieje o wiele więcej rzeczy. Najprościej mówiąc wszystko działa na zasadzie ukrycia pola formularza, utworzenia nowego obiektu, który służy głównie do wyglądania oraz przekazywania wartości wpisywanej/wyklikiwanej w nasz nowy twór do ukrytego już pola.

Taki niestety urok stylowania formularzy i stąd tak kombinacje.

Prosty formularzyk

Najpierw będziemy bazować na tym co otrzymujemy z Niceforms.

Nasz formularzyk będzie banalnym polem do wpisania jakiegoś słowa.

Po pierwsze pobieramy Niceforms ze strony autora: www.emblematiq.com.

W sekcji head dopisujemy:

Następnie w body piszemy już formularz właściwy:

Najważniejsze jest to class="niceform". I tak oto wygląda najprostsza wersja naszego formularza.

Załączone demo prezentujące wszystkie uroki Niceforms wygląda zaś następująco.

A gdybyśmy chcieli zmienić grafikę?

Potrzebować będziemy Photoshopa by otworzyć pliczek nf-standard-blue.psd. W nim zawarte są wszystkie grafiki związane z formularzem. Dodatkowo przygotowane są linie do cięcia, więc wystarczy wybrać zapisz dla web i zapisać same grafiki. Oczywiście można to zrobić po swojemu, tylko wtedy będzie troszkę więcej zabawy ze stylem. W sumie zabawy z PSem zostawiam Wam.

Opiszę teraz które klasy są używane do których elementów formularzy.

input type="text" - NFText(robi za kontener w którym trzymane są kolejne elementy oraz to właśnie nim stylujemy tekst, który wpisujemy), NFTextCenter(odpowiada za rozciągającą się część tła - czyli środkową). NFTextLeft(odpowiada za lewą krawędź inputa), NFTextRight(odpowiada za prawą krawędź inputa)

input type="checkbox" - NFCheck(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="radio" - NFRadio(odpowiada za ten buttonik czy coś jest zaznaczone czy nie)

input type="button" - NFButton(środkowa część przycisku, rozszerzająca się w zależności od ilości tekstu), NFButtonLeft(lewa krawędź przycisku), NFButtonRight(prawa krawędź przycisku)

input type="file" - NFFileButton(fragment udający guzik w file), NFFileNew(nowy input który udaje funkcjonalność lewej części file) dodadkowo wykorzystywane są tutaj NFText oraz NFTextLeft

textarea - NFTextarea(tu wklepujemy zawartość), NFTextareaTop, NFTextareaBottom, NFTextareaTopLeft, NFTextareaTopRight, NFTextareaBottomLeft, NFTextareaBottomRight(poszczególne krawędzie pola), NFTextareaTopH, NFTextareaBottomH, NFTextareaTopLeftH, NFTextareaTopRightH, NFTextareaBottomLeftH, NFTextareaBottomRightH(poszczególne krawędzie po najeździe)

select - NFSelect(kontener dla kolejnych elementów), NFSelectLeft(lewa część selecta - warto się przyjrzeć obrazkom, że zrozumieć jak to jest konstruowane), NFSelectRight(prawa część selecta), NFSelectOptions(czyli to co się pojawia po pliknięciu w selecta - tak naprawdę jest to ul)

select multiple="multiple" - w sumie jest to prawie to co textarea, tylko nazwy zamiast NFTextarea mają na początku NFMultiSelect

Poza tymi klasami mamy kilka dodatkowych, których w większości przypadków ruszać nie należy:
NFfocused - są nadawane elementom na których obecnie jest focus
NFh - przesuwa tło by nadać mu pozycję 0 100% (używane w większości formatek)
NFhr - przesuwa tło by nadać mu pozycję 100% 100% (używane przy select)
NFhidden - ukrywa elementy, ale w taki sposób, że dalej są one funkcjonale (poprzez nadanie pełnej przezroczystości)

Mając opis klas, psd oraz gotowy wzór pozostaje tylko troszkę cierpliwości i powinno się udać.

Jeżeli nie będziecie zmieniać rozmiarów podmiana obrazków będzie bardzo szybkim procesem. W przeciwnym razie będzie trzeba troszkę podrasować arkusz stylu.

Podsumowanie

Jak widzicie stworzenie wymarzonych formularzy dzięki Niceforms jest w sumie prostym i w miarę przyjemnym procesem. Szkoda, że do osiągnięcia takich efektów potrzebne jest sporo tricków dziejących się pod maską. Pozostaję nam więc starać się edukować grafików ze szczególnie ułańską fantazją, żeby akurat przy formularzach troszkę odpuścili.