Tworzenie formularzy WWW

Ostatnia aktualizacja 27 kwi 2021

Spostrzeżenie

Obsługa elementów formularzy HTML została ulepszona w aktualizacjach programu Dreamweaver Creative Cloud.Więcej informacji zawiera artykuł Ulepszona obsługa HTML5 dla elementów formularza.

Informacje o formularzach WWW

Gdy\nodwiedzający wprowadza informacje do formularza internetowego wyświetlanego w przeglądarce\ninternetowej i klika przycisk wysyłania, informacje są wysyłane na\nserwer, gdzie skrypt lub aplikacja po stronie serwera je przetwarza.\nSerwer odpowiada, wysyłając przetworzone informacje z powrotem do\nużytkownika (lub klienta) lub wykonując inne działanie na podstawie\nzawartości formularza.

Można tworzyć formularze, które wysyłają dane do większości serwerów aplikacji,\nw tym PHP, ASP i ColdFusion.W przypadku korzystania z ColdFusion można\ntakże dodawać do formularzy kontrolki formularza specyficzne dla ColdFusion.

Spostrzeżenie

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

Obiekty formularza

W programie Dreamweaver typy danych wejściowych formularza\nnazywane są obiektami formularza.Obiekty formularza to mechanizmy\numożliwiające użytkownikom wprowadzanie danych.Do formularza można dodać następujące obiekty formularza:

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.

Spostrzeżenie

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

Pola ukryte

Przechowywanie informacji wprowadzonych przez użytkownika, takich\njak imię i nazwisko, adres e-mail lub preferencje wyświetlania, a następnie używanie tych\ndanych podczas następnej wizyty użytkownika w witrynie.

Przyciski

Wykonywanie\ndziałań po kliknięciu.Można dodać niestandardową nazwę lub etykietę przycisku\nlub użyć jednej ze wstępnie zdefiniowanych etykiet „Wyślij" lub „Resetuj".Przycisk służy\ndo wysyłania danych formularza na serwer lub resetowania formularza.Można\ntakże przypisać inne zadania przetwarzania zdefiniowane w skrypcie.\nNa przykład przycisk może obliczać całkowity koszt elementów\nwybranych na podstawie przypisanych 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 wybrane elementy pola wyboru: surfing, kolarstwo górskie i rafting.

Przyciski opcji

Reprezentują wybór jednoznaczny. Wybranie\nprzycisku w grupie przycisków opcji powoduje odznaczenie wszystkich innych w grupie\n(grupa składa się z dwóch lub więcej przycisków o tej samej nazwie).\nW poniższym przykładzie Rafting to aktualnie wybrana\nopcja.Jeśli użytkownik kliknie Surfing, przycisk Rafting zostanie automatycznie odznaczony.

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 na serwer. Inaczej niż w przypadku pól tekstowych, w które użytkownicy mogą wpisać dowolny ciąg znaków (również nieprawidłowe dane), wartości zwracane przez menu można ustawić precyzyjnie.

Spostrzeżenie

Wyskakujące menu w formularzu HTML nie jest odpowiednikiem graficznego wyskakującego menu. Aby uzyskać informacje o tworzeniu, edytowaniu, pokazywaniu i ukrywaniu graficznego wyskakującego menu, sprawdź łącze na końcu tej sekcji.

Menu przeskoku

Listy nawigacyjne lub menu podręczne umożliwiające wstawienie menu, w którym każda opcja prowadzi do dokumentu lub pliku.

Pola pliku

Zezwalanie użytkownikom\nna przeglądanie pliku na komputerze i przesyłanie pliku jako dane formularza.

Pola obrazu

Umożliwiają wstawianie obrazu do formularza. Pola obrazów służą do tworzenia przycisków graficznych,\ntakich jak przyciski Wyślij lub Resetuj.Używanie obrazu do wykonywania zadań\ninnych niż wysyłanie danych wymaga dołączenia zachowania do\nobiektu formularza.

Tworzenie formularza HTML

(Tylko użytkownicy Creative Cloud): W ramach obsługi HTML5\nw panelu Właściwości wprowadzono nowe atrybuty\ndla elementów formularza.Ponadto cztery nowe elementy formularza (E-mail,\nwyszukiwanie, telefon, URL) zostały wprowadzone w sekcji Formularze\npanelu Wstaw.Więcej informacji zawiera artykuł Ulepszona obsługa HTML5 dla elementów formularza.

