Formularze - zmiana wyglądu

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

szukaj: formularz 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:

• 1 - Jednowierszowe pole textowe. Służy do wpisywania krótkich textów, takich jak imię nazwisko, miejscowość itp.
• 2 - Przycisk submit, służy do wysyłania wypełnionej zawartości formularza. // w tym wypadku kliknięcie na niego niczego nie spowoduje - powyżej widzisz przykładowe pola - nie formularz.
• 3 - Przyciski typu radio służą do wybierania jednej opcji z całego wachlarza możliwości.
• 4 - checkbox służy do zaznaczania więcej niż jednej możliwości z całego ich zbioru.
• 5 - I teraz wielowierszowe pole textowe. Służy do wprowadzania dłuższych łańcuchów znaków - wpisy do księgi gości, czy też wysyłanie e-maila ze strony.

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:

• 1 - tworzę klasę 'przycisk'
• 2 - obramowanie - to już było przy tabelach
• 3 - Określam rozmiar czcionki na 11 px [pixeli]
• 4 - kolor tła na czarny
• 5 - jeśli myszka znajdzie się nad tym obiektem, to zmieni wygląd na rączkę - nie we wszystkich przeglądarkach
• 6 - color textu ma być biały
• 7 - użyj czcionki 'tahoma'
• 8 - określ wysokość na 19 px [pixeli]

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:

• 1 - w tym wypadku użylem klasy 'pole' (możesz nie zrobić klasy, ale wtedy będziesz miał wszystkie 'textarea' jednakowe).
• 2 - obramowanie na zero, czyli nie ma być w ogólne widoczne
• 3 - rozmiar tekstu na 11px [pixeli]
• 4 - kolor tekstu biały
• 5 - w wielowierszowych polach tekstowych występują paski przewijania, ustalmy więc ich kolor. Jeśli tego nie zrobimy przyjmie kolor taki jak scrollbar na stronie (w przykładzie u góry - biały).
• 6 - tło ma być czarne

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:

• stwórz stronę 'formularz.htm' [skopiuj stronę index i zmień nazwę]
• umieść ją w folderze, w którym masz wszystkie inne strony z tego kursu
• popróbuj na wszystkich obiektach, niech każdy ma swoją własną klasę, ale te właściwości, które się powtarzają umieść w jednym 'input' - skorzystaj z dziedziczenia - miejsce trzeba oszczędzać!

Patryk 'yarpo' Jar

szukaj: formularz kurs css

Zagadnienia poruszane w tej części kursu:

• Określanie właściwości tabeli
• Tworzenie list za pomocą CSS
• Formularze - zmiana wyglądu