Podręcznik użytkownika Anuluj

Tworzenie formularzy WWW

Szukaj

Ostatnia aktualizacja 21 maj 2021

Uwaga:

W aktualizacjach programu Dreamweaver Creative Cloud wprowadzono rozszerzenia obsługi elementów formularzy HTML. Więcej informacji zawiera artykuł Ulepszona obsługa HTML5 dla elementów formularza.

Informacje o formularzach WWW

Gdy użytkownik wprowadzi informacje w formularzu wyświetlanym przez przeglądarkę WWW i kliknie przycisk wysyłania, informacje te zostaną wysłane na serwer, gdzie przetworzy je skrypt serwerowy albo aplikacja. Serwer odeśle przetworzone informacje do użytkownika (lub klienta) albo wykona inną czynność (zależnie od zawartości formularza).

Program pozwala tworzyć formularze wysyłające dane do większości serwerów aplikacji, w tym do serwerów PHP, ASP i ColdFusion. W przypadku języka ColdFusion do formularzy można dodawać specjalne formanty, definiowane tylko w tym języku.

Uwaga:

Dane formularza można także wysyłać bezpośrednio do odbiorcy poczty elektronicznej.

Obiekty formularza

W programie Dreamweaver typy formantów wejściowych noszą nazwę obiektów formularza. Obiekty formularza to mechanizmy, które umożliwiają użytkownikom wprowadzanie danych. Do formularza można dodawać następujące obiekty:

Pola tekstowe

Przyjmują dowolny typ informacji złożonych z alfanumerycznego tekstu. Tekst może być wyświetlany w jednym wierszu, w wielu wierszach lub w polu na hasło, gdzie wpisywany tekst jest zastępowany gwiazdkami albo punktorami w celu ukrycia go przed podglądaczami.

Uwaga:

Hasła i inne informacje wysyłane do serwera za pomocą pola na hasło nie są szyfrowane. Ktoś może przechwycić przesyłane dane i odczytać je jako alfanumeryczny tekst. Dlatego też należy zawsze zapewniać szyfrowanie danych, które powinny podlegać ochronie.

Pola ukryte

Przechowują informacje wprowadzone przez użytkownika, np. nazwę, adres e-mail lub preferencje wyświetlania. Następnie umożliwiają wykorzystanie tych informacji podczas następnych odwiedzin serwisu przez tego użytkownika.

Przyciski

Wykonują działanie po kliknięciu. Możesz użyć predefiniowanych etykiet przycisków: "Wyślij" lub "Wyzeruj" albo dodać własne. Przyciski służą do wysyłania danych formularza na serwer albo do zerowania formularza. Możesz również przydzielić inne zadania przetwarzania zdefiniowane w skrypcie. Na przykład przycisk może wyliczać całkowity koszt zaznaczonych rzeczy w oparciu o przydzielone wartości.

Pola wyboru

Umożliwiają wybranie wielu odpowiedzi z jednej grupy opcji. Użytkownik może zaznaczyć tyle opcji, ile trzeba. Poniższy przykład przedstawia trzy zaznaczone pola wyboru: surfing, jazda na rowerze górskim i spływ.

Przyciski opcji

Reprezentują wybór jednoznaczny. Zaznaczenie przycisku w grupie opcji powoduje odznaczenie wszystkich innych opcji w tej grupie. Grupa to przynajmniej dwa przyciski mające tę samą nazwę. W poniższym przykładzie, zaznaczoną opcją jest spływ. Jeżeli użytkownik kliknie przycisk surfing, to przycisk spływ zostanie automatycznie wyczyszczony.

Menu w postaci listy

Wyświetla wartości opcji na przewijanej liście, która umożliwia użytkownikowi wybranie wielu opcji. Opcja Lista wyświetla wartości opcji w menu, które umożliwia użytkownikowi wybranie tylko jednej pozycji. Menu używa się wtedy, gdy jest mało miejsca, ale trzeba wyświetlić wiele pozycji. Menu zapewnia także kontrolę nad wartościami zwracanymi do serwera. Inaczej niż w przypadku pól tekstowych, w które użytkownicy mogą wpisać cokolwiek chcą, również nieprawidłowe dane, korzystając z menu możesz ustawić precyzyjnie wartości zwracane na serwer.

Uwaga:

Wysuwane menu w formularzu HTML nie jest odpowiednikiem graficznego wysuwanego menu. Informacje o tworzeniu, edytowaniu, pokazywaniu i ukrywaniu graficznego wysuwanego menu zobacz łącza na końcu tej sekcji.

Menu przeskoku

Nawigacyjne listy lub wyskakujące menu, które umożliwiają wstawienie menu złożonego z łączy do dokumentów lub plików.

Pola pliku

Umożliwiają użytkownikowi przeglądanie plików na ich komputerach i wysyłanie pliku jako danych formularza.

Pola obrazu

Umożliwiają wstawianie obrazu do formularza. Za pomocą pól obrazu można tworzyć graficzne przyciski, takie jak Wyślij lub Wyzeruj. Jeśli chcesz użyć obrazu do wykonania innych zadań, niż przesyłanie danych, musisz powiązać ten obiekt formularza z zachowaniem serwerowym.

Tworzenie formularza HTML

(Tylko użytkownicy Creative Cloud): W ramach obsługi języka HTML5 dodano nowe atrybuty elementów formularzy, dostępne w panelu Właściwości. Wprowadzono także cztery nowe obiekty formularzy (E-mail, wyszukiwanie, telefon, URL), dostępne w sekcji Formularze w panelu Wstaw. Więcej informacji zawiera artykuł Ulepszona obsługa HTML5 dla elementów formularza.

Otwórz stronę i umieść punkt wstawiania tam, gdzie ma zostać umieszczony formularz.
Wybierz polecenie Wstaw > Formularz albo przejdź do panelu Wstaw, zaznacz kategorię Formularze i kliknij ikonę Formularz.