Otwórz stronę i umieść punkt wstawiania tam, gdzie ma się pojawić formularz.

Wybierz Wstaw > Formularz lub wybierz kategorię Formularze w panelu Wstaw i kliknij ikonę Formularz.

W widoku Projekt formularze są oznaczone kropkowanym czerwonym konturem. Jeśli nie widzisz tego konturu, wybierz 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śli zostanie wysłana zbyt duża ilość danych, zostaną ucięte, a to spowoduje nieoczekiwane wyniki lub 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śli okno o takiej nazwie nie jest jeszcze otwarte, to przeglądarka otworzy nowe okno z taką nazwą. Ustaw dowolne spośród poniższych wartości 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 sprawdzić, czy docelowy dokument zajmie pełnowymiarowe okno, nawet jeśli oryginalny dokument był wyświetlony w ramce.

Wstawianie obiektów 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.

Spostrzeżenie

Jeśli okno Atrybuty dostępności znacznika Input jest niewidoczne, punkt wstawiania mógł znajdować się w widoku Kod podczas próby wstawienia obiektu formularza. Upewnij się, że punkt wstawiania znajduje się 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.

Spostrzeżenie

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.

Użyj podziałów wierszy, podziałów akapitów, wstępnie sformatowanego tekstu lub tabel do formatowania formularzy.Nie można wstawić formularza w inny formularz (to znaczy nie można nakładać tagów), ale można umieścić więcej niż jeden formularz na stronie.

Podczas projektowania formularzy należy pamiętać o oznaczaniu pól formularza opisowym tekstem, aby użytkownicy wiedzieli, na co odpowiadają — na przykład „Wpisz imię i nazwisko", aby poprosić o podanie danych osobowych.

Używaj tabel, aby zapewnić strukturę obiektom formularza i etykietom pól.Używając tabel w formularzach upewnij się, że wszystkie tagi table są umieszczone między tagami form.

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

Aby zapoznać się z samouczkiem dotyczącym stylizowania formularzy za pomocą CSS, zobacz www.adobe.com/go/vid0161.

Właściwości obiektu Pole tekstowe

Wybierz obiekt pola tekstowego i ustaw dowolne z następujących opcji w inspektorze właściwości:

Szer. znakowa

Określa maksymalną liczbę znaków, które mogą być wyświetlane w polu. Ta liczba może być mniejsza niż MAX Chars, która określa maksymalną liczbę znaków, które mogą być wprowadzone w polu. Na przykład, jeśli Char Width jest ustawiona na 20 (wartość domyślna), a użytkownik wprowadzi 100 znaków, tylko 20 z tych znaków będzie widocznych w polu tekstowym.Mimo że nie można wyświetlić znaków w polu, są one rozpoznawane przez obiekt pola i są wysyłane na serwer do przetwarzania.

Maks. znaków

Określa maksymalną liczbę znaków, które użytkownik może wprowadzić w przypadku jednowierszowych pól tekstowych.Użyj opcji Max Chars, aby ograniczyć kody pocztowe do 5 cyfr, limit haseł do 10 znaków itp. Jeśli pole Max Chars pozostanie puste, użytkownicy mogą wprowadzić dowolną ilość tekstu. Jeśli tekst przekroczy szerokość pola, będzie przewijany.Jeśli użytkownik przekroczy maksymalną liczbę znaków, formularz wygeneruje dźwięk alertu.

Liczba wierszy

(Dostępne, gdy wybrano opcję Multiline) Ustawia wysokość wielowierszowego pola tekstowego.

Wyłączony

Wyłącza obszar tekstowy.

Tylko do odczytu

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

Typ

Oznacza pole jako jednowierszowe, wielowierszowe lub pole hasła.

Jeden wiersz

Powoduje powstanie znacznika input z atrybutem type ustawionym na text. Ustawianie Char Width mapuje się na atrybut size, a ustawianie Max Chars mapuje się na atrybut maxlength.

Wiele wierszy

Tworzy znacznik textarea. Ustawienie Char Width mapuje się na atrybut cols, a ustawienie Num Lines mapuje się na atrybut rows.

