sobota, 30 Październik 2010
Umożliwia wybranie stosowanych czcionek. Tekst na stronie WWW zostanie wyświetlony pierwszym z wybranej listy krojów czcionki, o ile jest on zainstalowany na komputerze użytkownika. W przeciwnym razie zastosowana zostanie druga w kolejności czcionka i tak do skutku. Możesz zdefiniować własną listę krojów pisma.
Określa rozmiar czcionki w pikselach lub względem otaczającego tekstu. Tak więc, konieczne jest podanie wartości liczbowej i jednostki. Jednostkę wybiera się z listy rozwijanej umieszczonej z prawej strony pola Size. Wielu projektantów woli stosować piksele, ponieważ zapewnia to powtarzalność efektu w różnych przeglądarkach.
Określa grubość czcionki. Można ją zdefiniować w pikselach lub względem otaczającego tekstu. Poeksperymentuj z różnymi ustawieniami i wybierz najlepsze według Ciebie. Zwykłemu tekstowi odpowiada wartość 400, a czcionce pogrubionej 700.
Umożliwia zdefiniowanie pisma zwykłego, kursywy i pochyłego.
Pozwala przełączać się między czcionką zwykła a kapitalikami. W przypadku wybrania kapitalików, cały tekst jest wyświetlany wielkimi literami, a wersaliki są nieco większe niż zwykłe litery.*
Definiuje wysokość wiersza (musisz podać liczbę i jednostkę). Jest to odstęp między kolejnymi wierszami dokumentu, zazwyczaj o wartości kilku pikseli. Odstęp ten można dowolnie zwiększać lub
zmniejszać.*
Przekształca tekst w tekst pisany wielkimi lub małymi literami, albo wersalikami.
Umożliwia dodanie podkreślenia, nadkreślenia i przekreślenia oraz efektu migającego tekstu. Tego ostatniego efektu nie nadużywaj. Irytuje on wielu użytkowników. Opcje tej sekcji pozwalają wyłączyć podkreślanie połączeń, czego tak bardzo pragną twórcy stron WWW.
Umożliwia wybranie koloru tekstu.
Ustawienia kategorii Background służą wyłącznie do definiowania tła dokumentów. Początkowo tła stron były automatycznie składane z kafelków ? identycznych obrazów powtarzających się w pionie i poziomie. Nie dość, że ograniczało to kreatywność, to jeszcze na dodatek działało irytująco po odwiedzeniu iluś tam stron. Dzięki arkuszom CSS znacznie powiększyła się kontrola projektanta nad tłem strony.
Umożliwia wybranie koloru tła, które będzie stosowane poprzez arkusz stylów CSS.
Umożliwia wybranie obrazu jako tła, które będzie stosowane poprzez arkusz stylów CSS.
Umożliwia złożenie tła z powtarzalnych elementów i określenie sposobu zestawiania elementów. Do wyboru są cztery możliwości. Ustawienie no-repeat wymusza jednokrotne wyświetlenie obrazu, bez powtórzeń. Opcja Repeat działa podobnie jak domyślna metoda składania tła z kafelków ? obraz jest powtarzany w pionie i w poziomie strony. Opcja Repeat-x powoduje wyświetlenie powtórzeń tylko w poziomie, a Repeat-y ? tylko w pionie.
Pozwala wybrać, czy tło ma przewijać się wraz ze stroną, czy też pozostać nieruchome i niezależne od przewijania strony.
Umożliwia zdefiniowanie pozycji obrazu wskazanego jako tło (na osi x). Pozycja jest określana względem elementu HTML, do którego styl jest dołączony.
Ustawienia kategorii Border pozwalają skonfigurować i wyświetlić obramowania wokół różnych elementów, takich jak obrazy lub tekst. Są one bardzo użyteczne przy umieszczaniu akapitów tekstu w ramkach. Poszczególne ustawienia tej kategorii
Umożliwia zdefiniowanie grubości obramowania w oparciu o miarę względną lub liczbową.
Umożliwia wybranie koloru krawędzi obramowania.*
Pozwala wybrać styl obramowania (dla wszystkich czterech krawędzi). Wśród opcji są: dotted (kropki), dashed (linia przerywana), solid (linia ciągła), double (linia podwójna), groove (pseudo 3D ? rowek), ridge (pseudo 3D ? linia wypukła), inset (wypukłe) i outset (wklęsłe).
Tagi: css, style
Kategoria: Tworzenie stron | Komentarze są wyłączone
czwartek, 28 Październik 2010
Tam, gdzie kończy się HTML, tam zaczyna się CSS ? a przynajmniej w aspekcie układu i stylu dokumentu internetowego. Wraz z rozwojem przeglądarek i śmiałości twórców stron WWW, termin kaskadowe arkusze stylów przejdzie do codzienności, a same arkusze CSS będą stosowane na niemal wszystkich stronach WWW. Ponieważ to wiemy, nie możemy nie sięgnąć po tę technologię. Zacznijmy od zastanowienia się nad tym, czym w rzeczywistości są arkusze CSS.
O impresji dzieła multimedialnego lub wizualnego wywieranej na publiczność decydują dwa czynniki: treść i styl. Tak jest zawsze, niezależnie od tego, czy dzieło ma postać wirtualną, jak strona WWW, czy też materialną. W odniesieniu do publikacji sieciowych termin treść oznacza zawartość strony WWW. To przede wszystkim zawartość przyciąga czytelników. Z drugiej strony styl to finezja, dekoracja i ostatnie muśnięcie, dzięki którym danie staje się bardziej smakowite.
Tradycyjny HTML usiłuje wspomóc projektanta w stylizacji stron, ale bieżąca implementacja języka jest mało precyzyjna i ma ograniczone możliwości. I tu właśnie pojawiają się kaskadowe arkusze stylów, propozycja autorstwa W3C standaryzacji zaawansowanych atrybutów stylu do zastosowań na stronach WWW. Dzięki arkuszom stylów nie ma już potrzeby stosowania stylu do każdego elementu, czy nawet każdej strony. Jeden styl może być wykorzystywany w całej witrynie, a jego aktualizacja wymaga jedynie zmian w jednym pliku. Co więcej, wszelkie zmiany wprowadzone w procesie aktualizacji są natychmiast uwzględniane na wszystkich stronach, do których styl został zastosowany. Arkusze stylów wykazują dwojakiego rodzaju przewagę nad tradycyjnym formatowaniem HTML:
W kwestii stylu umożliwiają uzyskanie efektów, które są praktycznie nie do realizacji za pomocą języka HTML. Dotyczy to wykorzystania warstw i innych efektów dynamicznych.
W kwestii ekonomiki pracy zdecydowanie przyspieszają i ułatwiają aktualizację stylów stron WWW.
Podobnie jak w przypadku potraw, styl i stopień perfekcji jego definicji zależą od dwóch spraw. Pierwsza to czas i pieniądze. Budżet i ograniczenia czasowe określające termin przygotowania witryny wymuszają włączenie bądź wyłączenie pewnych rozwiązań (podobnie jak w przypadku wyboru między barem szybkiej obsługi a restauracją z prawdziwego zdarzenia). Drugim czynnikiem są Twoi czytelnicy. Typowy kierowca ciężarówki zamówi z dużym prawdopodobieństwem solidny stek, a typowa nastolatka dbająca o linię będzie preferowała sałatkę szefa. Zawsze więc staraj się przeanalizować Twoją potencjalną publiczność pod kątem preferencji i w oparciu o taką analizę równoważ zawartość i styl każdej aplikacji.
Arkusze stylów budowane są z reguł, które rezydują w dokumencie lub osobnym pliku połączonym z dokumentem. Reguła zawiera dwa elementy: selektor i deklarację. Deklarację tworzy z kolei para: właściwość i wartość. Oto przykład reguły CSS:
h3 {text-decoration: underline }
W tym przykładzie h3 to selektor. To on właśnie wiąże arkusz stylów z dokumentem. W tym przypadku definiowany jest styl elementu HTML jakim jest nagłówek Heading 3. Wyrażenie text-decoration: underline to deklaracja ? definicja sposobu, w jaki chcesz wpłynąć na znacznik <H3>. W naszym przykładzie text-decoration to właściwość, a underline wartość. Tak więc reguła spowoduje zastosowanie podkreślenia do tekstu zawartego między znacznikami <H3></H3>. Jak zauważysz, inne atrybuty znacznika <H3> nie zostaną usunięte ? innymi słowy formatowanie poprzez arkusze CSS nie usuwa formatowania domyślnego, a jedynie go rozszerza. Nie oznacza to jednak, że nie masz możliwości całkowitej zmiany definicji stylu H3. Jest taka możliwość, a w dalszej części rozdziału dowiesz się jak z niej korzystać.
Jak widzisz, zmiana właściwości znacznika jest bardzo prosta. Co więcej, jak już wspominałem, można zmienić także całą definicję znacznika. Jak to zrobić? Tutaj dochodzimy do innej cechy kaskadowych arkuszy stylów. Reguła arkusza CSS może zawierać wiele deklaracji. Rozbudowując poprzedni przykład możesz dodać deklaracje koloru i rozmiaru, podobne to przedstawionych poniżej:
h3 { text-decoration: underline; color: blue; font-size: 14pt }
Nie tylko deklaracje można grupować, lecz także selektory. O ile deklaracje oddziela się średnikami, to grupowane selektory przecinkami. Oto przykład arkusza CSS, w którym definiowane są identyczne style dla tekstu nagłówka H3 i tekstu pogrubionego:
h3, b { text-decoration: underline; color: blue; font-size: 14pt }
Inną charakterystyczną cechą arkuszy CSS jest możliwość ich zastosowania do wielu znaczników poprzez dziedziczenie. Elementy zawarte w selektorze CSS będą dziedziczyć deklarację stylu tego selektora. Na przykład jeżeli w obszarze elementu H3 znajdują się inne znaczniki, odziedziczą one deklaracje stylu określone dla H3. Oto przykład tego, o czy tu mówiliśmy:
<h3>Witam na mojej <em>NOWEJ</em> stronie WWW</h3>
W tym przykładzie tekst NOWEJ odziedziczyłby właściwości takie jak podkreślenie, niebieski kolor tekstu i rozmiar czcionki 14 punktów, o ile oczywiście zastosowana zostałaby deklaracja stylu H3 taka, jak w poprzednim przykładzie. Znacznik <em> również wpłynąłby na styl tekstu, powodując dodanie emfazy (kursywa).
Dziedziczenie funkcjonuje także w relacji element nadrzędny-element podrzędny. Dzięki tej zależności istnieje możliwość określenia atrybutów stylu stosowanych na całej stronie za pomocą jednego stylu. Można to uzyskać definiując selektor body, tak jak w tym oto przykładzie:
body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt }
W ten sposób wszystkie elementy dokumentu HTML domyślnie dziedziczą zdefiniowane w deklaracji właściwości (oczywiście o ile mogą mieć takie właściwości). Nie jest to żelazna reguła, od której nie ma odstępstwa. Odstępstwa są możliwe, a wprowadza się je bezpośrednio dla danego przypadku.
Mówiąc o cechach kaskadowych arkuszy stylów CSS ograniczaliśmy się na razie do dwóch członów ich nazwy. Poruszaliśmy kwestię stylu i arkusza. Trzeci aspekt, także znajdujący odzwierciedlenie w nazwie, jest niewątpliwie decydujący i chyba równie ważny co pozostałe. To oczywiście termin kaskadowy. Termin ten opisuje zasadę przejmowania pierwszeństwa przez style lokalne nad stylami zdefiniowanymi na poziomie strony, które z kolei dominują nad stylami globalnymi.
Wyobraź sobie, że korzystasz z zewnętrznego arkusza stylów, który definiuje styl całego tekstu przypisując mu krój czcionki Arial, rozmiar 12 pt i kolor czarny (można by to osiągnąć poprzez zmianę definicji znacznika <body>). Taka definicja miałaby wpływ na wszystkie elementy dokumentu HTML, dla których dopuszczalne jest stosowanie którejkolwiek z tych trzech właściwości. Jest to dobra metoda ustanawiania i stosowania ogólnego układu i stylu strony WWW. Jeśli na przykład zdecydowałbyś się na dodanie do fotografii podpisów pisanych kursywą
o rozmiarze 8 punktów drukarskich i na dodatek chciałbyś zastosować do tego celu styl nagłówka H1, aby wyróżnić znacząco podpisy, należałoby utworzyć nowy styl, stanowiący redefinicję stylu H1. Wówczas w arkuszu stylów styl lokalny zdominuje styl wyższego poziomu. Umożliwi to zastosowanie stylu podpisu do podpisów i zapewni im żądany wygląd nawet w warunkach zasad stylu globalnego.
Atrybuty stylu
W metodzie najniższego poziomu wykorzystuje się atrybuty stylu, które umieszczane są w znaczniku HTML, do którego styl ma być zastosowany. Ustawienia stylu wprowadzone w ten sposób dominują nad wszelkimi innymi definicjami stylu (tego typu zastosowanie stylu nosi nazwę stylu wpisanego ? przypis tłum.). Oto przykład typowego zastosowania atrybutów stylu:
<div id=?Layer1? style=?position:absolute; width:358px; height:378px; zindex:1; left: 160px; top: 225px?></div>
Jest to kod definiujący element DHTML zwany warstwą. Jak możesz zobaczyć, położenie warstwy na stronie WWW określone jest w arkuszu CSS. Ponieważ warstwy zazwyczaj miewają różne pozycje, reguły CSS są definiowane w obrębie każdego znacznika warstwy osobno.
Style osadzone
W metodzie pośredniego poziomu styl stosowany jest w obrębie strony, lecz nie w poszczególnych znacznikach. Takie podejście pozwala zdefiniować styl strony bez potrzeby przygotowywania odrębnego pliku. Jedną z największych zalet takiego rozwiązania jest szybka aktualizacja stylu ? mówiliśmy o tym wcześniej. Chociaż regułę stylu można wpisać w dowolnym miejscu dokumentu, standardowo przyjmuje się, że miejscem osadzonego stylu CSS jest sekcja HEAD dokumentu. Oto typowa definicja stylu osadzonego:
<head>
<meta blah blah…>
<head>
<style type=?text/css?>
<!-.
background { background-color: #0066FF; background-image: url(bg.gif);background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
–>
</style>
</head>
</head>
Analizując ten kod źródłowy zauważysz w pierwszej kolejności, że osadzony arkusz stylów jest zawarty w elemencie STYLE, którego wartością atrybutu type jest text/css. Zauważysz także prawdopodobnie, choć być może nie będziesz wiedział na razie co to oznacza, że rzeczywista definicja stylu umieszczona jest w znacznikach komentarza HTML.
W tych przeglądarkach, które nie potrafią obsługiwać arkuszy stylów, znaczniki komentarza obejmujące wszystkie reguły CSS spowodują potraktowanie kodu jako komentarza (i pominięcie go). Z kolei te przeglądarki, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów.
Zewnętrzne arkusze stylów
Ostatnia z metod wykorzystuje zewnętrzne arkusze stylów. Jest to idealne rozwiązanie tam, gdzie celem jest stworzenie ogólnego stylu całej witryny (na przykład witryny firmy). Zmiana jednej reguły, wpłynie na styl wszystkich stron, na których umieszczono odwołania do zewnętrznego arkusza stylów. Jest to jeden z powodów, dla których arkusze CSS mają tak szerokie możliwości.
Zewnętrzne arkusze stylów są łączone z dokumentem za pomocą połączenia. Aby zastosować do dokumentu zewnętrzny arkusz CSS, możesz skorzystać z dwóch metod. Pierwsza metoda opiera się na imporcie. Oto jej przykład:
<style type=?text/css?> @import?arkusz_stylow.css?; </style>
W metodzie alternatywnej definiowane jest połączenie do pliku zewnętrznego zawierającego arkusz CSS:
<link rel=?stylesheet? href=?arkusz_stylow.css? type=”text/css”>
Wyrażenie to powinno znaleźć się na zewnątrz jakichkolwiek znaczników określających styl, lecz nadal w obrębie znaczników <head></head>. Ta metoda uznana jest za standardową metodę łączenia zewnętrznych arkuszy stylów z dokumentem. Wynika to między innymi z tego, że połączenia jako takie są obsługiwane przez większość przeglądarek. Zawartość pliku .css ma taką samą postać jak w przypadku każdego innego arkusza stylów. Oto przykładowa definicja:
.background { background-color: #0066FF; background-image: url(bg.gif);background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
Tagi: arkusz, css, style
Kategoria: Tworzenie stron | Komentarze są wyłączone
poniedziałek, 25 Październik 2010
Formularze są złem koniecznym współczesnego świata. Czasami człowiek ma wrażenie, że wszystko się kręci wokół nich. Gdy się rodzimy, trzeba wypełnić formularz. Gdy umieramy, także ktoś wypełnia niezbędny formularz. Niestety Internet nie pozwala od nich uciec. Formularze internetowe nie są już tak nudnymi dokumentami, do jakich przywykłeś. Są interaktywne, a użytkownik może je przesłać, poprosić o dodatkowe informacje czy nawet nawigować z ich pomocą po Twoich stronach. Takie formularze ułatwiają życie. To są dobre formularze.
Umieszczając na swoich stronach internetowych formularze, nawiązujesz kontakt z czytelnikiem tych stron. Wypełniając i wysyłając formularz użytkownik może poprosić o dodatkowe informacje, wyrazić opinię o witrynie czy nawet dokonać zakupów. Ty z kolei, wykorzystując pewne elementy formularza, możesz projektować strony o rozszerzonych możliwościach.
Formularz ma dostarczyć szereg informacji od użytkownika. Źródłem informacji są wypełnione przez użytkownika pola opcji lub pola tekstowe. Po wypełnieniu, formularz jest przesyłany do serwera, gdzie niewielki skrypt obrabia jego zawartość, a rezultaty przekazuje do bazy danych. Zazwyczaj na tym etapie użytkownik otrzymuje potwierdzenie przesłania formularza. Wyobraźmy sobie formularz, w którym użytkownik jest proszony o podanie swojego nazwiska, adresu e-mail i numeru telefonu. Dane te powinien wpisać w trzy pola tekstowe. Wypełniony formularz jest wysyłany naciśnięciem przycisku Submit. Gdy użytkownik naciśnie ten przycisk, klient wysyła do serwera łańcuch informacji z formularza.
Kod HTML tworzący formularz nie jest skomplikowany i bardzo łatwo można go sobie przyswoić. Aby w pełni wykorzystać możliwości formularzy i zrozumieć ich działanie musisz koniecznie przynajmniej się z nim zaznajomić. Formularz definiowany jest przez element FORM, który składa się z otwierającego znacznika <FORM> i zamykającego znacznika </FORM>. W elemencie FORM zagnieżdżane są znaczniki <INPUT> i <SELECT>, a ich zadaniem jest utworzyć rzeczywiste elementy formularza. W tym miejscu należy wspomnieć, że formularz może zawierać wiele elementów INPUT. A oto podstawowa struktura formularza:
<FORM>
<INPUT>
<INPUT>
<INPUT> </FORM>
Znaczniki formularza można zagnieżdżać w obrębie innych znaczników HTML i odwrotnie ? znaczniki te można umieszczać w elemencie FORM. Znaczniki nie powinny się jednak nakładać, a elementy FORM nie powinny być w sobie zagnieżdżane. Wróćmy do początku i zajmijmy się atrybutami. Znacznik <FORM> ma siedem możliwych atrybutów. Te, z których będziesz korzystał, mają wpływ na funkcjonalność formularzy. Poprzez odpowiednie wartości możesz określić dokładnie zachowanie formularza w relacji z klientem. Możesz zdefiniować nazwę formularza, zdecydować gdzie i jak mają zostać przesłane dane, a nawet wskazać obiekt, do którego rezultat ma być wysłany (okno lub ramka). Oto lista atrybutów znacznika <FORM>:
NAME=??
ACTION=??
METHOD=??
TARGET=??
ENCTYPE=??
ACCEPT=??
ACCEPT-CHARSET=??
Oto przykładowa definicja, w której wykorzystano wszystkie atrybuty znacznika <FORM>: <FORM NAME=?clientinfo? ACTION=?http://www.cod.com.pl/cgi-bin/mailform.pl? METHOD=?Post? TARGET=?_blank? ENCTYPE=?multipart/form-data?>
Definiując nazwy formularza i jego elementów pamiętaj o paru rzeczach. Przede wszystkim nie stosuj w nazwach spacji i znaków specjalnych. Po drugie, nie stosuj słów zarezerwowanych (są to słowa stosowane przez języki skryptowe, które mogą wprowadzić w błąd interpreter skryptu, jeśli zostaną zastosowane jako nazwa obiektu. Ostatnia uwaga. Ponieważ tworzysz obiekty, które mogą być rozpoznawane przez języki skryptowe (takie jak JavaScript), warto nadawać im intuicyjne nazwy, aby ułatwić sobie późniejsze odwoływanie się do tych obiektów w skryptach.
Atrybut ACTION skierowuje formularz pod adres, pod którym dostępny jest skrypt CGI o nazwie mailform (jest to skrypt napisany w języku Pearl). CGI ? Common Gate Interface ? to skrypty stosowane do przetwarzania danych z formularzy. Zazwyczaj rezydują w katalogu cgi-bin lub cgi_bin.
Atrybut METHOD może przyjmować dwie wartości: Get i Post. W przypadku metody Get dane formularza są wysyłane pod adres URL określony w atrybucie ACTION. Metoda ta nakłada jednak ograniczenia na liczbę znaków. Nie jest ponadto bezpieczna. Jeśli więc formularze dotyczą e-komercji lub zawierają inne dane, których nie należy ujawniać, przy ich wysyłaniu powinna być stosowana metoda Post. W tym przypadku cała zawartość formularza jest wysyłana jako treść wiadomości, co znosi ograniczenie liczby znaków. Należy jednak wspomnieć, że metoda Get jest domyślną metodą w większości przeglądarek, jest to także najpowszechniej obsługiwany format. Wybór metody zależy w dużym stopniu od tego, z jakiej aplikacji lub skryptu CGI będziesz korzystać przy przetwarzaniu formularzy.
Atrybut TARGET stosowany jest do wskazania celu (ramki lub okna), w którym ma zostać wyświetlony dokument zwrócony z serwera. Do wyboru masz cztery predefiniowane cele czy też nazwy zarezerwowane, które określają żądane miejsce. Oto one:
_blank ? rezultat zostanie wyświetlony w nowym oknie, które pojawi się przed
bieżącym oknem przeglądarki.
_parent ? skierowuje dokument do nadrzędnego układu ramek zawierającego dokument bieżący.
_self ? spowoduje zastąpienie dokumentu bieżącego.
_top ? zastępuje zawartość bieżącego okna, także wówczas, gdy prezentowało ono układ ramek.
Jeśli cel nie zostanie zdefiniowany, przyjmowany jest cel domyślny _self.
Pole tekstowe hasła stanowi pewną odmianę jednowierszowego pola tekstowego. Zwykłe pole tekstowe oddaje dokładnie na ekranie tekst wprowadzony w nie z klawiatury. Czasami jednak nie jest to pożądane. Aby wpisywane w pole tekstowe litery zastępowane były na ekranie znakami domyślnymi, zastąp w znaczniku <INPUT> wartość TEXT atrybutu TYPE wartością PASSWORD. W systemach Windows stosowanym znakiem domyślnym jest gwiazdka (*); na komputerach pracujących pod kontrolą systemu Macintosh jest to kropka (.). Pamiętaj jednak, zastosowanie wartości PASSWORD atrybutu TYPE nie spowoduje kodowania danych. Jest to tylko wizualne zabezpieczenie przesyłanych danych.
Wielowierszowe pola tekstowe umożliwiają użytkownikowi wprowadzenie dłuższych i bardziej szczegółowych tekstów. Pola takie zaopatrzone są w poziome i pionowe paski przewijania i prezentują jednocześnie kilka wierszy tekstu (patrz rysunek 11.9). Aby przekształcić jednowierszowe pole tekstowe w pole wielowierszowe, zaznacz pole tekstowe i w sekcji Type inspektora Property wybierz pole opcji Multiline. Zwróć uwagę, że po zmianie typu pola, zmienia się także znacznik je definiujący. Znacznik <INPUT> zostaje bowiem zastąpiony znacznikiem <TEXTAREA>.
Bardziej strukturalnym podejściem do kwestii zbierania informacji jest rozwiązanie umożliwiające użytkownikowi wybieranie opcji z listy. Mając do dyspozycji pola wyboru użytkownik swobodnie wybiera (lub zaznacza) dowolną kombinację z oferowanych przez Ciebie możliwości.
W ten sam sposób jak pole tekstowe można wstawić przycisk opcji. Różnica między tymi obiektami polega na sposobie dokonywania wyboru. W przypadku korzystania z przycisków opcji, użytkownik może wybrać tylko jedną z możliwości. Oto parę istotnych uwag dotyczących przycisków opcji. Przede wszystkim pamiętaj, że przyciski opcji umożliwiają wybranie tylko jednej możliwości z całej ich grupy. Po drugie, grupa przycisków opcji jest identyfikowana poprzez ten sam atrybut NAME (aby zgrupować przyciski opcji, nadaj im tę samą nazwę). I ostatnia uwaga ? do identyfikacji poszczególnych przycisków grupy stosowana jest atrybut value. Przy przesyłaniu formularza, przesyłana jest wspólna nazwa przycisków oraz wartość przycisku zaznaczonego. Oto przykład kodu:
<FORM>
<INPUT TYPE=?radio? NAME=rbset_one? value=?option1?>
<INPUT TYPE=?radio? NAME=rbset_one? value=?option2?>
<INPUT TYPE=?radio? NAME=rbset_one? value=?option3?>
<INPUT TYPE=?radio? NAME=rbset_two? value=?option1?>
<INPUT TYPE=?radio? NAME=rbset_two? value=?option2?>
<INPUT TYPE=?radio? NAME=rbset_two? value=?option3?>
</FORM>
Menu rozwijane umożliwia użytkownikowi wybranie opcji z listy możliwości. Jego niewątpliwą zaletą jest oszczędność miejsca na ekranie. Ponadto jest ono bardzo intuicyjnym elementem strony, bowiem użytkownicy nieustannie spotkając z nim w różnych miejscach wiedzą do czego służy. Menu rozwijane tworzone jest za pomocą dwóch par znaczników. Są to: <SELECT></SELECT> i <OPTION></OPTION>. Przedstawiony poniżej fragment kodu pokazuje sposób zagnieżdżania tych znaczników w kodzie.
<FORM>
<SELECT>
<OPTION VALUE=?value1?> etykieta_1 </OPTION>
<OPTION VALUE=?value2?> etykieta_2 </OPTION>
<OPTION VALUE=?value3?> etykieta_3 </OPTION>
</SELECT>
</FORM>
Pamiętaj o definiowaniu nazw elementów. Zacznij więc od zdefiniowania nazwy elementu SELECT, a następnie w elemencie OPTION podaj etykietę opcji (jest ona umieszczana między znacznikami <OPTION> </OPTION>). Wreszcie określ wartość atrybutu value znacznika <OPTION>. Przy przesyłaniu formularza, wraz z wartością atrybutu VALUE znacznika <OPTION> odpowiadającego zaznaczonej opcji, do serwera przesyłana jest nazwa elementu SELECT. Etykietę stanowi tekst pojawiający się jako pozycja listy rozwijanej.
Lista przewijana przypomina menu rozwijane, aczkolwiek między oboma obiektami istnieją niewielkie różnice. Rozwijanie zastąpione jest tu przewijaniem. Menu prezentuje jedną pozycję, a na liście rozwijanej jednocześnie można wyświetlić kilka lub wiele pozycji. Można też tak skonfigurować ustawienia, aby umożliwić użytkownikowi wybranie kilku pozycji naraz.
Pole danych typu HIDDEN (Hidden Field) znajduje swoje zastosowanie, gdy z formularza do serwera przesyłane są informacje, które nie zostały wprowadzone przez użytkownika lub mają być ukryte przed użytkownikiem.
Zasada funkcjonowania tego pola jest taka sama jak innych pól definiowanych za pomocą znacznika <INPUT>, podobnie też przebiega procedura wstawiania takiego pola w dokumencie. Ustaw punkt wstawiania w miejscu, w którym pole ma się pojawić i kliknij ikonę Hidden Field na palecie obiektów. Następnie zdefiniuj w polu HiddenField inspektora Property nazwę pola oraz atrybut VALUE. W widoku projektu pole typu HIDDEN jest reprezentowane przez żółty znacznik.
Tagi: form, formularz, formularze
Kategoria: Tworzenie stron | Komentarze są wyłączone