W widoku Projekt formularze są oznaczone kropkowanym czerwonym konturem. Jeśli nie widać tego konturu, wybierz polecenie Widok > Pomoce wizualne > Elementy niewidoczne.
W Inspektorze właściwości ustaw właściwości formularza HTML (Okno > Właściwości):

a. Kliknij kontur formularza w oknie dokumentu, aby zaznaczyć formularz.

b. W polu Nazwa formularza wpisz niepowtarzalną nazwę, identyfikującą ten formularz.

Nazwanie formularza umożliwia tworzenie do niego odniesień i sterowania nim za pomocą języka skryptów, np. JavaScript lub VBScript. Jeśli nie nazwiesz formularza, program Dreamweaver wygeneruje dla niego nazwę za pomocą składni formularza, zwiększając wartość n dla każdego formularza dodanego do strony.

c. W polu Operacja należy określić stronę lub skrypt do przetwarzania danych formularza lub wpisać odpowiednią ścieżkę albo kliknąć ikonę folderu i przejść do odpowiedniej strony lub odpowiedniego skryptu. Przykład: processorder.php.

d. Z wyskakującego menu Metoda wybierz metodę transmisji danych formularza na serwer.

Ustaw dowolne spośród poniższych opcji:

Default Używa domyślnych ustawień przeglądarki do wysłania danych formularza na serwer. Zazwyczaj domyślną wartością jest GET.

GET Dołącza wartość do adresu URL pobierającego stronę.

POST Osadza dane formularza w żądaniu HTTP.

Nie używaj metody GET do wysyłania długich formularzy. Maksymalna długość adresu URL wynosi 8192 znaki. Jeżeli wyśle się zbyt dużą ilość danych, to zostaną one ucięte, a to spowoduje nieoczekiwane wyniki albo uniemożliwi przetwarzanie.

Do dynamicznych stron wygenerowanych za pomocą metody GET można tworzyć zakładki, ponieważ wszystkie wartości niezbędne do ponownego wygenerowania danej strony znajdują się w adresie URL wyświetlanym w polu Adres w przeglądarce. Natomiast dla dynamicznych stron generowanych na podstawie parametrów przekazanych metodą POST nie można tworzyć zakładek.

Jeśli zbierasz poufne dane użytkownika, np. jego login i hasło, numer karty kredytowej itp., to metoda POST może pozornie wyglądać na bezpieczniejszą od metody GET. Jednak informacje wysyłane metodą POST nie są szyfrowane i hakerzy mogą je łatwo przechwycić. Ze względów bezpieczeństwa używaj zabezpieczonego połączenia z zabezpieczonym serwerem.

e. (Opcjonalnie) Za pomocą wyskakującego menu Typ kodowania określ typ kodowania MIME dla danych wysyłanych na serwer do przetworzenia.

Domyślnego ustawienia application/x-www-form-urlencode używa się na ogół w połączeniu z metodą POST. Jeżeli tworzysz pole do wysyłania plików, to wybierz typ MIME multipart/form‑data.

f. (Opcjonalnie) Z wyskakującego menu Cel wybierz okno, w którym mają zostać wyświetlone dane zwracane przez wywołany program.

Jeżeli okno o takiej nazwie nie jest jeszcze otwarte, to przeglądarka otworzy nowe okno z taką nazwą. Ustaw dowolne spośród poniższych opcji celu:

_blank Otwiera docelowy dokument w nowym, nienazwanym oknie.

_parent Wyświetla docelowy dokument w oknie macierzystym okna wyświetlającego bieżący dokument.

_self Otwiera docelowy dokument w tym samym oknie, co dokument, z którego wysłano formularz.

_top Otwiera docelowy dokument w głównej części bieżącego okna. Za pomocą tej wartości można zagwarantować, że docelowy dokument zajmie pełnowymiarowe okno, nawet jeżeli oryginalny dokument był wyświetlony w ramce.
Wstaw obiekty formularza na stronie:

a. Umieść punkt wstawiania w tym miejscu formularza, gdzie ma się pojawić jego obiekt.

b. Wybierz obiekt z menu Wstaw > Formularz albo z kategorii Formularze panelu Wstaw.

c. Wypełnij pola w oknie dialogowym Atrybuty dostępności znacznika Input. Aby uzyskać więcej informacji, kliknij przycisk Pomoc w oknie dialogowym.

Uwaga:

Jeśli okno Atrybuty dostępności znacznika Input jest niewidoczne, to być może podczas próby wstawienia obiektu formularza punkt wstawiania znajdował się w widoku Kod. Upewnij się, że punkt wstawiania jest w widoku Projekt i ponów próbę. Więcej informacji na ten temat zawiera artykuł Davida Powersa Creating HTML forms in Dreamweaver (Tworzenie formularzy HTML w programie Dreamweaver) autorstwa Davida Powersa.

d. Ustaw właściwości obiektów.

e. Wpisz nazwę obiektu w Inspektorze właściwości.

Każde pole tekstowe, pole ukryte, pole wyboru, lista czy menu musi mieć niepowtarzalną nazwę, która identyfikuje ten obiekt w formularzu. Nazwy obiektów formularza nie mogą zawierać spacji ani znaków specjalnych. Można używać dowolnych kombinacji znaków alfanumerycznych i podkreślenia (_). Etykieta przypisana do obiektu staje się nazwą zmiennej, która przechowuje wartość pola (czyli wprowadzone do niego dane). Jest to wartość przesyłana na serwer do przetworzenia.

Uwaga:

Wszystkie przyciski opcji w grupie muszą mieć tę samą nazwę.

f. Aby przypisać etykietę do pola tekstowego, pola wyboru lub przycisku opcji na stronie, kliknij obok obiektu i wpisz etykietę.
Dopasuj układ formularza.

Formularze można formatować za pomocą znaków końca wiersza i końca akapitu, stylu tekstu preformatowanego oraz tabel. Nie możesz wstawić jednego formularza do innego (ich znaczniki nie mogą się nakładać), ale możesz umieścić więcej niż jeden formularz na stronie.

Projektując formularze, pamiętaj o przypisaniu do pól formularza etykiet opisowych, które poinformują użytkowników o roli obiektu -- np. aby pobrać informacje o nazwisku, nazwij etykietę pola: "Wpisz nazwisko".

