Bardzo często zdarza się nam korzystać z formularza na stronie internetowej: gdy wypełniamy jakąś ankietę, zapisujemy się do subskrypcji, zakładamy konto pocztowe itp. Jednak standardowe pole formularza wygląda tak, jak wygląda…
Czyli zwykle tak: www.webinside.pl/materialy/rozne/form_standard.html Czasem możemy mieć ochotę zmienić takie pole na swojej stronie. Z pomocą przychodzą nam oczywiście style.
Spróbujemy teraz zmodyfikować pole tekstowe, aby wyglądało tak jak na stronie webinside.pl (troszkę na prawo i w górę:). Pole to w zasadzie nie wymaga dużej modyfikacji: trzeba tylko zmienić styl i kolor obramowania.
A więc zaczynamy:
| <input type=”text” size=”20″ style=” „> |
Do definicji pola tekstowego dodaliśmy atrybut STYLE, w którym ustalimy cechy obramowania oraz czcionki, jaką będzie wyświetlony tekst w tym polu.
| <input type=”text” size=”20″ style=”font-family:verdana, tahoma, sans-serif; font-size:11px; color:#000066; border: 1px solid #000066″> |
Korzystając z właściwości font-family ustawiliśmy rodzinę czcionek dla tekstu, który zostanie wprowadzony do pola formularza, font-size ustaliło nam wielkość czcionki, a color – kolor tekstu. Jeżeli chodzi o obramowanie, to 1px oznacza, że obramowanie będzie miało grubość 1 piksela, solid oznacza jednolitą linię, a #000066, to kolor tego obramowania. Proszę zauważyć, że skorzystaliśmy tutaj z mieszanych atrybutów. Gdybyśmy tego nie zrobili, musielibyśmy napisać o wiele więcej kodu, a więc:
| … style=”border-left: 1px solid #000066; border-top: 1px solid #000066; border-right: 1px solid #000066; border-bottom: 1px solid #000066″> |
Podanie samego polecenia border i jego wartości, bez umieszczania konkretnych własności polecenia border (a więc border-left; border-bottom itp.) zaoszczędziło nam wiele pracy!
Jak więc widać, stworzenie przyjemnego dla oka pola formularza wcale nie jest takie trudne! Wszystko zależy, tylko i wyłącznie, od naszej fantazji!
Zobacz przykład: www.webinside.pl/materialy/rozne/form_webinside.html
