webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> kursy online >> kurs css >> Lekcja 3

Formularze - zmiana wyglądu

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-10-15

szukaj: formularz formularz kurs css kurs css

Czasy, kiedy formularze musiały straszyć użytkowników swoim szarym, często niepasującym do reszty strony wyglądem dawno minęły - na szczęście! Teraz prawie każdy obiekt może by pięknie zabarwiony, po najechaniu może się zmieniać kursor itp. Ogólnie wszystko co do tej pory poznałeś przyda się na tej lekcji. Właściwie teraz zaczyna się część kursu, w której będziesz poznawał coraz mniej nowych właściwości, a coraz więcej sposobów ich wykorzystania.

Pola formularza:

<input type="text" name="poletxt" value="To jest pole"> // 1

<input type="submit" name="wyslka" value="Wyślij form"> // 2

<input type="radio" name="wybor" value="opcja1"> // 3

<input type="radio" name="wybor" value="opcja2"> // 3

<input type="checkbox" name="sprawdz" value="ok"> // 4

&lt;textarea name="wpis" cols="12" rows="5">Wielowierszowe pole textowe&lt;/textarea> // 5 

Opis:

Być może dla kogoś, kto nigdy wcześniej nie miał styczności z formularzami, powyższe wyjaśnienia mogą nie mieć sensu. Jednak jest to kurs CSS, nie html - dlatego będę pokazywał jak zmienić wygląd powyższych obiektów - nie jak tworzyć formularze.

Teraz skoro już przypomniałeś sobie krótko sposób budowania pól formularzy czas zacząć je zmieniać. css

Zacznijmy od pola tekstowego:

/* będę tworzył klasę, od ciebie zależy sposób umieszczenia tego na stronie. */

input.przycisk {// 1
border-right: #9B0000 1px solid; // 2
border-top: #9B0000 1px solid;
border-bottom: #9B0000 1px solid;
border-left: #9B0000 1px solid;
font-size: 11px; // 3
background-color: black; // 4
cursor: hand; // 5
color: white; // 6
font-family: tahoma,sans-serif; // 7
height: 19px;} // 8

Opis:

Tym sposobem szybko i przyjemnie zmieniliśmy kolor jednowierszowego pola textowego. Jak widziałeś przed klasą wpisałem 'input' oznacza to, że tą klasą mogą być opisane wszystkie obiekty 'input', czyli - patrz na górę strony - pierwsze cztery. Wielowierszowe pole textowe nie zostanie opisane, ponieważ nie jest 'input' (mówiąc najprościej jak się da). A więc trzeba dla niego stworzyć nową klasę:

textarea.pole { // 1
border:0; // 2
font-size: 11px; // 3
color: white; // 4
scrollbar-arrow-color:#9B0000; // 5
scrollbar-base-color: white;
scrollbar-dark-shadow-color: white;
scrollbar-face-color: black;
scrollbar-shadow-color: silver;
background-color: black; } // 6

Opis:

Jak już pewnie zauważyłeś wiele rzeczy z poprzednich lekcji się powtarza. Ale to jeszcze nic! Poczekaj do lekcji o akapitach(!).

Zadanie dla ciebie:

Patryk 'yarpo' Jar

Zagadnienia poruszane w tej części kursu:

Szukasz profesjonalnej firmy?
Projektowanie stron www.
Przebijamy konkurencje!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org