HTML5: nowy element okna dialogowego. Tworzenie modalnych okien dialogowych
Bardzo często okna dialogowe służą do wprowadzania dowolnych danych w aplikacjach Windows. Okna te zawierają kontrolki, w których wprowadzane są wymagane przez aplikację dane oraz przyciski OK i Anuluj, z których pierwszy potwierdza wprowadzenie danych, a drugi anuluje.
Istnieją dwa typy okien dialogowych:
- Modalne okna dialogowe zablokować wszystkie pozostałe okna aplikacji, co oznacza, że użytkownik nie będzie mógł uzyskać dostępu do żadnego innego okna, dopóki nie zamknie okna dialogowego klikając OK lub Anuluj. Zwykle modalne okna dialogowe służą do wprowadzania danych kluczowych dla dalszego działania aplikacji. Na przykład okno dialogowe otwierania pliku jest zawsze modalne.
- Niemodalne (niemodelowe) okna dialogowe nie blokuj innych okien aplikacji. Użytkownik może dowolnie przełączać się pomiędzy takim oknem dialogowym a dowolnym innym oknem aplikacji. Niemodalne okna dialogowe są używane znacznie rzadziej niż modalne. Służą do określenia parametrów operacyjnych, które nie są krytyczne dla dalszego działania i wykonania programu różne działania z oknem głównym lub załadowanym do niego dokumentem. Dlatego okno wyszukiwania jest zawsze niemodalne.
Internet Explorera pozwala nam używać zarówno modalnych, jak i niemodalnych okien dialogowych w aplikacjach HTML. Teraz przyjrzymy się, jak to się robi.
Notatka:
Przed przeczytaniem tego artykułu zdecydowanie zaleca się przeczytanie trzech poprzednich artykułów z serii poświęconych aplikacjom HTML przeglądarki Internet Explorer.
1. Przygotuj testową aplikację HTML
Stwórzmy prostą aplikację do edytowania tekstu HTML bez zbędnych bajerów. Będzie zawierał duże pole edycyjne, w którym tak naprawdę wprowadza się tekst, a przycisk Parametry po kliknięciu wyświetli się okno dialogowe do wprowadzania parametrów.
Zestaw parametrów, które użytkownik może określić, będzie niewielki. Chodzi tu przede wszystkim o funkcję zawijania tekstu w obszarze edycji – czy będzie ona włączona, czy wyłączona. I kolor tekstu; pozwól użytkownikowi wybierać pomiędzy czarnym, niebieskim, zielonym i czerwonym.
Zaimplementujemy tę aplikację w dwóch wersjach: pierwsza będzie używać modalnego okna dialogowego do wprowadzania parametrów, a druga będzie korzystać z niemodalnego okna dialogowego.
Poniżej znajduje się kod HTML aplikacji.
Edytor tekstu
okno.resizeTo(710, 490);
Zapiszmy tę aplikację w dwóch plikach: Textedit_modal.hta (wersja z modalnym oknem dialogowym) i Textedit_modeless.hta (wersja z niemodalnym oknem dialogowym). I zacznijmy...
2. Sposób implementacji okien dialogowych
Ale najpierw krótki kurs teoretyczny. Po pierwsze, zawartość dowolnego okna dialogowego – zarówno modalnego, jak i niemodalnego – jest realizowana w postaci zwykłej strony internetowej. Ta strona internetowa jest zapisana w osobny plik z rozszerzeniem htm lub html (oraz zawartość poszczególnych „okien” aplikacji, której tworzenie zostało opisane w drugim artykule z serii).
Otwierając modalne okno dialogowe, możemy przekazać do niego pewne dane (więcej o tym później). Mogą to być np. aktualne wartości parametrów aplikacji, które następnie zostaną podstawione kontrolkom okna dialogowego.
Kiedy zamykamy modalne okno dialogowe, możemy przekazać pewne dane do okna, które je otworzyło. W przypadku okna dialogowego ustawień mogą to być wartości parametrów wprowadzone przez użytkownika.
Otwierając niemodalne okno dialogowe, nie możemy przekazać do niego żadnych danych, a także nie możemy zwrócić wprowadzonych w nim danych do okna, które je otworzyło. Możemy jednak uzyskać dostęp do tego okna z okna, które je otworzyło, i odwrotnie, „przenieść się” z okna dialogowego do okna, które je otworzyło. Możemy to wykorzystać do wymiany danych między oknami i wykonywania działań na zawartości jednego okna z drugiego.
To wszystko na teraz. Przejdźmy do praktyki. Po drodze rozważymy inne kwestie teoretyczne.
3. Implementacja modałów okna dialogowe
Zacznijmy od zaimplementowania modalnych okien dialogowych jako najczęściej używanych.
3.1. Otwarcie modalnego okna dialogowego
Właśnie dowiedzieliśmy się, że zawartość okna dialogowego jest zaimplementowana jak zwykła strona internetowa. Stworzenie strony internetowej nie jest dla nas trudne. Ale jak otworzyć samo okno dialogowe?
Aby otworzyć modalne okno dialogowe, należy skorzystać z metody showModalDialog obiektu Window. Format wywoływania tej metody jest następujący:
.showModalDialog(
[,
[,
]]
);
Wymagany jest pierwszy parametr tej metody. Określa adres internetowy strony internetowej, która implementuje zawartość okna dialogowego, w postaci ciągu znaków.
Window.showModalDialog("opcje_modalne.html");
Drugi parametr jest opcjonalny. Określa wartość, która zostanie przekazana do okna dialogowego. (Przyjrzymy się, jak uzyskać tę wartość w oknie dialogowym później.) Przekazana wartość może być dowolnego typu: ciąg znaków, liczba, wartość logiczna, tablica, funkcja lub instancja dowolnego obiektu.
Tutaj przekazaliśmy cyfrę 2 do okna dialogowego.
Trzeci, również opcjonalny, parametr określa parametry samego okna dialogowego. Powinien to być ciąg zawierający nazwy parametrów i ich wartości. Nazwę parametru oddzielamy od wartości dwukropkiem, a poszczególne parametry od siebie średnikiem (tak jak w przypadku pisania stylów CSS).
"wysokość okna dialogowego: 300 pikseli; szerokość okna dialogowego: 400 pikseli");
Tutaj określiliśmy parametry okna dialogowego do otwarcia - wysokość (300 pikseli) i szerokość (400 pikseli).
Lista opcji okien dialogowych obsługiwanych przez przeglądarkę Internet Explorer jest dość obszerna. Przyjrzyjmy się im.
- dialogLeft - ustawia współrzędną poziomą lewego górnego rogu okna dialogowego względem lewego górnego rogu ekranu. Jeśli ten parametr nie zostanie określony, współrzędna pozioma okna zostanie wybrana arbitralnie.
- dialogTop - ustawia współrzędną pionową lewego górnego rogu okna dialogowego względem lewego górnego rogu ekranu. Jeżeli parametr ten nie zostanie podany, współrzędna pionowa okna zostanie wybrana dowolnie.
- dialogHeight - ustawia wysokość okna dialogowego. Jeżeli ten parametr nie zostanie określony, okno dialogowe będzie miało domyślną wysokość. Minimalna możliwa wartość wysokości to 100 pikseli.
- dialogWidth - ustawia szerokość okna dialogowego w pikselach. Jeżeli ten parametr nie zostanie określony, okno dialogowe będzie miało domyślną szerokość. Minimalna możliwa szerokość to 250 pikseli. Do określenia współrzędnych lewego górnego rogu oraz wymiarów okna dialogowego można zastosować dowolną jednostkę miary obsługiwaną przez CSS, z obowiązkowym wskazaniem jej oznaczenia. Zatem w powyższym przykładzie znaki w px umieszczone po wartościach wysokości i szerokości wskazują, że są one określone w pikselach.
- dialogHide - określa, czy okno dialogowe ma być ukryte podczas drukowania, czy też zapowiedź przed drukowaniem. Wartość tak, 1 lub włączona wskazuje, że należy to zrobić, a wartość nie, 0 lub wyłączona oznacza, że nie należy tego robić. Wartość domyślna to nie.
- center - określa, czy okno dialogowe powinno znajdować się na środku ekranu. Wartość tak, 1 lub włączona informuje program Internet Explorer o wyśrodkowaniu okna dialogowego na ekranie, natomiast wartość nie, 0 lub wyłączona informuje program Internet Explorer, aby tego nie robił. Wartość domyślna to tak.
Notatka:
W przypadku określenia współrzędnych okna dialogowego za pomocą parametrów dialogHeight i dialogWidth, okno dialogowe zostanie umieszczone w określonym miejscu na ekranie, niezależnie od wartości parametru center. Innymi słowy, parametry dialogHeight i dialogWidth mają pierwszeństwo. - krawędź - ustawia typ obramowania, które będzie wyświetlane wokół zawartości okna dialogowego, wewnątrz jego obszaru roboczego ( Strefa Klienta- jest to wewnętrzna część okna, w której wyświetlana jest rzeczywista zawartość strony internetowej). Podwyższona wartość wskazuje na wyświetlenie ramki „podniesionej” (właściwie taka ramka jest prawie niewidoczna), a wartość zapadnięta wskazuje na „wpuszczoną” (a ta ramka jest dość dobrze zauważalna i, muszę przyznać, mocno psuje odbiór) pogląd). Wartość domyślna jest podnoszona.
- resizable - wskazuje, czy użytkownik będzie mógł zmienić rozmiar okna dialogowego. Wartość tak, 1 lub włączona daje tę możliwość, ale wartość nie, 0 lub wyłączona nie. Wartość domyślna to nie. Prawie wszystkie okna dialogowe stosowane w profesjonalnie napisanych aplikacjach mają stały i niezmienny rozmiar. Utwórz okno dialogowe za pomocą skalowalny nie ma sensu, w dodatku takie okno będzie dziwnie wyglądać.
- scroll - określa, czy okno dialogowe będzie miało paski przewijania. Wartość tak, 1 lub włączona powoduje, że program Internet Explorer ma je wyświetlić, natomiast wartość nie, 0 lub wyłączona powoduje, że program Internet Explorer ich nie wyświetla. Wartość domyślna to tak. Dziwne, że twórcy przeglądarki Internet Explorer zdecydowali się domyślnie na dodanie do okien dialogowych pasków przewijania. W pamięci autora ani jedna aplikacja Windows, która wpadła w jego ręce, nie posiadała okien dialogowych z paskami przewijania (chyba że liczyć twórczość studencką, w której napotkano coś podobnego...). Ogólnie rzecz biorąc, przewijane okno dialogowe wygląda wyjątkowo śmiesznie. Wniosek jest więc jasny – usuwamy paski przewijania!
Window.showModalDialog("options_modal.html", 2,
"dialogHeight:300px;dialogWidth:400px;scroll:no"); - status - określa obecność lub brak linii stanu w oknie dialogowym. Wartość tak, 1 lub włączona powoduje wyświetlenie w oknie linii stanu, natomiast wartość nie, 0 lub wyłączona nie. Wartość domyślna to nie. Linia stanu w oknie dialogowym jest zdecydowanie niepotrzebnym dodatkiem. Żadna aplikacja, z którą miał do czynienia autor, nie robiła takich rzeczy. My też nie.
- bez ozdób - określa, czy okno dialogowe powinno mieć obramowanie, tytuł, menu systemowe i przyciski maksymalizowania, minimalizowania i zamykania, czyli jak to się teraz mówi, chrom. Wartość tak, 1 lub włączona określa brak chromu, a wartość nie, 0 lub wyłączona określa jego obecność. Wartość domyślna to nie. Ogólnie rzecz biorąc, należy usuwać chrome z zaawansowanych okien dialogowych tylko w równie zaawansowanych aplikacjach. Okno bez chromu wygląda niezwykle nietypowo i może zniechęcić użytkownika.
Po wywołaniu metody showModalDialog wykonywanie skryptu WWW zostaje zatrzymane do momentu zamknięcia okna dialogowego. Wykonanie będzie kontynuowane dopiero po zamknięciu okna.
Pozostaje powiedzieć o wyniku, który zwraca metoda showModalDialog. Jest to wartość przekazana przez okno dialogowe do okna, które je otworzyło. Ta wartość może być dowolnego typu: ciąg znaków, liczba, wartość logiczna, tablica, funkcja lub instancja dowolnego obiektu.
Notatka:
Wywołania metody showModalDialog mogą występować tylko w procedurach obsługi zdarzeń, które powstają w wyniku działań użytkownika (na przykład kliknij wydarzenia- kliknięcie myszką). W przeciwnym razie wywołanie tej metody zostanie zignorowane.
3.2. Przekazywanie niektórych danych do modalnego okna dialogowego po jego otwarciu
Bardzo często trzeba przekazać jakieś dane do modalnego okna dialogowego, które się otworzy. Mogą to być np. aktualne wartości parametrów, które należy podstawić w kontrolkach tego okna.
Wiemy już, że do modalnego okna dialogowego możemy przekazać wartość dowolnego typu, czyniąc ją drugim parametrem wywołania metody showModalDialog.
Window.showModalDialog("opcje_modalne.html", 2);
Ale co, jeśli będziemy musieli przekazać wiele wartości do okna dialogowego? Można to zrobić na dwa sposoby.
Metoda pierwsza polega na utworzeniu tablicy i umieszczeniu wartości, które mają zostać przekazane do jej elementów.
Var aParams = true;
var aParams = "czarny";
Tutaj utworzyliśmy zwykłą tablicę aParams zawierającą dwa elementy, którym przypisano wartości, które przekazywane są do okna dialogowego.
Możemy stworzyć i tablica asocjacyjna(haszysz):
Var aParams["wrap"] = true;
var aParams["kolor"] = "czarny";
window.showModalDialog("options_modal.html", aParams);
Być może jest to wygodniejsze - indeksy skrótu łańcuchowego są łatwiejsze do zapamiętania niż indeksy numeryczne zwykłej tablicy.
Metoda druga polega na utworzeniu instancji Obiekt, korzystając z inicjatora JavaScript, utwórz w nim właściwości, do których przypiszesz przesyłane wartości.
Var oParams = (zawijanie: prawda, kolor: „czarny” );
window.showModalDialog("opcje_modalne.html", oParams);
Wybór metody jest kwestią gustu. Na przykład autor preferuje instancje Object, odczytując je jako najbardziej odpowiednie do tego celu. Niektórzy mogą uznać tablice za wygodniejsze – zwykłe lub skróty.
3.3. Odbieranie w modalnym oknie dialogowym danych przekazanych przez okno, które je otworzyło
Przekazaliśmy więc dane do okna modalnego. Teraz musimy jakoś umieścić je w tym oknie.
Obiekt Window obsługuje właściwość dialogArguments tylko do odczytu. Przechowuje wartość, która została przekazana do okna dialogowego jako drugi parametr metody showModalDialog. Tylko to, czego potrzebujemy.
Notatka:
Właściwość dialogArguments jest dostępna tylko w oknach dialogowych.
W ten sposób możemy uzyskać wartości przekazane jako elementy mieszające:
Var aParams = window.dialogArguments;
var bWrap = aParams["zawijanie"];
var sColor = aParams["kolor"];
A oto wartości przekazane jako właściwości instancji obiektu Object:
Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Przekazywanie danych z okna modalnego do okna, które je otworzyło
Pozostaje dowiedzieć się, jak przesłać dane w przeciwnym kierunku - z modalnego okna dialogowego do okna, które je otworzyło. Będziemy musieli zwrócić nowe wartości określone przez użytkownika z okna dialogowego parametrów, prawda?
Dowolna wartość powinna zostać przekazana z okna dialogowego do okna, które je otworzyło tylko wtedy, gdy użytkownik kliknie przycisk OK. Jeśli klikniesz Anuluj, zwykle nie musisz tego robić; Ogólnie rzecz biorąc, przycisk Anuluj powinien jedynie zamykać okno dialogowe i nie wykonywać żadnej innej akcji.
Zatem użytkownik kliknął przycisk OK w oknie dialogowym. Teraz musimy przekazać pewne dane do okna, z którego zostało otwarte okno dialogowe. Jak to zrobić?
Obiekt Window obsługuje właściwość returnValue. Właściwość ta przechowuje wartość, która powinna zostać przekazana z modalnego okna dialogowego do okna, które je otworzyło. Wartość ta może być dowolnego typu.
Notatka:
Właściwość returnValue jest dostępna tylko w modalnych oknach dialogowych.
Na przykład w ten sposób możemy przekazać pojedynczą wartość z okna, które się otworzy:
Wartość okna.powrotu = 2;
I tak - kilka znaczeń:
Window.returnValue = (zawijanie: bWrap, kolor: sColor );
Oczywiście w tym przypadku również możemy użyć zwykłej tablicy lub skrótu.
Jeśli użytkownik kliknie przycisk Anuluj w oknie dialogowym, zgodnie z wcześniejszymi ustaleniami nie przypiszemy żadnej wartości do właściwości returnValue. W tym przypadku ta nieruchomość otrzyma wartość domyślną - null. Nawiasem mówiąc, to samo stanie się, jeśli użytkownik zamknie okno dialogowe, naciskając przycisk zamykania lub kombinację klawiszy +.
Cienki! Okno dialogowe jest zamknięte (dowiemy się, jak je zamknąć później). Teraz okno, które je otworzyło, powinno otrzymać wartość właściwości returnValue. Jak?
Bardzo prosta. W rezultacie metoda showModalDialog zwróci wartość właściwości returnValue. Jednakże zostało to już wspomniane w paragrafie 2.1.
Musimy sprawdzić, czy ta wartość jest zerowa. Jeżeli tak jest, to okno dialogowe nie przesyła żadnych danych. W przeciwnym razie będziemy mogli w jakiś sposób wykorzystać przekazane im dane w aplikacji.
Var oResult = window.showModalDialog(...);
if (oWynik != null) (
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}
3.5. Zamykanie okna modalnego
Na koniec powinniśmy zamknąć modalne okno dialogowe. W tym celu możemy zastosować metodę zamknięcia obiektu Window, która nie przyjmuje parametrów i nie zwraca wyniku.
Okno.zamknij();
3.6. Aplikacja HTML z obsługą modalnych okien dialogowych
Cóż, czas na czystą praktykę. Uzupełnijmy naszą aplikację edytora tekstu HTML tak, aby obsługiwała ustawianie parametrów za pomocą modalnego okna dialogowego.
Kod samej aplikacji HTML (plik Textedit_modal.hta) po poprawkach będzie wyglądał następująco:
Edytor tekstu
okno.resizeTo(710, 490);
Var bWrap = prawda;
var sColor = "czarny";
Funkcja showParameters()
{
var oParams = (zawijanie: bWrap, kolor: sColor );
var oResult = window.showModalDialog("options_modal.html", oParams,
"dialogHeight:120px;dialogWidth:200px;scroll:no");
if (oWynik != null) (
bWrap = oResult.wrap;
sColor = oWynik.kolor;
var oTxtText = document.getElementById("txtText");
oTxtText.wrap = bZawijanie? „miękki”: „wyłączony”;
oTxtText.style.color = sKolor;
}
}
Tutaj w zasadzie wszystko jest już nam znane. Wymagane jest jedynie minimalne wyjaśnienie.
Na początek zadeklarowaliśmy dwie zmienne – bWrap i sColor – które będą przechowywać aktualne wartości parametrów aplikacji. Pierwsza zmienna będzie przechowywać wartość logiczną - informację, czy obszar edycyjny jest wykonywany ten moment zawijanie linii. Druga zmienna przechowuje bieżącą wartość koloru tekstu w obszarze edycji w postaci ciągu znaków.
Notatka:
Ogólnie rzecz biorąc, bieżących wartości parametrów nie można w ogóle przechowywać gdziekolwiek, lecz każdorazowo pozyskiwać je z odpowiednich właściwości instancji obiektu HTMLTextAreaElement, który reprezentuje obszar edycyjny, w którym wprowadzany jest tekst. Autor po prostu zdecydował się nie komplikować kodu aplikacji.
Obszar edycji jest reprezentowany przez instancję obiektu HTMLTextAreaElement. Obiekt ten obsługuje właściwość wrap, która określa tryb zawijania linii. Wartość „miękka” tej właściwości instruuje obszar edycji, aby wykonywał podziały wierszy, a znaki powrotu karetki i nowego wiersza nie będą wstawiane na przerwach („miękkie” podziały wierszy). Wartość „off” informuje obszar edycji, aby w ogóle nie łamał linii.
Wszystkie obiekty reprezentujące elementy strony internetowej obsługują właściwość stylu. Ta właściwość przechowuje instancję obiektu CSSStyle reprezentującą bieżący Styl CSS, z którym jest powiązany tego elementu strony internetowe.
Obiekt CSSStyle obsługuje z kolei wiele właściwości odpowiadających różnym atrybutom stylu. Więc, właściwość koloru odpowiada atrybutowi stylu o tej samej nazwie, który określa kolor tekstu.
Stwórzmy teraz stronę internetową, która implementuje samo okno dialogowe. Umieśćmy na nim checkbox Zawijaj tekst, rozwijaną listę Kolor tekstu i oczywiście przyciski OK i Anuluj wymagane w oknach tego typu.
Kod tej strony internetowej podany jest poniżej.
Opcje
konfiguracja funkcji()
{
var oParams = window.dialogArguments;
OChkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}
Funkcja sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = ( wrap: oChkWrap.checked, kolor: oSelColor.value );
okno.zamknij();
}
Zawiń tekst
Kolor tekstu
Czarny
Czerwony
Zielony
Niebieski
Tutaj znowu wszystko jest nam już znane. Wymagane są najbardziej minimalne wyjaśnienia.
Atrybut SIZE tagu tworzącego listę określa rozmiar ta lista w punktach. Wartość 1 dla tego atrybutu tagu określa, że lista powinna mieć wysokość jednego elementu, czyli powinna być listą rozwijaną.
Atrybut VALUE tagu tworzącego oddzielny element listy określa wartość tego elementu.
Natychmiast po zakończeniu ładowania strony internetowej, która implementuje okno dialogowe, nastąpi zdarzenie ładowania. Określiliśmy funkcję setup jako procedurę obsługi tego zdarzenia. Funkcja ta otrzyma wartość przekazaną do okna dialogowego z okna, które je otworzyło - instancję Obiektu z właściwościami przechowującymi aktualne wartości ustawień aplikacji. Następnie wprowadzi te wartości do odpowiednich kontrolek.
Obiekt HTMLInputElement, który reprezentuje kontrolkę, w tym pole wyboru, obsługuje właściwość check, która jest dostępna tylko dla pól wyboru. Ta właściwość wskazuje, czy pole wyboru jest zaznaczone (prawda), czy wyczyszczone (fałsz).
Obiekt HTMLSelectElement reprezentujący listę obsługuje właściwość value. Zawiera wartość aktualnie wybranego elementu listy w postaci ciągu znaków. Przypisując wartość do tej właściwości, poinformujemy listę, aby początkowo wybrała element o tej wartości.
Po kliknięciu przycisku OK zostanie wykonana procedura obsługi zdarzenia kliknięcia - funkcja sendParams. Utworzy instancję obiektu za pomocą inicjatora JavaScript i ustawi jego właściwości na wartości określone przez użytkownika w oknie dialogowym, które staną się nowymi wartościami ustawień aplikacji. Przekaże powstałą instancję obiektu do okna, które otworzyło to okno dialogowe, czyli do samej aplikacji, a następnie zamknie okno dialogowe.
Przycisk Anuluj po prostu zamyka okno dialogowe. W rezultacie okno otwierające to okno dialogowe otrzyma wartość null - sygnał, że użytkownik nie potwierdził wprowadzenia nowych parametrów aplikacji.
Zapiszmy tę stronę internetową w pliku options_modal.html. Sprawdźmy też gotową aplikację HTML w działaniu.
Opracowanie formularza HTML dla okna dialogowego
Jako interfejs zeszyt Stworzymy okno dialogowe (userform) pokazane na rys. 7.3.
Ryż. 7.3. Okno dialogowe do pracy z notatnikiem
Formularz ten zaimplementowano przy użyciu pliku HTML Phone.htm, który w całości pokazano na Listingu 7.6.
Na samym początku pliku Phone.htm znajduje się znacznik wskazujący, że zawartość pliku zawiera tekst formacie HTML, a także znaczniki i , wewnątrz których określone jest zastosowane kodowanie (charset=windows-1251) oraz tytuł formularza (tagi i ):
Formularz notatnika
Aby ustawić kolor formularza, tag wykorzystuje atrybut bgcolor o wartości „silver”:
Atrybut scroll="no" określa, że w oknie dialogowym nie powinno być pasków przewijania.
Nasz formularz składa się z siedmiu pól do wprowadzania tekstu (tabela 7.2) i ośmiu przycisków (tabela 7.3).
Tabela 7.2. Pola wejściowe w oknie dialogowym do pracy z notatnikiem
| txtNazwisko | 50 | Pole nazwiska |
| nazwa_txt | 50 | Pole nazwy |
| txtPhone | 15 | Pole do wpisania numeru telefonu |
| txtStreet | 50 | Pole do wpisania nazwy ulicy |
| txtDom | 10 | Pole do wpisania numeru domu |
| txtApp | 5 | Pole do wpisania numeru mieszkania |
| txtUwaga | 80 | Pole do wpisania notatki |
Tabela 7.3. Przyciski okna dialogowego do pracy z notatnikiem
| btnDalej | Przejdź do następnego wpisu | |
| >> | btnFinal | Przejdź do ostatniego wpisu |
Polecenia tworzące formularz znajdują się wewnątrz znaczników i. Sami pola tekstowe dane wejściowe i przyciski są tworzone w pliku HTML przy użyciu tego samego znacznika. Wewnątrz tego tagu musisz określić kilka atrybutów:
Typ - określa rodzaj kontroli (dla pola wejściowego type="text" , dla przycisku type="button");
Nazwa - ustawia nazwę kontrolki;
Rozmiar - określa długość linii pola wejściowego w znakach;
Wartość - ustawia etykietę na przycisku.
Aby pola wejściowe znajdowały się dokładnie pod sobą, umieścimy je w tabeli z niewidocznymi krawędziami, składającej się z dwóch kolumn: pierwsza zawiera opis (etykietę) pola, druga zawiera samą kontrolkę. Tabela w pliku HTML jest tworzona przy użyciu sparowanych tagów
| I | , definiując pojedynczą komórkę tabeli, na przykład:Nazwisko | Podano argument szerokości, określający szerokość linii jako procent całkowitej szerokości linii. Przyciski na formularzu wyświetlane są jeden po drugim, wymagana odległość między nimi osiąga się za pomocą spacje nierozdzielające(sekwencja ucieczki ), na przykład: Listowanie 7.6. Opis formularza w pliku HTML (Phone.htm) Formularz notatnika
|