Formularze na stronie www

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.

Kategoria: Tworzenie stron dnia 25 października 2010 Komentarze są wyłączone Tagi: , ,

Joomla i treść

Czy ważniejsza jest naczelna ranga w rezultatach wyszukiwania Google czy prędzej ogromna rangę treści (zawartości) naszej witryny z punktu pojmowania użytkownika?

Aby odpowiedzieć sobie na to pytanie trzeba wgłębić się trochę w sposób rozmyślania użytkownika wyszukiwarki. Warto też sobie zadać pytanie: czy zawsze wstępuję na stronicę wstawianą na pierwotnym rejonie wyrobów wyszukiwania? Replice zdołają być oczywiście inne, lecz samodzielnie nie zawsze klikam w główną zasugerowaną riposta przez wyszukiwarkę. Rozważam też, że znaczna frakcja użytkowników, jeżeli nie mnogość czyni jednakowo. Dlatego teraz trzeba sobie spróbować odpowiedzieć na pytanie: dlaczego tak się dzieje?
Dlaczego nie ranga?

Zasadniczy prestiż na to, czy klikamy w wytwór wyszukiwania ma podpis witryny i portret. Nie ma najmniejszego sensu do spisu złożyć same słowa kluczowe, czy też portret niegramatycznie ułożony. Wiem przykłady stronic internetowych przedsiębiorstw zatrudniających się pozycjonowaniem i optymalizacją, które posiadają niegramatyczne wykazy (np. nie znajdziesz tańszego pozycjonowanie i optymalizacja stronic internetowych!). Takie planowanie spisu odmawia użytkownika. Jeżeli na przeciwnym-trzecim rejonie użytkownik ujrzy portret gatunku: ??zajmujemy się pozycjonowaniem i optymalizacją stronic internetowych od 10 lat?, to na jakieś 90% wybierze właśnie tą stronicę! Taka sytuacja może posiadać obszary z oddzielnymi witrynami. Rodzaj witryny ma ośmielać użytkownika, a nie odmawiać go.
Szczegółowo to samo można mówić o podpisie. Nie ma sensu w podpisie kardynalnej witryny nabić maksymalną miarę wyrażeń nadrzędnych. Jedno słowo kluczowe Joomla, góra dwa (ewentualnie trzy skrótowe) to maksimum jeżeli chodzi o stronicę główną. A napisy stronic serwisu zawsze muszą kapitulować sedno zawartości wszelakiej ze stronic, jednakowo skądinąd jak ich portret!
Tak zatem pamiętaj o tym, że skupienie się tylko i wyłącznie na wygraniu głównego obszaru w rezultatach wyszukiwania Google w ogóle nie jest poręczycielem triumfu! Całkiem inna sprawa to zawartość witryny internetowej?
Materii, by użytkownik wkraczając na twoją stronicę z wyrobów wyszukiwania znalazł to, co sprawdza. Trzeba zatem zadbać o klarowność zawartości witryny internetowej. Pamiętaj, że użytkownik wkraczając na stronicę z wyrobów wyszukiwania oczekuje, że wydobędzie szukane wiadomości właśnie na tej stronie. Użytkownik w ogóle nie będzie posiadał ochoty na szukanie informacji po twoim serwisie! Pamiętaj, że odbiorca nie wróci na twoją stronicę, jeżeli nie skorzystasz swojej głównej okazji! Podaruj mu zatem uważnie to, czego sprawdza. Nie chodzi przecież o to, by na stronicę zwabić maksymalnie wiele osób, chodzi o to, ażeby wydobyli przy tym szukane surowce.

Kategoria: Tworzenie stron dnia 30 sierpnia 2010 Komentarze są wyłączone Tagi: , , ,

Strony www, systemy CMS, Reklama

Samo posiadanie strony www to dopiero droga do sukcesu. Kolejną rzeczą jest jej widoczność w sieci. Oprócz wykonania strony www warto zlecić pozycjonowanie naszej witryny.

Przed kilkoma laty w środowisku internetowym zaczęło pojawiać się stwierdzenie, że jeśli jakiejś informacji nie ma w internecie, to nie istnieje ona również w świecie realnym. Można by przyjąć, że to tylko teoria, ale z dnia na dzień ta hipoteza ma coraz większe zastosowanie w praktyce.