Hasło

Powoduje powstanie znacznika input z atrybutem type ustawionym na password. Ustawienia Char Width i Max Chars odpowiadają tym samym atrybutom co w jednowierszowych polach tekstowych.Gdy użytkownik wpisuje hasło w polu tekstowym, wprowadzane znaki są wyświetlane jako kropki lub gwiazdki, aby chronić je przed obserwacją przez inne osoby.

Wart. początk.

Przypisuje wartość wyświetlaną w polu podczas pierwszego ładowania formularza.Na przykład można wskazać, że użytkownik wprowadza informacje w polu, dołączając notatkę lub przykładową wartość.

Class

Umożliwia zastosowanie reguł CSS do obiektu.

Opcje obiektu Przycisk

Nazwa przycisku

Przypisuje przyciskowi nazwę. Dwie nazwy zarezerwowane — Submit i Reset — informują formularz, aby przesłać dane formularza do aplikacji lub skryptu przetwarzającego albo przywrócić pierwotne wartości wszystkich pól formularza, odpowiednio.

Wartość

Określa tekst wyświetlany na przycisku.

Operacja

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

Wyślij formularz

Przesyła dane formularza do przetwarzania, gdy użytkownik kliknie przycisk.Dane są przesyłane na stronę lub do skryptu określonego we właściwości Action formularza.

Wyzeruj formularz

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

Brak

Określa akcję do wykonania po kliknięciu przycisku.Na przykład można dodać zachowanie JavaScript, które otwiera inną stronę, gdy użytkownik kliknie przycisk.

Class

Stosuje reguły CSS do obiektu.

Opcje obiektu Pole wyboru

Wartość przy włączeniu

Ustawia wartość do przesłania na serwer, gdy pole wyboru jest zaznaczone.Na przykład w ankiecie można ustawić wartość 4 dla zdecydowanie się zgadzam i wartość 1 dla zdecydowanie się nie zgadzam.

Stan początkowy

Określa, czy pole wyboru jest zaznaczone podczas ładowania formularza w przeglądarce.

Dynamiczny

Pozwala serwerowi dynamicznie określić stan początkowy pola wyboru.Na przykład można użyć pól wyboru do wizualnego przedstawienia informacji Tak/Nie przechowywanych w rekordzie bazy danych.W czasie projektowania nie znasz tych informacji.W czasie wykonywania serwer odczytuje rekord bazy danych i zaznacza pole wyboru, jeśli wartością jest Tak.

Class

Stosuje reguły kaskadowych arkuszy stylów (CSS) do obiektu.

Opcje obiektu Pojedynczy przycisk opcji

Wartość przy włączeniu

Ustawia wartość do przesłania na serwer, gdy przycisk opcji jest wybrany.Na przykład można wpisać skiing w polu Checked Value, aby wskazać, że użytkownik wybrał narciarstwo.

Stan początkowy

Określa, czy przycisk opcji jest wybrany podczas ładowania formularza w przeglądarce.

Dynamiczny

Pozwala serwerowi dynamicznie określić stan początkowy przycisku opcji.Na przykład można użyć przycisków opcji do wizualnego przedstawienia informacji przechowywanych w rekordzie bazy danych.W czasie projektowania te informacje nie są znane.W czasie wykonywania serwer odczytuje rekord bazy danych i zaznacza przycisk opcji, jeśli wartość odpowiada określonej wartości.

Class

Stosuje reguły CSS do obiektu.

Opcje menu

Menu/lista

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

Typ

Wskazuje, czy menu rozwija się po kliknięciu (opcja Menu), czy wyświetla przewijaną listę elementów (opcja List).Wybierz opcję Menu, jeśli chcesz, aby tylko jedna opcja była widoczna podczas wyświetlania formularza w przeglądarce.Aby wyświetlić inne opcje, użytkownik musi kliknąć strzałkę w dół.

Wybierz opcję Lista, aby wyświetlić niektóre lub wszystkie opcje, gdy formularz jest wyświetlany w przeglądarce, co pozwoli użytkownikom wybrać wiele elementów.

Wysokość

(Tylko typ listy) Ustawia liczbę elementów wyświetlanych w menu.

Zaznaczenia

(Tylko dla typu Lista) Wskazuje, czy użytkownik może wybrać wiele elementów z listy.

