Aplikacje internetowe

Projektowanie formularzy

Część 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.

Przyciski opcji

• Składnia znacznika przycisku opcji jest następująca:<p><input type="radio" id="identyfikator_pola" name="nazwa_grupy" [checked="checked"] value="wartość_wybranej_pozycji" /> Opisowy tekst przycisku opcji .</p>

• 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.

Przyciski opcji• Przykład

<p>Płeć: <br /><input type="radio" id="gender_male" name="gender" value="male" /> Mężczyzna <input type="radio" id="gender_female" name="gender" value="female" /> Kobieta</p>

• 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>Płeć: <br /><input type="radio" id="gender_male" name="gender" value="male" checked="checked" /> Mężczyzna<input type="radio" id="gender_female" name="gender" value="female" /> Kobieta</p>

• Zawsze warto stosować atrybut checked, by zaznaczyć domyślny przycisk opcji w danej grupie.

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 <checkbox> ma taką składnię, jak przedstawiona poniżej.<input type="checkbox" id="identyfikator_pola" [checked="checked"] value="'wartość'_wybranego_pola" />

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.

<p><input type="checkbox" id="spam_me" checked="checked" value="spamme">Dodaj mój adres do listy wysyłkowej</p>

• 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.

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 <select> i <option> oraz — opcjonalnie — <optgroup>.

Listy wyboru

• Użycie znacznika <select> gwarantuje utworzenie kontenera listy. Składnia odpowiedniego kodu została pokazana poniżej.<select id="nazwa__pola" size="'liczba_wyświetlanych_pozycji" [multiple="multiple"]>

Listy wyboru

• Znacznik <option> odpowiada za dodanie jednej pozycji do listy. Opcjonalne atrybuty znacznika <option> zostały przedstawione w tabeli Atrybut Wartości

label Krótsza wersja etykiety danej pozycji, wykorzystywana przez przeglądarkę.

selected Wstępne zaznaczenie danej pozycji.

value Wartość, 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.

Listy wyboru• Przykład

<p>Wybierz dzień tygodnia:<br /><select id="AvailDays" name="AvailDays" size="1"> <option>Poniedziałek</option> <option>Wtorek</option> <option>Środa</option> <option>Czwartek</option> <option>Piątek</option> <option>Sobota</option> <option>Niedziela</option></p></select>

Listy wyboru• Przykład

<p>Wybierz dzień tygodnia:<br /><select id="AvailDays" name="AvailDays" size="1"> <optgroup label="Dni robocze"> <option>Poniedziałek</option> <option>Wtorek</option> <option>Środa</option> <option>Czwartek</option> <option>Piątek</option> </optgroup > <optgroup label="Dni wolne"> <option>Sobota</option> <option>Niedziela</option></optgroup> </p></select>

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.<input type="file" id="identyfikator_pola" name="nazwa_pola" size="rozmiar_wyświetlanego_pola" />

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.<p>Załącznik: <input type="file" id="SendFile" size="40"/></p>

Grupy pól i ich opis

• Niekiedy czytelność formularza istotnie się zwiększa po zgrupowaniu pewnych jego kontrolek.

• Znacznik <fieldset> 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ą.

Grupy pól i ich opis• Przykład

<fieldset> <p>Płeć: <br /> <input type="radio" name="gender" value="male" /> Mężczyzna<br /> <input type="radio" name="gender" value="female" /> Kobieta </p></fieldset>

• Przykład<fieldset> <p><legend>Płeć: </legend></p> <p><input type="radio" name="gender" value="male" /> Mężczyzna<br /> <input type="radio" name="gender" value="female" /> Kobieta </p></fieldset>

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.

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.

<p><label for="FirstName"><u>I</u>mię: </label><input type="text" id="FirstName" name="FirstName" value="" tabindex="3" accesskey="I" size="30" maxlength="40"></p>

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ć.

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.