Użyj tabel, aby strukturalnie rozmieścić obiekty formularza i etykiety pól. Korzystając z tabel w formularzach pamiętaj, że wszystkie znaczniki table muszą się znaleźć pomiędzy znacznikami form.

Samouczek przedstawiający tworzenie formularzy można znaleźć na stronie internetowej www.adobe.com/go/vid0160_pl.

Samouczek przedstawiający formatowanie formularzy za pomocą stylów CSS można znaleźć na stronie internetowej www.adobe.com/go/vid0161_pl.

Właściwości obiektu Pole tekstowe

Zaznacz obiekt — pole tekstowe i ustaw dowolne z następujących opcji w Inspektorze właściwości:

Szer. znakowa

Określa maksymalną liczbę znaków, jakie można wyświetlić w tym polu. Ta liczba może być mniejsza niż wartość Maks. znaków, która określa maksymalną liczbę znaków dopuszczalną do wprowadzenia w polu. Np. jeżeli wartość Szer. znakowa jest ustawiona na 20 (wartość domyślna), a użytkownik wpisze 100 znaków, to tylko 20 z nich będzie widocznych w polu tekstowym. Mimo że nie znaków nie widać w polu, to są one rozpoznawane przez obiekt-pole i wysyłane na serwer do przetworzenia.

Maks. znaków

Określa maksymalną liczbę znaków, jakie użytkownik może wpisać w polu; dotyczy jednowierszowych pól tekstowych. Wartości Maks. znaków możesz użyć, aby ograniczyć długość kodu pocztowego do 5 cyfr, długość hasła do 10 znaków, itp. Jeżeli pozostawisz puste pole Maks. znaków, to użytkownicy będą mogli wpisywać tekst o dowolnej długości. Jeżeli tekst przekroczy szerokość znakową pola, to będzie przewijany. Jeżeli użytkownik przekroczy maksymalną liczbę znaków, formularz wyda ostrzegawczy dźwięk.

Liczba wierszy

(Dostępna, gdy zaznaczono opcję Wiele wierszy) Ustawia wysokość wielowierszowego pola tekstowego.

Wyłączony

Wyłącza obszar tekstowy.

Tylko do odczytu

Przekształca obszar tekstowy w obszar „tylko do odczytu”.

Typ

Określa, czy jest to pole jednowierszowe, wielowierszowe, czy pole hasła.

Jeden wiersz

Daje znacznik input z atrybutem type równym text. Ustawienie Szer. znaków dotyczy atrybutu size, natomiast ustawienie Maks. znaków odnosi się do atrybutu maxlength.

Wiele wierszy

Daje znacznik textarea. Ustawienie Szer. znaków dotyczy atrybutu cols, natomiast ustawienie Liczba wierszy odnosi się do atrybutu rows.

Hasło

Daje znacznik input z atrybutem type równym password. Opcje Szer. znaków i Maks. znaków są przypisywane do tych samych atrybutów, co w przypadku jednowierszowych pól tekstowych. Gdy użytkownik wpisuje tekst w pole hasłowe, wprowadzane dane są wyświetlane jako gwiazdki albo punktory. Uniemożliwia to postronnym osobom podglądanie hasła.

Wart. początk.

Przypisuje wartość początkową, wyświetlaną w polu w momencie pierwszego wczytania formularza. Np. można zasugerować użytkownikowi wpisanie informacji w polu, umieszczając w nim uwagę albo wartość przykładową.

Class

Umożliwia zastosowanie reguł CSS do obiektu.

Opcje obiektu Przycisk

Nazwa przycisku

Przypisuje przyciskowi nazwę. Istnieją dwie nazwy zastrzeżone, Submit i Reset. Pierwsza nakazuje formularzowi wysłanie danych do przetwarzającej je aplikacji lub skryptu, a druga — przywrócenie oryginalnych wartości wszystkich pól formularza.

Wartość

Określa tekst wyświetlany na przycisku.

Operacja

Określa działanie wykonywane po kliknięciu przycisku.

Wyślij formularz

Wysyła dane formularza do przetwarzania, gdy użytkownik kliknie przycisk. Dane są wysyłane do strony lub skryptu wskazanego we właściwości formularza o nazwie 'Action' (operacja).

Wyzeruj formularz

Kliknięcie tego przycisku czyści zawartość formularza.

Brak

Opcja umożliwia określenie operacji przeprowadzanej po kliknięciu przycisku. Można np. dodać zachowanie JavaScript, które po kliknięciu przycisku otwiera inną stronę.

Class

Stosuje reguły CSS do obiektu.

Opcje obiektu Pole wyboru

Wartość przy włączeniu

Ustawia wartość wysyłaną na serwer, gdy pole wyboru jest zaznaczone. Np. w ankiecie można ustawić wartość 4 dla wyboru "zdecydowanie się zgadzam", a wartość 1 dla wyboru "zdecydowanie się nie zgadzam".

Stan początkowy

Określa, czy w momencie wczytania formularza do przeglądarki dane pole wyboru jest zaznaczone.

Dynamiczny

Umożliwia serwerowi dynamiczne określenie początkowego stanu pola wyboru. Np. można użyć pól wyboru w celu graficznego przedstawienia informacji typu "Tak/Nie", przechowywanych w rekordzie bazy danych. Podczas tworzenia projektu taka informacja jest nieznana. Natomiast podczas wykonywania, serwer odczytuje rekord z bazy danych i zaznacza pole wyboru, jeżeli znajdzie wartość "Tak".

Class

Stosuje do obiektu reguły CSS (Cascading Style Sheets).

Opcje obiektu Pojedynczy przycisk opcji

Wartość przy włączeniu

Ustawia wartość wysyłaną na serwer, gdy przycisk opcji jest zaznaczony. Można np. wpisać ciąg narty w pole Wartość przy włączeniu, aby wskazać, że użytkownik wybrał jazdę na nartach.

Stan początkowy