Strona www a jej jakość?.
Oprócz faktu posiadania strony www, bardzo ważną sprawą jest jej jakość. „Jak Cię widzą, tak Cię piszą” – słuszna prawda znana od dawna. Amatorsko wykonany serwis www jest w stanie Państwu znacznie zaszkodzić. Gdy potencjalny nabywca wchodzi na naszą stronę, która jest nieatrakcyjna, niechlujnie wykonana, posiada trudne w obsłudze menu – to tak, jakbyśmy wpuścili go do brudnego biura w zaułku i posadzili na chwiejnym krześle. Powinniśmy pamietać o tym, że to, czego najbardziej się od nas oczekuje w naszej działalności to profesjonalizmu, pod każdym kątem. Tak więc żeby nasz profesjonalizm był widoczny także poprzez nasz serwis internetowy, zlećmy jego wykonanie profesjonalistom.

Dlaczego warto posiadać stronę www?
Z każdym dniem coraz większa część społeczeństwa zaczyna jakiekolwiek poszukiwania właśnie w internecie. Chcąc poszukać na przykład fahowca w danej branży nikt teraz już nie idzie do sklepu po gazetę z anonsamianonse, tylko korzysta z wyszukiwarki internetowej. Po przejrzeniu kilku dostępnych stron internetowych kontaktuje się z określonymi firmami i dopiero umawia się na spotkanie. Zwróćmy uwagę, że nawet gdy nasza firma jest solidniejsza, dłużej istnieje w branży, jest w stanie zaofertwać korzystniejsze ceny a także wyższą jakość… jednak nie posiada strony internetowej, zostaje w takiej sytuacji całkowicie pominięta.

Kategoria: Tworzenie stron dnia 23 sierpnia 2010 Komentarze są wyłączone

Warstwy na stronie www

Podstawowe informacje na temat warstw
Aby efektywnie posługiwać się warstwami, musisz znać podstawy. Musisz wiedzieć, jak rysować warstwy, jak je organizować, jak wstawiać zawartość i jak pozycjonować warstwy na stronie. Te właśnie informacje znajdziesz tutaj. Ponadto, będziesz mógł je sprawdzić w praktyce, wykonując ćwiczenie po przeczytaniu tekstu.

Rysowanie warstw
Warstwę można narysować na istniejącej zawartości, która nie znajduje się na innej warstwie. Można też utworzyć stronę składającą się wyłącznie z warstw. Nie istnieje ograniczenie liczby stosowanych warstw, jednak nie należy zbyt przesadzać z ich mnożeniem, a szczególnie wówczas, gdy się nakładają.
Warto wstawianym warstwom nadawać nazwy, bowiem ułatwia identyfikację.

Kod HTML i warstwy
Domyślnie,  tworzy warstwę stosując znacznik <DIV>. Przełącz się do widoku kodu, aby zobaczyć kod źródłowy definiujący warstwę. Będzie on przypominał przykładowy kod, zaprezentowany poniżej. Kod ten umieszczany jest w sekcji BODY:

<div id=?Layer1? style=?position:absolute; width:200px;  height:115px?>Zawartość warstwy</div>

Inne znaczniki HTML także umożliwiają definiowanie warstw. Oto one: <SPAN>, <ILAYER> i
<LAYER>. Znaczniki <DIV> i <SPAN> są interpretowane przez wersje 4 obu przeglądarek:
Netscape i Internet Explorer. Znaczniki <ILAYER> i <LAYER> pozwalają zdefiniować warstwy
wyświetlane tylko przez przeglądarki Netscape.

Chociaż czasami istnieją powody, aby definiować warstwy niewidzialne, na razie zakładamy, że będziemy umieszczać na warstwie jakąś zawartość, której nie zamierzasz ukrywać przed odbiorcami strony.
Umieszczanie zawartości na warstwie to prosta operacja.

Kategoria: Tworzenie stron dnia 24 listopada 2009 Komentarze są wyłączone Tagi: , ,