Lista wartości

Otwiera okno dialogowe, które pozwala dodać elementy do menu formularza:

Użyj przycisków Plus (+) i Minus (–), aby dodać i usunąć elementy z listy.
Wpisz tekst etykiety i opcjonalną wartość każdej z pozycji menu.
Każdy element na liście ma etykietę (tekst, który pojawia się na liście) i wartość (wartość, która jest wysyłana do aplikacji przetwarzającej, jeśli element jest wybrany). Jeśli nie określono wartości, etykieta jest wysyłana do aplikacji przetwarzającej zamiast tego.
Użyj przycisków strzałek w górę i w dół, aby zmienić kolejność elementów na liście.
Elementy pojawiają się w menu w tej samej kolejności, w jakiej pojawiają się w oknie dialogowym Wartości listy. Pierwszy element na liście jest wybranym elementem, gdy strona jest ładowana w przeglądarce.

Dynamiczny

Pozwala serwerowi dynamicznie wybrać element w menu podczas pierwszego wyświetlania.

Class

Umożliwia zastosowanie reguł CSS do obiektu.

Wstępnie zaznaczone

Domyślnie określa pozycje zaznaczone na liście. Kliknij element lub elementy na liście.

Wstawianie pól do wysyłania plików

Można utworzyć pole przekazywania plików, które pozwala użytkownikom wybrać plik na komputerze — np. dokument edytora tekstu lub plik graficzny — i przekazać plik na serwer.Pole pliku wygląda jak inne pola tekstowe, ale zawiera również przycisk Przeglądaj.Użytkownik wprowadza ścieżkę do pliku, który chce przekazać, ręcznie lub używa przycisku Przeglądaj, aby znaleźć i wybrać plik.

Aby można było używać pól przekazywania plików, trzeba mieć skrypt serwera lub stronę mogącą obsługiwać przesyłanie plików.Zapoznaj się z dokumentacją używanej technologii serwera do przetwarzania danych formularzy.Na przykład, jeśli używasz PHP, zobacz „Obsługa przesyłania plików" w internetowym podręczniku PHP pod adresem http://us2.php.net/features.file-upload.php.

Pola plików wymagają użycia metody POST do przesyłania plików z przeglądarki na serwer. Plik jest przesyłany na adres określony w polu Akcja formularza.

Spostrzeżenie

Skontaktuj się z administratorem serwera, aby potwierdzić, że anonimowe przesyłanie plików jest dozwolone przed użyciem pola pliku.

Wstaw formularz na stronę (Wstaw > Formularz).

Zaznacz ten formularz, aby wyświetlić jego Inspektor właściwości.

Ustaw metodę na POST.

Z wyskakującego menu Typ kodowania wybierz multipart/form-data.

W polu Akcja określ skrypt po stronie serwera lub stronę zdolną do obsługi przesyłanego pliku.

Umieść punkt wstawiania wewnątrz konturu formularza i wybierz 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, które mogą być wyświetlone w polu.

Maks. znaków

Określa maksymalną liczbę znaków, którą będzie mieścić pole. Jeśli użytkownik przegląda pliki w celu zlokalizowania pliku, nazwa pliku i ścieżka mogą przekroczyć określoną wartość Maks. znaków. Jednak jeśli użytkownik próbuje wpisać nazwę pliku i ścieżkę, pole pliku pozwoli tylko na liczbę znaków określoną przez wartość Maks. znaków.

Wstawianie przycisku z obrazem

Obrazy mogą pełnić rolę ikon przycisków. Używanie obrazka do wykonywania zadań innych niż przesyłanie danych wymaga dołączenia zachowania do obiektu formularza.

W dokumencie umieść punkt wstawiania wewnątrz konturu formularza.

Wybierz Wstaw > Formularz > Pole obrazka.

Pojawi się okno dialogowe Wybierz źródło obrazu.

Wybierz obraz dla przycisku w oknie dialogowym Wybierz Image Source i kliknij OK.

Ustaw dowolne spośród opcji w Inspektorze właściwości:

ImageField

Przypisuje przyciskowi nazwę. Dwie nazwy zastrzeżone, Prześlij i Resetuj, nakazują formularzowi przesłać dane formularza do aplikacji przetwarzania lub skryptu albo przywrócić wszystkim polom formularza ich początkowe wartości.