Określa, czy w momencie wczytania formularza do przeglądarki dany przycisk opcji jest zaznaczony.

Dynamiczny

Umożliwia serwerowi dynamiczne określenie początkowego stanu przycisku opcji. Np. można użyć przycisków opcji w celu graficznego przedstawienia informacji typu "Tak/Nie", przechowywanych w rekordzie bazy danych. Podczas tworzenia projektu taka informacja jest nieznana. Natomiast podczas wykonywania, serwer odczytuje rekord z bazy danych i zaznacza przycisk opcji, jeżeli znajdzie wartość "Tak".

Class

Stosuje reguły CSS do obiektu.

Opcje menu

Menu/lista

Przypisuje nazwę dla tego menu. Nazwa musi być niepowtarzalna.

Typ

Wskazuje, czy kliknięte menu rozwija się w dół (opcja Menu) czy wyświetla przewijaną listę pozycji (opcja Lista). Wybierz opcję Menu, jeżeli chcesz, aby podczas wyświetlania formularza w przeglądarce widoczna była tylko jedna opcja. Aby wyświetlić inne opcje, użytkownik będzie musiał kliknąć strzałkę w dół.

Wybierz opcję Lista, aby podczas wyświetlania formularza w przeglądarce wymienić niektóre lub wszystkie opcje, tak aby użytkownik mógł dokonać wielokrotnego wyboru.

Wysokość

(Tylko typ Lista) Ustawia liczbę pozycji wyświetlanych w menu.

Zaznaczenia

(Tylko typ Lista) Określa, czy użytkownik może zaznaczać wiele pozycji na liście.

Lista wartości

Otwiera okno dialogowe, umożliwiające dodanie pozycji do menu w formularzu:

Użyj przycisków Plus (+) i Minus (-), aby dodawać lub usuwać pozycje z listy.
Wpisz tekst etykiety i opcjonalną wartość każdej z pozycji menu.
Każda pozycja na liście ma etykietę (tekst, który pojawia się na liście) oraz wartość (wartość wysyłaną do aplikacji przetwarzającej, jeżeli ta pozycja zostanie wybrana). Jeżeli nie zostanie określona żadna wartość, to do aplikacji przetwarzającej będzie wysyłana treść etykiety.
Jeśli chcesz zmienić kolejność pozycji na liście, użyj przycisków strzałek w górę i w dół.
Pozycje menu są wyświetlane w tej samej kolejności, co w oknie dialogowym Lista wartości. Pierwsza pozycja na liście jest pozycją zaznaczoną w momencie wczytania strony do przeglądarki.

Dynamiczny

Umożliwia serwerowi dynamiczne zaznaczenie pozycji w menu w momencie, gdy formularz jest po raz pierwszy wyświetlany.

Class

Umożliwia zastosowanie reguł CSS do obiektu.

Wstępnie zaznaczone

Określa pozycje domyślnie zaznaczone na liście. Kliknij pozycje na liście.

Wstawianie pól do wysyłania plików

Aby umożliwić użytkownikom wybranie pliku z własnego komputera — np. dokumentu z edytora tekstu albo pliku graficznego — i wysłanie go na serwer, możesz utworzyć pola do wysyłania plików. Pole pliku wygląda jak inne pole tekstowe poza tym, że ma również przycisk Przeglądaj. Użytkownicy mogą ręcznie wpisać ścieżkę do pliku, który chcą wysłać, lub użyć przycisku Przeglądaj, aby zlokalizować i wybrać plik.

Zanim wstawisz pola do wysyłania plików, musisz zdefiniować skrypt serwerowy albo stronę zdolną obsłużyć wysłane pliki. Informacje o przetwarzaniu danych z formularza możesz znaleźć w dokumentacji technologii serwerowej, z jakiej korzystasz. Na przykład jeśli używasz PHP, przeczytaj sekcję „Handling file uploads” (Obsługa wysyłania plików) w internetowej instrukcji PHP na stronie http://us2.php.net/features.file-upload.php.

W przypadku pól pliku, transmisja plików z przeglądarki na serwer wymaga użycia metody POST. Plik jest wysyłany pod adres określony w polu 'Operacja' danego formularza.

Uwaga:

Skontaktuj się z administratorem serwera, aby potwierdzić możliwość anonimowego wysyłania plików, zanim dodasz pole pliku do formularza.

Wstaw formularz na stronę (Wstaw > Formularz).
Zaznacz ten formularz, aby wyświetlić jego Inspektor właściwości.
Ustaw metodę na POST.
Z wysuwanego menu Typ kodowania wybierz multipart/form-data.
W polu Operacja wskaż skrypt serwerowy albo stronę, które będą obsługiwać wysłany plik.
Umieść punkt wstawiania wewnątrz konturu formularza i wybierz polecenie Wstaw > Formularz > Pole pliku.
Ustaw dowolne spośród opcji w Inspektorze właściwości:

Nazwa pola pliku

Określa nazwę obiektu formularza, jakim jest pole pliku.

Szer. znakowa

Określa maksymalną liczbę znaków, jakie można wyświetlić w tym polu.

Maks. znaków

Określa maksymalną liczbę znaków, jakie może przechowywać pole. Jeżeli użytkownik przegląda system w poszukiwaniu pliku, to nazwa i ścieżka tego pliku mogą przekroczyć zdefiniowaną wartość Maks. znaków. Jeżeli jednak użytkownik spróbuje wpisać nazwę i ścieżkę pliku, to pole przyjmie tylko tyle znaków, ile zdefiniowano w wartości Maks. znaków.

Wstawianie przycisku z obrazem

Obrazy mogą pełnić rolę ikon-przycisków. Jeśli chcesz użyć obrazu do wykonania innych zadań, niż przesyłanie danych, musisz powiązać ten obiekt formularza z zachowaniem serwerowym.

Wstaw punkt wstawiania wewnątrz konturu formularza w dokumencie.
Wybierz polecenie Wstaw > Formularz > Obraz.

Pojawi się okno dialogowe Wybierz źródło obrazu.
W oknie dialogowym 'Wybierz źródło obrazu' wybierz obraz dla przycisku i kliknij przycisk OK.
Ustaw dowolne spośród opcji w Inspektorze właściwości:

