[ Pobierz całość w formacie PDF ]
.Jeli polanieoznaczone gwiazdkami nie zostanš wypełnione, nadaj im wartoć brak danych.Wykorzystaj zdarzenie onSubmit.Prosze podać swoje dane:(Pola oznaczone * muszš zostać wypełnione)Dane personalne:imię:*nazwisko:*Adres:ulica:nr domu:kod:miasto:kraj:*tel.:*Mimo, iż kod wyglšda podobnie jak w ćwiczeniu 5.10, wykorzystywana jest tujednak inna technika.Obecnie przycisk wysyłajšcy jest już typu submit.Jegonacinięcie powoduje wywołanie zdarzenia onSubmit, któremu przypisana jestodpowiednia procedura obsługi.W przypadku wypełnienia wszystkich żšdanych pólzwraca ona wartoć truei następuje wysłanie zawartoci formularza.W przeciwnym przypadku, onSubmit =false, wysłanie nie nastšpi.Użytkownik zostanie jednak poinformowany, którepola nie zostały przez niego wypełnione.Elementy formularzyElementami formularza mogš być następujšce obiekty:button czyli klasyczny przycisk;checkbox pola wyboru;hidden element ukryty;password pole do wpisywania haseł;radio pole wyboru;reset przycisk reset;select lista wyboru;submit przycisk submit;text pole tekstowe;textarea rozszerzone pole tekstowe.Element buttonJest to przycisk umieszczany w dokumencie HTML.Definiujemy go w sposóbnastępujšcy:Nazwa przycisku to identyfikator, dzięki któremu możemy się póniej w prostysposób do niego odwoływać.Parametr wartoć na przycisku to tekst, który będziena nim widoczny.Opcjonalny parametr obsługa zdarzenia pozwala nam podać nazwęfunkcji, która zostanie wywołana po kliknięciu na tak zdefiniowany przycisk.Ćwiczenie 5.12.Wywietlić na stronie przycisk.Kliknięcie na przycisk powinno spowodowaćwywietlenie okna dialogowego.Element checkboxCheckbox jest to klasyczne pole wyboru definiowane w sposób następujšcy:Nazwa pola identyfikuje oczywicie obiekt, wartoć jest wartociš zwracanš doserwera podczas przesyłania formularza.Domylna wartoć to on.Podanieparametru CHECKED oznacza, że obiekt ma być domylnie zaznaczony.Ćwiczenie 5.13.Wywietl na ekranie pole tekstowe umożliwiajšce wprowadzenie tekstu przezużytkownika.Skrypt ma umożliwić zamianę wszystkich wprowadzonych liter na małelub wielkie.imię:duże literymałe literyDziałanie skryptu jest następujšce: tworzymy pole tekstowe o długoci 15znaków.Po wpisaniu do niego dowolnego tekstu możemy, zaznaczajšc odpowiedniepola wyboru, zamienić go w całoci na wielkie, bšd małe litery.Zamiany takiejdokonujš funkcje toUpperCase() i toLowerCase(), zatem wiersz:formularz1.imie.value = formularz1.imie.value.toUpperCase();zamieni wszystkie litery z pola tekstowego imię na wielkie litery.Musimytylko pamiętać o tym, aby uniemożliwić jednoczesne zaznaczenie obu pól wyboru.Zatem po kliknięciu na pole zamiany na duże litery sprawdzamy w funkcjiimie_przetwarzaj_duze(), czy nie jest przypadkiem zaznaczone pole konwersji nalitery małe.Jeli tak, to usuwamy zaznaczenie tego pola.Ponieważ jednak niemamy możliwoci bezporedniego ustawienia tej wartoci, symulujemy kliknięciena to pole za pomocš funkcji click().Funkcja imie_przetwarzaj_male() dokonujeoczywicie czynnoci odwrotnej.Element hiddenJest to obiekt, którego nie widać w dokumencie HTML, może być on jednak użytydo przechowywania wprowadzonych przez użytkownika wartoci.Definicja wyglšda wsposób następujšcy:wartoć oznacza tu poczštkowš wartoć przypisanš obiektowi.Ćwiczenie 5.14.Stwórz formularz umożliwiajšcy wprowadzanie danych tekstowych przezużytkownika.Stosujšc element hidden, zapamiętaj aktualnš oraz poprzedniowprowadzonš wartoć.imię:Element radioJest to również pole wyboru, podobnie jak checkbox, z ta jednak różnicš, żemożna je grupować i traktować jako jeden obiekt.W takim przypadku jednoczeniemoże być zaznaczone tylko jedno pole.Element typu radio tworzy się w sposóbnastępujšcy:Argumenty majš takie samo znaczenie jak w przypadku pól wyboru typu checkbox.Ponieważ mamy możliwoć grupowania tych elementów w jeden obiekt, otrzymujemydo dyspozycji dodatkowe właciwoci:length okrelajšcš iloć elementów w grupie;index okrelajšcš numer aktualnie wybranego elementu.Ćwiczenie 5.15.Wykonaj zadanie z ćwiczenia 5.13, używajšc zamiast elementu checkbox elementuradio.imię:duże literymałe literybez konwersjiWidać wyranie, że kod jest teraz mniej skomplikowany.Głównie dlatego, że nieistnieje już potrzeba obsługi stanów pól wyboru.System sam dba o odpowiedniezaznaczenia.Element resetJest to znany ze stron WWW przycisk, którego wcinięcie powoduje wyzerowanieformularza.cilej przypisanie wszystkim polom ich wartoci domylnych.Definiowany jest w sposób następujšcy:Parametr tekst okrela, jaki napis będzie widniał na przycisku.Jak widać,można też dołšczyć własnš procedurę obsługi zdarzenia, tak by np.pewnym polomprzypisać wartoci inne niż domylne.Ćwiczenie 5.16.Zmodyfikuj przykład z ćwiczenia 5.11, dodajšc przycisk umożliwiajšcy usunięciadanych z formularza.Prosze podać swoje dane:(Pola oznaczone * muszš zostać wypełnione)Dane personalne:imię:*nazwisko:*Adres:ulica:nr domu:kod:miasto:kraj:*tel.:*Element selectElement select tworzy listę wyboru w formularzu.Definiowany jest w sposóbnastępujšcy:tekst [.tekst]Parametr nazwa specyfikuje nazwę obiektu, wielkoć jest liczbš pozycji nalicie, które majš być wywietlane.SIZE = wielkoć okrela liczbę widocznychelementów listy.OnBlur, onChange i onFocus specyfikujš procedury obsługizdarzeń odpowiednio, gdy obiekt traci focus, gdy zostanie wybrana nowa pozycjaz listy oraz gdy obiekt otrzymuje focus.Za pomocš znaczników tworzymynatomiast wartoci na licie wyboru
[ Pobierz całość w formacie PDF ]