Eleganckie formularze na stronie WWW
W dzisiejszym Internecie praktycznie na każdej stronie WWW spotykamy się ze wszelkiego rodzaju formularzami. Zaczynając od prostego, kontaktowego formularza, na rozbudowanym rejestracyjnym kończąc. Na każdym blogu, portalu czy już obowiązkowo na społecznościówce – są wszędzie. Nawet na większości stron wizytówek czy portfolio. Ten tutorial pozwoli ci wyróżnić się w gąszczu szarych i nijakich „formów”. Za pomocą samego CSS z domieszką Photoshopa nauczysz się zamieniać każdy formularz w naprawdę przyciągający uwagę obiekt na stronie.
W tym wpisie pokażę jak zrobić formularz kontaktowy, jako że takowe są chyba najpopularniejsze. Ale prawda jest taka, że jeśli prześledzisz dokładnie cały tutorial, nie będziesz miał problemu ze stworzeniem dowolnego formularza w tym stylu.
HTML
Na początek musimy określić jakie będziemy mieli pola. Na pewno będą to: imię i nazwisko, email, telefon, skype i treść wiadomości. Wystarczy. No więc standardowo przekładamy to na HTML:<form action="#" method="post"> <label for="name">Imię i nazwisko</label> <input type="text" name="name" class="field" id="name" /> <label for="email">E-mail</label> <input type="text" name="email" class="field" id="email" /> <label for="phone">Telefon</label> <input type="text" name="phone" class="field" id="phone" /> <label for="skype">Skype</label> <input type="text" name="skype" class="field" id="skype" /> <label for="message">Wiadomość</label> <textarea class="tArea" id="message"></textarea> <input type="hidden" name="send" value="1" /> <input type="submit" value="Wyślij" name="submit" /> </form>
Wiem, że w tym momencie jest sajgon, ale spokojnie.. Zaraz to wszystko doprowadzimy do ładu i składu.
Żeby to zrobić, musimy każdą parę: Etykieta – Pole, wsadzić do diva. Dzięki temu częściowo ogarniemy ten bałagan jaki się wkradł do okna przeglądarki za sprawą powyższego kodu.
Następnie musimy się zastanowić, w jaki sposób zrobić takie pole input, które nie dość, że będzie miało niestandardowe tło, to do tego jeszcze każde będzie miało odrębną ikonkę z lewej strony. A w dodatku ma mieć jeszcze możliwość ustawienia dowolnej szerokości (ponieważ obiecałem, że przykład ten będzie można dostosować do swoich potrzeb więc na pewno jedną z nich będzie ustalenie własnej szerokości pola).
Myślę, że dobrym pomysłem będzie rozdzielić ten input na trzy części: lewą (z ikonką), środkową i prawą. Całość tego „składaka” wkładamy do nadrzędnego kontenera, żeby się to w ogóle jakos trzymało kupy 
Poniżej prezentuję aktualizację powyższego kodu:
<form> <div class="item"> <label for="name">Imię i nazwisko: </label> <div class="field-holder"> <div class="left name"></div> <input type="text" name="name" class="field" id="name" /> <div class="right"></div> <div class="clear"></div> </div> </div> <div class="item"> <label for="email">Email: </label> <div class="field-holder"> <div class="left email"></div> <input type="text" name="email" class="field" id="email" /> <div class="right"></div> <div class="clear"></div> </div> </div> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <div class="item"> <label for="phone">Telefon: </label> <div class="field-holder"> <div class="left phone"></div> <input type="text" name="phone" class="field" id="phone" /> <div class="right"></div> <div class="clear"></div> </div> </div> <div class="item"> <label for="skype">Skype: </label> <div class="field-holder"> <div class="left skype"></div> <input type="text" name="skype" class="field" id="skype" /> <div class="right"></div> <div class="clear"></div> </div> </div> <div class="item"> <label for="message">Wiadomość: </label> <div class="area-holder"> <div class="tArea-left"></div> <textarea name="message" id="message" class="tArea"></textarea> <div class="tArea-right"></div> <div class="clear"></div> </div> </div> <input type="hidden" name="sent" value="1" /> <div class="submit-holder"> <input type="submit" class="submit" name="submit" value="" title="Wyślij" /> <input type="reset" class="reset" value="" title="Wyczyść" /> </div> </form>
Photoshop
Teraz nadszedł czas na przygotowanie naszych pól formularza, do czego niezbędny będzie program Adobe Photoshop (poniższy przykład opisywany będzie na wersji CS3). 1. Tworzymy nowy dokument o wymiarach 500 x 200 pikseli, tło przeźroczyste (transparent).
2. Następnie wybieramy ‘Rounded rectangle tool’ (skrót klawiaturowy: U, rys. 1), ustawiamy Radius na 10px (rys.2), następnie w ‘Geometry options’ (rys.3) podajemy wysokość i szerokość prostokąta. Ja przyjąłem, że będzie miał on wymiary: 200px szerokość i 40px wysokość.
Rys.1 - Rounded Rectangle Tool
Rys.2 - Radius
Rys.3 - Geometry options
3. Klikamy prawym przyciskiem na nazwę warstwy, następnie wybieramy ‘Blending options…’
W zakładce ‘Inner shadow’ ustawiamy następujące style:
Inner shadow
Gradient overlay
4. Bierzemy teraz ‘Pencil Tool’ (skrót klawiaturowy: B, rys.4), ustawiamy jego rozmiar na 1px i rysujemy dwie pionowe linie obok siebe (jedna o kolorze #b4b4b4, a druga #d7d7d7), tak jak na rysunku poniżej:
Rys. 4 - Pencil Tool
5. Przedostatnia rzecz jaka nam pozostała to wstawienie jakichś ładnych ikonek obrazujących charakter danych pól. Do tego przykładu skorzystałem z wyszukiwarki ikon: www.iconfinder.com.
Rozmiar ikonek zależy od ciebie, dobrze by było żeby mieściły się w obrębie pola Ja przyjąłem, że będzie to 24px na 24px. Wstawiamy je po lewej stronie, między krawędzią a dwoma liniami, które przed momentem narysowaliśmy:
6. Teraz tylko musimy pociąć przygotowane pole na trzy części i możemy się zabrać za CSS! Tniemy w sposób taki jak pokazany na rysunkach poniżej. Aby wyciąć kawałek obrazka, należy użyć narzędzia prostokątnego zaznaczenia (skrót klawiaturowy: M) zaznaczyć część, która ma być wycięta, a następnie wybrać: Edit -> Copy merged. Teraz dajemy File -> New, wklejamy wyciętą część i zapisujemy w formacie PNG (File -> Save for web and devices…) Lewe strony (z poszczególnymi ikonkami) zapisuj pod nazwą field-left-{nazwa-pola}.png, np. field-left-skype.png. Jeśli chodzi o środkową i prawą część to wystarczy je wyciąć tylko raz, ponieważ dla każdego pola będą takie same. Zapisujemy je pod nazwą, odpowiednio: field-middle.png i field-right.png.
Tło dla pola textarea robimy w taki sam sposób, z tym że nie będzie tutaj ikonki. Czyli robimy sam gradient (od #b4b4b4 do #d7d7d7) i wycinamy. Jeśli do tej pory czytałeś uważnie co pisałem to nie będziesz miał z tym problemu
CSS
No i dotarliśmy do końcowego etapu czyli do stylowania formularza. Kluczowym elementem będzie dla nas kontener o klasie „field-holder” i wszystko to co w nim, bowiem całość składa się na nasz input. Oto jak będzie wyglądać plik ze stylami:* { padding:0; margin:0; } .clear { position: relative; clear: both; height: 0px; overflow: hidden; } input, textarea {border:0;font-family:Trebuchet MS;} body { background:#0b0b0b;color:white;padding: 10px 0 0 30px; } .item { padding-top: 10px; } .item label { display:block;width:170px;font-family:Trebuchet MS;font-size:16px; } .item .field-holder .left {float:left;width:39px;height:40px;} .item .field-holder .name { background:url(images/field-left-name.png) no-repeat; } .item .field-holder .email { background:url(images/field-left-mail.png) no-repeat; } .item .field-holder .phone { background:url(images/field-left-phone.png) no-repeat; } .item .field-holder .skype { background:url(images/field-left-skype.png) no-repeat; } .item .field-holder .field { background:url(images/field-middle.png) repeat-x;height:40px;float:left;line-height:38px;padding-left:10px; } .item .field-holder .right { background:url(images/field-right.png) no-repeat;width:13px;height:40px;float:left; } .item .area-holder .tArea-left { background:url(images/area-left.png) no-repeat;height:175px;width:18px;float:left; } .item .area-holder .tArea { background:url(images/area-middle.png) repeat-x;height:175px;width:400px;float:left;overflow:hidden;padding-top:5px; } .item .area-holder .tArea-right { background:url(images/area-right.png) no-repeat;height:175px;width:18px;float:left; }
Jeśli chodzi o samo stylowanie inputów to jest dokładnie tak jak już wcześniej wspominałem: mamy podział na trzy części. Lewa strona to div, którego tłem jest początek pola z odpowiednią ikonką. Środek ma tło.. środka Zauważ, że nie ma określonej szerokości tylko przyjmuje domyślną szerokość pola input. Jeśli chcesz to zmienić – śmiało. Po prostu dodaj do klasy .field atrybut width oraz jego wartość.. i już! Tło z gradientem automatycznie się „wydłuży” ponieważ podaliśmy przy jego definicji, że ma być powtarzane po osi x. W podobny sposób zrobione jest pole textarea.
No i to cała filozofia W następnym „odcinku” pokażę jak dorobić do takiego formularza walidację pól za pomocą jQuery (czyli oczywiście bez przeładowania strony… co może być bardziej denerwującego od czekania na przetworzenie formularza przez PHP, po czym i tak się dowiadujemy, że hasło jest za krótkie? ). Natomiast po walidacji zrobimy sobie obsługę formularza w PHP – jego zapis do bazy danych oraz jako alternatywę – wysyłka na maila.
Zapraszam za jakiś czas!
One Response to “Eleganckie formularze na stronie WWW”