ImageField

Przypisuje przyciskowi nazwę. Istnieją dwie nazwy zastrzeżone, Submit i Reset. Pierwsza nakazuje formularzowi wysłanie danych do przetwarzającej je aplikacji lub skryptu, a druga — przywrócenie oryginalnych wartości wszystkich pól formularza.

Src

Określa obraz, który chcesz wykorzystać jako przycisk.

Alt

Umożliwia wpisanie opisowego tekstu na wypadek, gdyby przeglądarka nie mogła wczytać obrazu.

Wyrównaj

Ustawia atrybut „align” obiektu.

Edytuj obraz

Uruchamia domyślny edytor graficzny i otwiera obraz do edycji.

Class

Umożliwia zastosowanie reguł CSS do obiektu.
Aby dodać do przycisku zachowanie JavaScript, zaznacz obraz, a następnie wybierz zachowanie z panelu Zachowania (Okno > Zachowania).

Opcje obiektu — pole ukryte

Pole ukryte

Określa nazwę tego pola.

Wartość

Przypisuje wartość pola. Ta wartość jest przekazywana do serwera po wysłaniu formularza.

Wstawianie grupy przycisków opcji

Umieść punkt wstawiania w konturze formularza.
Wybierz polecenie Wstaw > Formularz > Grupa przycisków opcji.
Wypełnij informacje w oknie dialogowym i kliknij przycisk OK.

a. W polu Nazwa wpisz nazwę grupy przycisków opcji.

Jeżeli ustawiasz przyciski opcji tak, aby przekazywać parametry na serwer, to parametry zostaną skojarzone z podaną tu nazwą. Na przykład jeśli nazwiesz grupę mojaGrupa i ustawisz metodę transmisji formularza na GET (po kliknięciu przycisku wysyłania przekazywane są parametry adresu URL, a nie parametry formularza), w adresie URL fraza mojaGrupa="wybranaWartosc" jest zwracana na serwer.

b. Kliknij przycisk Plus (+), aby dodać przycisk opcji do grupy. Wpisz etykietę i wartość zaznaczenia dla nowego przycisku.

c. Kliknij strzałkę w górę lub w dół, aby zmienić kolejność przycisków.

d. Aby ustawić zaznaczenie jednego z przycisków opcji podczas otwierania strony w przeglądarce, wpisz wartość równą wartości tego przycisku w polu Wybierz wartość równą.

Wpisz wartość statyczną lub wybierz wartość dynamiczną, klikając ikonę błyskawicy obok tego pola i wybierając zestaw rekordów, który zawiera potencjalne wartości zaznaczenia. Niezależnie od sytuacji, podana przez ciebie wartość musi być zgodna z wartością zaznaczenia jednego z przycisków opcji w grupie. Aby wyświetlić wartości zaznaczenia przycisków opcji, zaznacz każdy z przycisków i otwórz jego Inspektor właściwości (Okno > Właściwości).

e. Wybierz format, w którym program Dreamweaver ma ułożyć przyciski. Układ przycisków można tworzyć za pomocą łamania wierszy albo za pomocą tabel. Jeśli wybierzesz tabelę, program Dreamweaver utworzy jednokolumnową tabelę i umieści przyciski opcji po lewej, a ich etykiety po prawej stronie.

Właściwości możesz ustawiać w Inspektorze właściwości albo bezpośrednio w widoku Kod.

Wstawianie grupy pól tekstowych

Umieść punkt wstawiania w konturze formularza.
Wybierz polecenie Wstaw > Formularz > Grupa pól wyboru.
Wypełnij informacje w oknie dialogowym i kliknij przycisk OK.

a. W polu Nazwa wpisz nazwę grupy pól wyboru.

Jeżeli konfigurujesz pola wyboru, tak aby przekazywać parametry na serwer, to parametry zostaną skojarzone z podaną tu nazwą. Na przykład jeśli nazwiesz grupę mojaGrupa i ustawisz metodę transmisji formularza na GET (po kliknięciu przycisku wysyłania przekazywane są parametry adresu URL, a nie parametry formularza), w adresie URL fraza mojaGrupa="wybranaWartosc" jest zwracana na serwer.

b. Kliknij przycisk Plus (+), aby dodać do grupy pole wyboru. Wpisz etykietę i wartość zaznaczenia dla nowego przycisku.

c. Kliknij strzałkę w górę lub w dół, aby zmienić kolejność pól wyboru.

d. Aby pewne pole wyboru było automatycznie zaznaczone, gdy strona otwiera się w przeglądarce, wpisz wartość równą wartości tego pola wyboru w polu Wybierz wartość równą.

Wpisz wartość statyczną lub wybierz wartość dynamiczną, klikając ikonę błyskawicy obok tego pola i wybierając zestaw rekordów, który zawiera potencjalne wartości zaznaczenia. Niezależnie od sytuacji, podana przez ciebie wartość musi być zgodna z wartością zaznaczenia jednego z pól wyboru w grupie. Aby wyświetlić wartości zaznaczenia pól wyboru, zaznacz każde z pól wyboru i otwórz jego Inspektor właściwości (Okno > Właściwości).

e. Wybierz format, w którym program Dreamweaver ma ułożyć pola wyboru.

Układ pól wyboru można tworzyć za pomocą łamania wierszy albo tabel. Jeśli wybierzesz tabele, program Dreamweaver utworzy jednokolumnową tabelę i umieści pola wyboru po lewej, a ich etykiety po prawej stronie.

Właściwości możesz ustawiać w Inspektorze właściwości albo bezpośrednio w widoku Kod.

Informacje o dynamicznych obiektach formularzy

Dynamiczny obiekt formularza to taki obiekt, którego stan początkowy jest określany przez serwer w momencie pobierania strony z serwera, a nie przez autora strony podczas jej projektowania. Np. jeśli użytkownik pobierze stronę PHP, zawierającą formularz z menu, to skrypt PHP na tej stronie automatycznie zapełni menu wartościami przechowywanymi w bazie danych. Serwer wyśle do przeglądarki użytkownika wypełnioną stronę.