Src

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

Alt

Pozwala wprowadzić tekst opisowy na wypadek, gdyby obraz nie załadował się w przeglądarce.

Wyrównaj

Ustawia atrybut „align” obiektu.

Edytuj obraz

Uruchamia domyślny edytor obrazów i otwiera plik obrazka do edycji.

Class

Umożliwia zastosowanie reguł CSS do obiektu.

Aby dołączyć zachowanie JavaScript do przycisku, wybierz obraz, a następnie wybierz zachowanie w 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, gdy formularz jest przesyłany.

Wstawianie grupy przycisków opcji

Umieść punkt wstawiania wewnątrz konturu 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 określ 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 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 chcesz, aby Dreamweaver 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żna ustawiać w Inspektorze właściwości albo bezpośrednio w widoku Kod.

Wstawianie grupy pól tekstowych

Umieść punkt wstawiania wewnątrz konturu 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 określ 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żna ustawiać w Inspektorze właściwości albo bezpośrednio w widoku Kod.

Informacje o dynamicznych obiektach formularzy

Dynamiczny obiekt formularza to obiekt formularza, którego stan początkowy jest określany przez serwer, gdy strona jest żądana z serwera, a nie przez projektanta formularza w czasie projektowania. Na przykład, gdy użytkownik żąda strony PHP, która zawiera formularz z menu, skrypt PHP na stronie automatycznie wypełnia menu wartościami przechowywanymi w bazie danych. Serwer następnie wysyła ukończoną stronę do przeglądarki użytkownika.

Wprowadzenie dynamiki obiektów formularzy może uprościć obsługę serwisu. Na przykład wiele witryn używa menu, aby przedstawić użytkownikom zestaw opcji. Jeśli menu jest dynamiczne, można dodawać, usuwać lub zmieniać elementy menu w jednym miejscu — tabeli bazy danych, w której elementy są przechowywane — aby aktualizować wszystkie wystąpienia tego samego menu w witrynie.

Wstaw lub zmień dynamiczne menu formularza HTML

Można dynamicznie wypełnić menu formularza HTML lub menu listy wpisami z bazy danych. W przypadku większości stron można użyć obiektu menu HTML.

Przed rozpoczęciem musisz wstawić formularz HTML na stronie ColdFusion, PHP lub ASP i musisz określić zestaw rekordów lub inne źródło zawartości dynamicznej dla 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. Aby 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

W widoku Design wybierz obiekt formularza listy/menu.

W Inspektorze właściwości kliknij przycisk Dynamiczne.

Wypełnij informacje w oknie dialogowym i kliknij przycisk OK.

Wyświetlanie zawartości dynamicznej w polach tekstowych HTML

Możesz wyświetlać zawartość dynamiczną w polach tekstowych HTML, gdy formularz jest wyświetlany w przeglądarce.

Przed rozpoczęciem musisz utworzyć formularz na stronie ColdFusion, PHP lub ASP i zdefiniować zestaw rekordów lub inne źródło zawartości dynamicznej dla pola tekstowego.

Wybierz pole tekstowe w formularzu HTML na stronie.

W inspektorze właściwości kliknij ikonę błyskawicy obok pola Init Val, aby wyświetlić okno dialogowe Dane dynamiczne.

Wybierz kolumnę zestawu rekordów, która dostarczy wartość do pola tekstowego, a następnie kliknij OK.

Ustaw opcje okna dialogowego Pole tekstowe dynamiczne

Wybierz pole tekstowe, które ma być dynamiczne, z menu podręcznego Pole tekstowe.

Kliknij ikonę błyskawicy obok pola Ustaw wartość na, wybierz źródło danych z listy źródeł danych i kliknij OK.

Źródło danych musi zawierać informacje tekstowe. Jeśli na liście nie ma źródeł danych lub dostępne źródła danych nie spełniają Twoich potrzeb, kliknij przycisk Plus (+), aby zdefiniować nowe źródło danych.

Dynamiczne wstępne wybieranie pola wyboru HTML

Możesz pozwolić serwerowi zdecydować, czy wybrać pole wyboru, gdy formularz jest wyświetlany w przeglądarce.

