Aplikacje internetowe Projektowanie formularzy Część 2.

Prezentacja na temat: "Aplikacje internetowe Projektowanie formularzy Część 2."— Zapis prezentacji:

1 Aplikacje internetowe Projektowanie formularzy Część 2

2 Przyciski opcji Przyciski opcji są wyświetlane na stronie w grupach umożliwiających użytkownikowi wskazanie jednej opcji z kilku dostępnych. Zaznaczenie jednej pozycji wiąże się z automatycznym wyłączeniem innej opcji. Tylko jedna opcja z grupy może być w danej chwili zaznaczona. Podobnie jak przyciski w odbiorniku radiowym, także przyciski opcji na formularzach HTML wzajemnie się wykluczają — tylko jedna z nich może być w danej chwili włączona.

3 Przyciski opcji Składnia znacznika przycisku opcji jest następująca: Opisowy tekst przycisku opcji. Atrybut value określa wartość, która zostanie zwrócona do programu obsługi formularza w przypadku zaznaczenia danej opcji. Z tego względu wartość atrybutu musi być niepowtarzalna w danej grupie. Z kolei wartości atrybutu name powinny być identyczne we wszystkich przyciskach należących do tej samej grupy.

4 Przyciski opcji Przykład Płeć: Mężczyzna Kobieta Aby wstępnie zaznaczyć jedną z pozycji, należy do odpowiadającego jej znacznika dodać atrybut checked. Na przykład, aby domyślnie zaznaczona była opcja Mężczyzna, należałoby zmienić powyższy przykład w następujący sposób: Płeć: Mężczyzna Kobieta Zawsze warto stosować atrybut checked, by zaznaczyć domyślny przycisk opcji w danej grupie.

5 Pola wyboru Pola wyboru są niewielkimi, kwadratowymi kontrolkami, przeznaczonymi do zaznaczania niewykluczających się wzajemnie opcji. Ich nazwa pochodzi stąd, że po zaznaczeniu w polu wyświetlany jest niewielki X, co upodabnia je do pól, w których zakreślamy opcje w zwyczajnych, drukowanych formularzach. Kod znacznika ma taką składnię, jak przedstawiona poniżej.

6 Pola wyboru Nietrudno zauważyć, że definicja pola wyboru jest zbliżona do definicji przycisku opcji. Cechą różniącą wymienione elementy jest to, że włączenie opcji pola wyboru nie wyklucza zastosowania opcji zaznaczonych za pomocą innych kontrolek tego typu. Kolejny przedstawiony przykład kodu pozwala użytkownikowi na zdecydowanie, czy chce on otrzymywać informacje za pomocą poczty elektronicznej. Dodaj mój adres do listy wysyłkowej Atrybut checked może zostać wykorzystany do wstępnego zaznaczenia danej pozycji w formularzu. Podobnie jak w przypadku przycisków opcji, wartość atrybutu value jest wykorzystywana tylko po zaznaczeniu pola wyboru. Jeśli nie zostanie określony żaden ciąg tekstowy atrybutu value, domyślnie jest mu nadawana wartość on.

7 Listy wyboru Listy wyboru umożliwiają użytkownikom wybranie jednej opcji tekstowej lub większej liczby takich opcji prezentowanych w obszarze kontrolki. Pozycje listy mogą być wyświetlane jednocześnie w danym polu lub w formie listy rozwijanej. Do utworzenia listy wykorzystywane są znaczniki i oraz — opcjonalnie —.

8 Listy wyboru Użycie znacznika gwarantuje utworzenie kontenera listy. Składnia odpowiedniego kodu została pokazana poniżej.

9 Listy wyboru Znacznik odpowiada za dodanie jednej pozycji do listy. Opcjonalne atrybuty znacznika zostały przedstawione w tabeli AtrybutWartości label Krótsza wersja etykiety danej pozycji, wykorzystywana przez przeglądarkę. selectedWstępne zaznaczenie danej pozycji. valueWartość, która powinna zostać przesłana do programu obsługi formularza w przypadku zaznaczenia danej pozycji. Pominięcie tego atrybutu powoduje przekazanie do serwera tekstu danej pozycji.

10 Listy wyboru Przykład Wybierz dzień tygodnia: Poniedziałek Wtorek Środa Czwartek Piątek Sobota Niedziela

11 Listy wyboru Przykład Wybierz dzień tygodnia: Poniedziałek Wtorek Środa Czwartek Piątek Sobota Niedziela

12 Pola plików Pola plików umożliwiają użytkownikom wyszukiwanie plików lokalnych, które zostaną następnie przesłane jako załączniki do danych formularza. Składnia znacznika pola pliku została przedstawiona poniżej.

13 Pola plików Wynikiem dołączenia wspomnianego znacznika jest umieszczenie na stronie pola tekstowego wraz z przyciskiem. Umożliwia to określenie położenia pliku w sposób typowy dla systemu operacyjnego, w jakim działa przeglądarka. Nic nie stoi na przeszkodzie, żeby użytkownik wykorzystał pole tekstowe do bezpośredniego wprowadzenia ścieżki dostępu do pliku. Załącznik:

14 Grupy pól i ich opis Niekiedy czytelność formularza istotnie się zwiększa po zgrupowaniu pewnych jego kontrolek. Znacznik jest wykorzystywany do wyznaczenia kontenera, w skład którego wchodzą inne elementy formularza. W wyniku jego zastosowania dana grupa kontrolek zostaje otoczona cienką linią.

15 Grupy pól i ich opis Przykład Płeć: Mężczyzna Kobieta Przykład Płeć: Mężczyzna Kobieta

16 Kolejność uaktywniania kontrolek i skróty klawiaturowe Znaczniki pól można uzupełnić o dwa dodatkowe atrybuty — tabindex i accesskey — które ułatwiają korzystanie z formularza. Atrybut tabindex pozwala na ustalenie kolejności uaktywniania pól po naciśnięciu przycisku tabulatora. Wartością atrybutu jest liczba określająca kolejny numer kontrolki formularza. Atrybut accesskey umożliwia zdefiniowanie klawisza, po naciśnięciu którego dana kontrolka zostanie natychmiast uaktywniona. Wartością parametru jest pojedynczy znak odpowiadający klawiszowi skrótu.

17 Kolejność uaktywniania kontrolek i skróty klawiaturowe W kolejnym przykładzie został zdefiniowany znacznik pola tekstowego, którego uaktywnienie następuje po naciśnięciu klawiszy Alt+I (w systemach operacyjnych Windows). Kontrolka ta jest jednocześnie trzecim elementem formularza. I mię:

18 Uniemożliwienie wprowadzania zmian Istnieją dwa sposoby takiego prezentowania informacji, by nie mogły one być zmieniane przez użytkowników. Rozwiązania te sprowadzają się do oznaczenia pola jako kontrolki tylko do odczytu lub kontrolki wyłączonej. Dodanie atrybutu readonly="readonly" do znacznika pola tekstowego uniemożliwia użytkownikowi modyfikowanie zawartego w nim tekstu. Atrybut disabled="disabled" powoduje całkowite wyłączenie kontrolki (oznaczane kolorem właściwym dla wyłączonych kontrolek danego systemu operacyjnego; zazwyczaj jest to kolor szary). Użytkownik nie może z niej wówczas korzystać.

19 Uniemożliwienie wprowadzania zmian Choć sposób prezentacji obydwu kontrolek na ekranie jest zbliżony, trzeba pamiętać, że zawartość pola typu readonly można objąć zaznaczeniem (nie można jej zmienić). Natomiast treści pola typu disabled nie podlega zaznaczeniu.