Wprowadzenie dynamiki obiektów formularzy może uprościć obsługę serwisu. Np. wiele serwisów używa menu, aby zaprezentować użytkownikom pewien zestaw opcji. Jeżeli menu jest dynamiczne, to można dodawać, usuwać lub zmieniać jego pozycje w jednym miejscu — w tabeli bazy danych, w której te pozycje są przechowywane. Pozwoli to uaktualnić wszystkie wystąpienia tego menu w całym serwisie.

Wstawianie lub modyfikowanie dynamicznego menu formularza HTML

Menu lub listę w formularzu HTML można dynamicznie zapełnić pozycjami z bazy danych. W przypadku większości stron można użyć obiektu menu HTML.

Przed przejściem do dalszych czynności należy wstawić formularz HTML na stronie ColdFusion, PHP lub ASP, a także zdefiniować zestaw rekordów lub inne źródło dynamicznej zawartości menu.

Wstaw obiekt formularza HTML — menu lub listę — na stronę:

a. Kliknij wewnątrz formularza HTML na stronie (Wstaw > Formularz > Formularz).

b. Wybierz polecenie Wstaw > Formularz > Lista/Menu, aby wstawić ten obiekt.
Wykonaj jedną z następujących czynności:
- Zaznacz nowy lub istniejący obiekt formularza HTML w postaci menu lub listy. Następnie kliknij przycisk Dynamiczny w Inspektorze właściwości.
- Wybierz polecenie Wstaw > Obiekty danych > Dane dynamiczne > Dynamiczna lista wyboru.
Wypełnij informacje w oknie dialogowym Dynamiczna lista/menu i kliknij przycisk OK.

a. Z wyskakującego menu Opcje z zestawu rekordów wybierz zestaw rekordów, który ma być źródłem zawartości. Później to menu będzie również wykorzystane do edytowania zarówno statycznych, jak i dynamicznych menu i list.

b. W obszarze Opcje statyczne wpisz domyślną pozycję na liście lub w menu. Opcja umożliwia również edytowanie statycznych wpisów w obiekcie formularza listy/menu po dodaniu dynamicznej zawartości.

c. (Opcjonalnie) Użyj przycisków Plus (+) i Minus (-), aby dodawać lub usuwać pozycje z listy. Pozycje układane są w tej samej kolejności, co w oknie dialogowym Wstępne wartości listy. Pierwsza pozycja na liście jest pozycją zaznaczoną w momencie wczytania strony do przeglądarki. Jeśli chcesz zmienić kolejność pozycji na liście, użyj przycisków strzałek w górę i w dół.

d. Z wyskakującego menu Wartości wybierz pole, które zawiera wartości pozycji menu.

e. Z wyskakującego menu Etykieta wybierz pole, które zawiera etykiety pozycji menu.

f. (Opcjonalnie) Aby określić, czy dana pozycja menu ma być zaznaczona w momencie otwarcia się strony w przeglądarce lub wyświetlenia rekordu w formularzu, wpisz wartość równą wartości tej pozycji w pole Wybierz wartość równą.

Możesz wpisać wartość statyczną albo wybrać wartość dynamiczną, klikając ikonę błyskawicy obok pola i wybierając jedną z wartości dynamicznych z listy źródeł danych. Niezależnie od sytuacji, wybrana wartość musi odpowiadać jednej z wartości pozycji menu.

Przekształcanie istniejących menu formularza HTML w menu dynamiczne

Przejdź do widoku Projekt i zaznacz obiekt formularza — menu lub listę.
W Inspektorze właściwości kliknij przycisk Dynamiczne.
Wypełnij informacje w oknie dialogowym i kliknij przycisk OK.

Wyświetlanie dynamicznej zawartości w polach tekstowych HTML

W polach tekstowych formularza HTML można wyświetlać dynamiczną zawartość, wprowadzaną w momencie wyświetlenia formularza w przeglądarce.

Zaznacz pole tekstowe w formularzu HTML na stronie.
W Inspektorze właściwości kliknij ikonę błyskawicy obok pola Wartość początkowa. Wyświetli się okno dialogowe Dynamiczne dane.
Wybierz kolumnę zestawu danych, która dostarczy wartość dla pola tekstowego i kliknij przycisk OK.

Ustawianie opcji okna dialogowego Dynamiczne pole tekstowe

Z wysuwanego menu Pole tekstowe wybierz pole tekstowe, które ma być dynamiczne.
Kliknij ikonę błyskawicy obok pola Ustaw wartość na. Wybierz źródło danych z listy źródeł i kliknij przycisk OK.

Źródło danych musi zawierać informacje tekstowe. Jeżeli na liście nie ma żadnych źródeł danych lub dostępne źródła nie odpowiadają twoim potrzebom, kliknij przycisk Plus (+), aby zdefiniować nowe źródło danych.

Dynamiczna preselekcja pola wyboru HTML

Serwer może automatycznie podejmować decyzję o tym, czy zaznaczyć pole wyboru w momencie wyświetlania formularza w przeglądarce.

Przed przejściem do dalszych czynności należy utworzyć formularz na stronie ColdFusion, PHP lub ASP, a także zdefiniować zestaw rekordów lub inne źródło dynamicznej zawartości pól wyboru. Najlepiej jeśli źródło zawartości zawiera dane logiczne, np. Tak/Nie lub prawda/fałsz.

Zaznacz obiekt formularza — pole wyboru na stronie.
W Inspektorze właściwości kliknij przycisk Dynamiczne.
Wypełnij informacje w oknie dialogowym Dynamiczne pole wyboru i kliknij przycisk OK:
- Kliknij ikonę błyskawicy obok pola 'Zaznacz jeśli' i wybierz pole z listy źródeł danych.
  
  Źródło danych musi zawierać dane logiczne, np. Tak i Nie albo prawda i nieprawda. Jeżeli na liście nie ma żadnych źródeł danych lub dostępne źródła nie odpowiadają twoim potrzebom, kliknij przycisk Plus (+), aby zdefiniować nowe źródło danych.