Przed rozpoczęciem musisz utworzyć formularz na stronie ColdFusion, PHP lub ASP i zdefiniować zestaw rekordów lub inne źródło zawartości dynamicznej dla pól wyboru.Najlepiej, aby źródło zawartości zawierało dane logiczne, takie jak 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śli 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.

Spostrzeżenie

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

Dynamiczne wstępne wybieranie przycisku opcji HTML

Dynamiczne wstępne wybieranie przycisku opcji HTML, gdy rekord jest wyświetlany w formularzu HTML w przeglądarce.

Przed rozpoczęciem musisz utworzyć formularz na stronie ColdFusion, PHP lub ASP i wstawić co najmniej jedną grupę przycisków opcji HTML (Wstaw > Formularz > Grupa przycisków opcji).Musisz także zdefiniować zestaw rekordów lub inne źródło dynamicznej zawartości do przycisków opcji.Najlepiej, aby źródło zawartości zawierało dane logiczne, takie jak Tak/Nie lub prawda/fałsz.

W widoku Design wybierz przycisk opcji w grupie przycisków opcji.

W Inspektorze właściwości kliknij przycisk Dynamiczne.

Wypełnij okno dialogowe Grupa dynamicznych przycisków opcji i kliknij OK.

Ustaw opcje okna dialogowego Grupa dynamicznych przycisków opcji

W menu podręcznym 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 grupie.

Wybierz wartość do dynamicznego wstępnego wyboru z listy wartości. 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 możliwe zaznaczone wartości przycisków opcji w grupie.

Wybrany zestaw rekordów zawiera wartości, które pasują do zaznaczonych wartości przycisków opcji. Aby wyświetlić zaznaczone wartości przycisków opcji, wybierz każdy przycisk opcji i otwórz jego inspektor właściwości (Okno > Właściwości).

Kliknij przycisk OK.

Ustaw opcje okna dialogowego Dynamiczna grupa przycisków opcji (ColdFusion)

Wybierz grupę przycisków opcji i formularz z menu podręcznego Grupa przycisków opcji.

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 OK, aby zamknąć okno dialogowe Dynamiczna grupa przycisków opcji i wstawić symbol zastępczy zawartości dynamicznej w grupie przycisków opcji.

Walidacja danych formularza HTML

Dreamweaver może dodać kod JavaScript, który sprawdza zawartość określonych pól tekstowych, aby upewnić się, że użytkownik wprowadził właściwy typ danych.

Można użyć widżetów formularza Spry do tworzenia formularzy i sprawdzania poprawności zawartości określonych elementów formularza. Aby uzyskać więcej informacji, zapoznaj się z tematami Spry wymienionymi poniżej.

Można również tworzyć formularze ColdFusion w programie Dreamweaver, które sprawdzają poprawność zawartości określonych pól.Aby uzyskać więcej informacji, zapoznaj się z rozdziałem ColdFusion wymienionym poniżej.

Utwórz formularz HTML zawierający co najmniej jedno pole tekstowe i jeden przycisk Prześlij.

Upewnij się, że każde pole tekstowe, które chcesz sprawdzić, ma unikalną nazwę.

Zaznacz przycisk Wyślij.

W panelu Zachowania (Okno > Zachowania) kliknij przycisk Plus (+) i wybierz zachowanie Sprawdź poprawność formularza z listy.

Ustaw reguły sprawdzania poprawności dla każdego pola tekstowego i kliknij OK.

Na przykład możesz określić, że pole tekstowe dla wieku osoby akceptuje tylko liczby.

Spostrzeżenie

Zachowanie Sprawdź poprawność formularza jest dostępne tylko wtedy, gdy pole tekstowe zostało wstawione do dokumentu.

Dołącz zachowania JavaScript do obiektów formularza HTML

Można dołączyć zachowania JavaScript przechowywane w programie Dreamweaver do obiektów formularza HTML, takich jak przyciski.

Zaznacz obiekt formularza HTML.

W panelu Zachowania (Okno > Zachowania) kliknij przycisk Plus (+) i wybierz zachowanie z listy.

Dołącz niestandardowe skrypty do przycisków formularza HTML

