Aplikacje internetowe

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: <p><inputtype="radio" id="identyfikator_pola" name="nazwa_grupy" [checked="checked"] value="wartość_wybranej_pozycji" /> Opisowy tekst przycisku opcji .</p> • Atrybut valueokreśla wartość, która zostanie zwrócona do programu obsługi formularza wprzypadku zaznaczenia danej opcji. Z tego względu wartość atrybutu musi być niepowtarzalna w danej grupie. Z kolei wartości atrybutu namepowinny być identyczne we wszystkich przyciskach należących do tej samej grupy.

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

5. Polawyboru • 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. <inputtype="checkbox" id="identyfikator_pola" [checked="checked"] value="'wartość'_wybranego_pola" />

6. Polawyboru • 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">Dodajmójadres do listywysyłkowej</p> • Atrybut checkedmoże zostać wykorzystany do wstępnego zaznaczenia danej pozycji w formularzu. Podobnie jak w przypadku przycisków opcji, wartość atrybutu valuejest 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 <select> i <option> oraz — opcjonalnie — <optgroup>.

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

9. Listy wyboru • Znacznik <option> odpowiada za dodanie jednej pozycji do listy. Opcjonalne atrybuty znacznika <option> zostały przedstawione w tabeli

10. Listy wyboru • Przykład <p>Wybierzdzień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>

11. Listy wyboru • Przykład <p>Wybierzdzieńtygodnia:<br /> <select id="AvailDays" name="AvailDays" size="1"> <optgroup label="Dnirobocze"> <option>Poniedziałek</option> <option>Wtorek</option> <option>Środa</option> <option>Czwartek</option> <option>Piątek</option> </optgroup > <optgroup label="Dniwolne"> <option>Sobota</option> <option>Niedziela</option> </optgroup> </p> </select>

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

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

14. 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ą.

15. Grupy pól i ich opis • Przykład <fieldset> <p>Płeć: <br /> <inputtype="radio" name="gender" value="male" /> Mężczyzna<br /> <inputtype="radio" name="gender" value="female" /> Kobieta </p></fieldset> • Przykład <fieldset> <p><legend>Płeć: </legend></p> <p><inputtype="radio" name="gender" value="male" /> Mężczyzna<br /> <inputtype="radio" name="gender" value="female" /> Kobieta </p></fieldset>

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. <p><labelfor="FirstName"><u>I</u>mię: </label> <inputtype="text" id="FirstName" name="FirstName" value="" tabindex="3" accesskey="I" size="30" maxlength="40"></p>

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.