- W polu Równe wpisz wartość, jaką musi mieć pole, aby serwer zaznaczył pole wyboru.
  
  Na przykład aby pole wyboru było zaznaczane, gdy pole z rekordu ma wartość Tak, wpisz Tak w pole Równe.
Uwaga:

Ta wartość jest również zwracana na serwer, jeżeli użytkownik kliknie przycisk Wyślij w formularzu.

Dynamiczne zaznaczanie przycisku opcji w formularzu HTML

Przyciski opcji wyświetlane w formularzach HTML w przeglądarce mogą być dynamicznie zaznaczone na podstawie danych z rekordu.

Przed przejściem do dalszych czynności należy utworzyć formularz na stronie ColdFusion, PHP lub ASP, a także wstawić przynajmniej jedną grupę przycisków opcji HTML (Wstaw > Formularz > Grupa przycisków opcji). Musisz również zdefiniować zestaw rekordów albo inne źródło zawartości dynamicznej dla przycisków opcji. Najlepiej jeśli źródło zawartości zawiera dane logiczne, np. Tak/Nie lub prawda/fałsz.

Przejdź do widoku Projekt i zaznacz przycisk w grupie przycisków opcji.
W Inspektorze właściwości kliknij przycisk Dynamiczne.
Wypełnij informacje w oknie dialogowym Dynamiczna grupa przycisków opcji i kliknij przycisk OK:

Ustawianie opcji okna dialogowego Dynamiczna grupa przycisków opcji

Z wysuwanego menu Grupa przycisków opcji wybierz formularz i grupę przycisków opcji na stronie.

Pole Wartość przycisku opcji wyświetla wartości wszystkich przycisków opcji w tej grupie.
Z listy wartości wybierz wartość służącą do dynamicznego zaznaczania. Ta wartość zostanie wyświetlona w polu Wartość.
Kliknij ikonę błyskawicy obok pola 'Wybierz wartość równą' i wybierz zestaw rekordów, zawierający potencjalne wartości zaznaczenia dla przycisków opcji w grupie.

Wybrany zestaw rekordów ma zawierać wartości odpowiadające wartościom zaznaczenia przycisków opcji. Aby wyświetlić wartości zaznaczenia przycisków opcji, zaznacz każdy z przycisków i otwórz jego Inspektor właściwości (Okno > Właściwości).
Kliknij przycisk OK.

Ustawianie opcji okna dialogowego Dynamiczna grupa przycisków opcji (ColdFusion)

Z wysuwanego menu Grupa przycisków opcji wybierz grupę przycisków i formularz.
Kliknij ikonę błyskawicy obok pola Wybierz wartość równą.
Wypełnij informacje w oknie dialogowym Dynamiczne dane i kliknij przycisk OK.

a. Wybierz źródło danych z listy źródeł i kliknij przycisk OK.

b. (Opcjonalnie) Wybierz format danych dla tekstu.

c. (Opcjonalnie) Zmodyfikuj kod wstawiany na stronę przez program Dreamweaver w celu wyświetlenia dynamicznego tekstu.
Kliknij przycisk OK, aby zamknąć okno dialogowe Dynamiczna grupa przycisków opcji i wstawić element zastępczy zawartości dynamicznej w grupie przycisków opcji.

Walidacja danych formularza HTML

Program Dreamweaver może wstawiać kod JavaScript, który kontroluje zawartość wskazanych pól tekstowych, aby sprawdzić, czy użytkownik wprowadził dane właściwego typu.

Za pomocą widgetów formularzy Spry można budować formularze i walidować zawartość wskazanych elementów formularza. Więcej informacji można znaleźć w wymienionych poniżej tematach, dotyczących technologii Spry.

W programie Dreamweaver można również tworzyć formularze ColdFusion z funkcją walidacji zawartości wskazanych pól. Więcej informacji można znaleźć w rozdziale dotyczącym języka ColdFusion.

Utwórz formularz HTML, który zawiera co najmniej jedno pole tekstowe i jeden przycisk Wyślij.

Sprawdź, czy każde pole ColdFusion, które chcesz walidować, ma niepowtarzalną nazwę.
Zaznacz przycisk Wyślij.
Otwórz panel Zachowania (Okno > Zachowania). Kliknij przycisk Plus (+) i wybierz z listy zachowanie Przeprowadź walidację formularza.
Ustaw reguły walidacji dla każdego pola tekstowego i kliknij przycisk OK.

Np. można określić, że pole 'Ile masz lat' przyjmuje tylko liczby.

Uwaga:

Zachowanie Przeprowadź walidację formularza jest dostępne tylko wtedy, jeżeli do dokumentu wstawiono pole tekstowe.

Dodawanie zachowań JavaScript do obiektów formularzy HTML

Do obiektów HTML, takich jak przyciski, można dodawać zachowania JavaScript przechowywane w programie Dreamweaver.

Zaznacz obiekt formularza HTML.
Otwórz panel Zachowania (Okno > Zachowania). Kliknij przycisk Plus (+) i wybierz z listy zachowanie.

Dodawanie własnych skryptów do przycisków formularzy HTML

Niektóre formularze używają języka JavaScript lub VBScript do przetwarzania danych lub wykonywania innych działań na kliencie, zamiast wysyłać te dane do przetworzenia na serwerze. Za pomocą programu Dreamweaver można skonfigurować przycisk formularza w taki sposób, aby po kliknięciu wykonywał wskazany skrypt po stronie klienta.

Zaznacz przycisk Wyślij w formularzu.
Otwórz panel Zachowania (Okno > Zachowania). Kliknij przycisk Plus (+) i wybierz z listy zachowanie Wywołaj JavaScript.
W oknie dialogowym Wywołaj JavaScript wpisz nazwę funkcji JavaScript, która ma zostać uruchomiona po kliknięciu przycisku. Potem kliknij przycisk OK.