Niektóre formularze używają JavaScript lub VBScript do przetwarzania formularza lub innej akcji po stronie klienta, w przeciwieństwie do wysyłania danych formularza na serwer w celu przetwarzania. Można użyć programu Dreamweaver do skonfigurowania przycisku formularza w celu uruchomienia określonego skryptu po stronie klienta, gdy użytkownik kliknie przycisk.

Zaznacz przycisk Wyślij w formularzu.

W panelu Behaviors (Okno > Behaviors), kliknij przycisk Plus (+) i wybierz Call JavaScript z listy.

W polu Call JavaScript wprowadź nazwę funkcji JavaScript, która ma zostać uruchomiona, gdy użytkownik kliknie przycisk, a następnie kliknij OK.

Na przykład można wprowadzić nazwę funkcji, która jeszcze nie istnieje, takiej jak processMyForm().

Jeśli funkcja JavaScript nie istnieje jeszcze w sekcji head dokumentu, dodaj ją teraz.

Na przykład można zdefiniować następującą funkcję JavaScript w sekcji head dokumentu, aby wyświetlić komunikat, gdy użytkownik kliknie przycisk Submit:

function processMyForm(){

alert('Thanks for your order!');

}

Tworzenie formularzy HTML z ułatwieniami dostępu

Podczas wstawiania obiektu formularza HTML można uczynić obiekt formularza dostępnym i zmienić atrybuty dostępności później.

Dodawanie obiektu formularza z ułatwieniami dostępu

Przy pierwszym dodawaniu dostępnych obiektów formularza aktywuj okno dialogowe dostępności dla obiektów formularza (zobacz Optymalizowanie przestrzeni roboczej do rozwoju wizualnego).

Tę czynność wykonuje się tylko raz.

W dokumencie umieść punkt wstawiania w miejscu, gdzie ma pojawić się obiekt formularza.

Wybierz Insert > Form i wybierz obiekt formularza do wstawienia.

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:

Spostrzeżenie

Czytnik ekranu odczytuje wprowadzoną nazwę jako atrybut Label dla obiektu.

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 pod względem dostępności, jednak funkcjonalność może się różnić w zależności od przeglądarki.

Bez znacznika etykiety

Powoduje, że znacznik Label nie jest stosowany:

<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

Klawisz dostępu

Używa odpowiednika klawiatury (jedna litera) i klawisza Alt (Windows) lub klawisza Control (Macintosh) do wyboru obiektu formularza w przeglądarce. Na przykład, jeśli wprowadzisz B jako klawisz dostępu, użytkownicy z przeglądarką Macintosh mogą nacisnąć Control+B, aby wybrać obiekt formularza.

Kolejność tabulatora

Określa kolejność, w jakiej klawisz tabulatora pozwala przechodzić między obiektami formularza. Jeśli ustawisz kolejność tabulacji dla jednego obiektu, musisz ustawić kolejność tabulacji dla wszystkich obiektów.

Ustawianie kolejności tabulacji jest przydatne, gdy na stronie znajdują się inne łącza i obiekty formularza i trzeba, aby użytkownik przechodził między nimi za pomocą klawisza Tab w określonej kolejności.

Kliknij przycisk Tak, aby wstawić znacznik formularza.

W dokumencie pojawi się obiekt formularza.

Spostrzeżenie

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

Edytuj Wartości dostępności dla obiektu formularza

Zaznacz obiekt w oknie dokumentu.

Wykonaj jedną z następujących czynności:

Edytuj odpowiednie atrybuty w widoku Code.
Kliknij prawym przyciskiem myszy (Windows) lub kliknij z wciśniętym klawiszem Control (Macintosh), a następnie wybierz Edytuj tag.

Więcej podobnych

Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.

Otwórz aplikację

Wstecz

Tworzenie oraz włączanie formularzy ColdFusion w programie Dreamweaver

Następna

Rozszerzona obsługa elementów formularza w języku HTML5

Materiały do nauki

Zdobywaj wiedzę, korzystając z samouczków wideo krok po kroku i praktycznych wskazówek dostępnych bezpośrednio w aplikacji.

Społeczność

Dołącz do dyskusji, znajdź odpowiedzi, ucz się od ekspertów i dziel się swoją wiedzą.

Strona główna Adobe

Uzyskaj dostęp do ulubionych aplikacji, usług, zarządzania plikami i innych funkcji Creative Cloud.