Możesz wpisać nazwę funkcji, która jeszcze nie istnieje, np. przetwarzajMojFormularz().
Jeżeli wybranej przez ciebie funkcji JavaScript nie ma jeszcze w sekcji head dokumentu, dodaj ją teraz.

Możesz np. zdefiniować poniższą funkcję JavaScript w sekcji head dokumentu, aby po kliknięciu przycisku Wyślij wyświetlany był komunikat:
```
function processMyForm(){ 
    alert('Thanks for your order!'); 
}
```

Tworzenie formularzy HTML z ułatwieniami dostępu

Dostępność obiektu formularza można włączyć podczas wstawiania formularza HTML, a potem modyfikować ustawienia jego dostępności.

Dodawanie obiektu formularza z ułatwieniami dostępu

Gdy po raz pierwszy dodajesz obiekty formularza z ułatwieniami dostępności, włącz okno dialogowe 'Dostępność' dla obiektów formularza (zobacz Optymalizacja przestrzeni roboczej do projektowania elementów graficznych).

Tę czynność wykonuje się tylko raz.
Umieść punkt wstawiania w dokumencie tam, gdzie ma się pojawić obiekt formularza.
Wybierz polecenie Wstaw > Formularz i wybierz obiekt formularza, których chcesz wstawić.

Pojawi się okno dialogowe Atrybuty dostępności znacznika Input.
Wypełnij informacje w oknie dialogowym i kliknij przycisk OK. Oto częściowa lista opcji:

Uwaga:

Czytniki ekranowe odczytują nazwę wprowadzoną jako atrybut Etykieta dla danego obiektu.

ID

Przypisuje identyfikator do pola formularza. Za jego pomocą można tworzyć odwołania do tego pola w języku JavaScript. Identyfikator pełni też rolę wartości atrybutu, jeśli wybierzesz opcję „Dołącz znacznik etykiety, używając atrybutu for” w sekcji opcji stylu.

Otocz znacznikiem etykiety

Ujmuje element formularza w znacznik Label, tak jak tutaj:
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

Dołącz znacznik etykiety, używając atrybutu For

Stosuje atrybut for, aby otoczyć element formularza znacznikiem Label, tak jak tutaj:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Dzięki temu przeglądarka będzie generować tekst związany z polem wyboru czy przyciskiem opcji w prostokącie aktywności i umożliwi użytkownikowi zaznaczanie pola wyboru czy przycisku opcji przez kliknięcie w dowolnym miejscu tego tekstu, a nie tylko w polu wyboru albo na przycisku opcji.

Uwaga: Jest to preferowana opcja dostępności. Jednak dostępne funkcje mogą zależeć od rodzaju przeglądarki.

Bez znacznika etykiety

Powoduje, że znacznik Label nie jest stosowany:
<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

Klawisz dostępu

Wprowadza ekwiwalent klawiszowy (jednoliterowy), który w połączeniu z klawiszem Alt (Windows) lub Control (Macintosh) umożliwia zaznaczenie obiektu formularza w przeglądarce. Na przykład jeśli wpiszesz B w polu Klawisz dostępu, użytkownicy przeglądarek na komputerach Macintosh będą mogli zaznaczyć ten obiekt formularza, naciskając klawisze Control+B.

Kolejność tabulatora

Określa kolejność, w jakiej klawisz tabulatora pozwala przechodzić między obiektami formularza. Jeżeli ustawisz kolejność tabulatora dla jednego obiektu, musisz zdefiniować go także dla wszystkich pozostałych.

Ustawienie kolejności tabulatora jest przydatne, jeżeli na stronie istnieją inne łącza i obiekty formularza, a użytkownik powinien przechodzić z jednego do drugiego w określonym porządku.
Kliknij przycisk Tak, aby wstawić znacznik formularza.

W dokumencie pojawi się obiekt formularza.

Uwaga:

Jeśli klikniesz Anuluj, to w dokumencie pojawi się obiekt formularza, ale program Dreamweaver nie skojarzy z nim znaczników ani atrybutów dostępności.

Edytowanie ustawień dostępności obiektu formularza

Zaznacz obiekt w oknie dokumentu.
Wykonaj jedną z następujących czynności:
- Edytuj stosowne atrybuty w widoku kodu.
- Kliknij prawym przyciskiem myszy (Windows) lub przytrzymując klawisz Control (Mac OS), a potem wybierz polecenie Edytuj znacznik.

Więcej zasobów tego rodzaju

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?

Tworzenie formularzy WWW

Informacje o formularzach WWW

Obiekty formularza

Tworzenie formularza HTML

Właściwości obiektu Pole tekstowe

Opcje obiektu Przycisk

Opcje obiektu Pole wyboru

Opcje obiektu Pojedynczy przycisk opcji

Opcje menu

Wstawianie pól do wysyłania plików

Wstawianie przycisku z obrazem

Opcje obiektu — pole ukryte

Wstawianie grupy przycisków opcji

Wstawianie grupy pól tekstowych

Informacje o dynamicznych obiektach formularzy

Wstawianie lub modyfikowanie dynamicznego menu formularza HTML

Przekształcanie istniejących menu formularza HTML w menu dynamiczne

Wyświetlanie dynamicznej zawartości w polach tekstowych HTML

Ustawianie opcji okna dialogowego Dynamiczne pole tekstowe

Dynamiczna preselekcja pola wyboru HTML

Dynamiczne zaznaczanie przycisku opcji w formularzu HTML

Ustawianie opcji okna dialogowego Dynamiczna grupa przycisków opcji

Ustawianie opcji okna dialogowego Dynamiczna grupa przycisków opcji (ColdFusion)

Walidacja danych formularza HTML

Dodawanie zachowań JavaScript do obiektów formularzy HTML

Dodawanie własnych skryptów do przycisków formularzy HTML

Tworzenie formularzy HTML z ułatwieniami dostępu

Dodawanie obiektu formularza z ułatwieniami dostępu

Edytowanie ustawień dostępności obiektu formularza

Więcej zasobów tego rodzaju

Pomoc dostępna szybciej i łatwiej

Zapytaj społeczność

Skontaktuj się z nami