1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail. <form action="mailto:adres e-mail?subject=temat" method="post"> </form> pola formularza Jako wartość atrybutu action można również podać adres skryptu, np. PHP. Jeśli wysyłamy formularz do skryptu, jako wartość atrybutu method możemy również podać get. Dzięki temu dane zostaną dołączone do adresu wywołania, ale sposób ten stosuje się dla bardzo krótkich formularzy. Pole tekstowe <input type="text" name="nazwa" id="identyfikator"> Atrybut name powinien być unikatowy w obrębie formularza. Inne atrybuty: size="n" - długość pola określona za pomocą ilości znaków, które będą w nim widoczne maxlength="n" - maksymalna ilość znaków w polu readonly="readonly" pole tylko do odczytu, nie będzie można modyfikować treści. Wartość pola jest przesyłana w formularzu. disabled="disabled" - zablokowanie pola. Pole nie jest przesyłane z danymi formularza. tabindex="n" określenie kolejności poruszania się tabulatorem po polach. Hasło <input type="password" name="nazwa" id="identyfikator"> Pole podobne do pola tekstowego, ale treść nie jest jawna.
2 Pole wyboru <input type="checkbox" name="nazwa" value="odpowiedź">opis Wszystkie pola tego typu, które dotyczą tego samego pytania, powinny nosić taką samą nazwę. Dodatkowo każde pole może posiadać unikatowy identyfikator. Możliwe jest wybranie więcej niż jednej odpowiedzi. Atrybuty: checked="checked" - domyślne zaznaczenie pola disabled="disabled" - blokada pola Pole radiowe <input type="radio" name="nazwa" value="wartość">opis Wszystkie pola tego typu, które dotyczą tego samego pytania, powinny nosić taką samą nazwę. Dodatkowo każde pole może posiadać unikatowy identyfikator. Można wybrać tylko jedną odpowiedź. Atrybuty: checked="checked" - domyślne zaznaczenie pola disabled="disabled" - blokada pola Etykieta Etykiet używamy do podpisywania pól formularza. Możemy ich użyć na dwa sposoby: <label for="identyfikator">opis pola</label> <input type="text" name="nazwa" value="wartość" id="identyfikator"> lub <label for="identyfikator">
3 <input type="text" name="nazwa" value="wartość" id="identyfikator"> Opis pola</label> Lista rozwijalna <select name="nazwa"> <option>tu wpisz pierwszą możliwość</option> <option>tu wpisz drugą możliwość</option> </select> Jeśli chcemy, aby w formularzu zostały przesłane inne wartości niż treść znaczników <option>...</option>, można wprowadzić dla tych znaczników dodatkowe atrybuty value. Atrybuty: multiple="multiple"- możliwość wyboru kilku opcji size="n" - ilości wierszy z odpowiedziami, które będą jednocześnie widoczne na ekranie disabled="disabled" zablokowanie listy selected="selected" - atrybut opcji domyślne zaznaczenie Grupy opcji możliwość grupowania na liście kilku opcji za pomocą znacznika <optgroup> </optgroup> <select name="nazwa"> <optgroup label="nazwa grupy"> <option>tu wpisz pierwszą możliwość</option> <option>tu wpisz drugą możliwość</option> </optgroup> </select>
4 Obszar tekstowy <textarea name="nazwa" cols="x" rows="y">tu wpisz tekst, który pojawi się domyślnie</textarea> Wartość atrybutu name zostanie wysłana wraz z formularzem. Atrybuty cols i rows określają ilość kolumn i wierszy tekstu, które mogą się jednocześnie zmieścić w polu, bez jego przewijania. Atrybuty: readonly="readonly" pole tylko do odczytu disabled="disabled" pole zablokowane wrap="off" brak zawijania wierszy wrap="physical" zawijanie tekstu i na stronie i w formularzu wrap="virtual" zawijanie tekstu tylko na stronie Dynamiczne blokowanie pól formularza Dane pole może zostać odblokowane dopiero po akcji użytkownika, np. po zaznaczeniu pola wyboru, np. <input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled =!this.checked"> <input type="text" name="nazwa2" disabled="disabled"> Wyjaśnienie: Pole typu checkbox (pole wyboru) ma podpięte zdarzenie onclick, czyli w momencie kliknięcia (zaznaczenia/odznaczenia pola) zmienia się wartość własności disabled elementu o nazwie nazwa2 z tego samego formularza. Dynamiczne ukrywanie pól formularza W podobny sposób jak poprzednio można oprogramować ukrycie/pokazanie pewnych pól po akcji użytkownika, np. <input type="checkbox" name="nazwa" value="wartość" onclick="document.getelementbyid('identyfikator').style.displa y = this.checked? 'block' : 'none';"/> <div id="identyfikator" style="display: none"> <input type="text" name="nazwa2"> <input type="text" name="nazwa3"> </div>
5 Wyjaśnienie: Pola o nazwach nazwa2 i nazwa3 są początkowo ukryte, ponieważ element nadrzędny czyli div ma nadany styl display:none. Po kliknięciu, z dokumentu wybrany zostaje element o identyfikatorze identyfikator ( document.getelementbyid('identyfikator') ), dla którego zmieniamy wartość własności display (.style.display). Operator this.checked? 'block' : 'none' mówi, że jeśli pole jest zaznaczone (checked) to zmieniamy display na block (div widoczny), a w przeciwnym razie ustawiamy display na none (div ukryty). Wysłanie formularza Wysyłanie realizujemy za pomocą pola input typu submit: <input type="submit" value="wartość"> value atrybut opcjonalny, przechowuje informację o napisie na przycisku Na przycisku oprócz tekstu może pojawić się również obrazek: <input type="image" src="ścieżka dostępu" alt="informacja "> Przycisk czyszczenia danych Przycisk czyszczenia wszystkich pól formularza: <input type="reset" value="wartość"> Dodatkowo przed wyczyszczeniem można spytać użytkownika czy jest pewien: <form action=" " method=" " onreset="if (!confirm('czy na pewno chcesz wyczyścić cały formularz?')) return false">...</form> Wyjaśnienie: Na próbę czyszczenia danych formularza generowane jest zdarzenie onreset. Dokonujemy wtedy sprawdzenia czy w oknie z komunikatem (confirm) użytkownik dał odpowiedź twierdzącą czy przeczącą i ewentualnie wycofujemy się z czyszczenia (return false).
6 Przycisk <button type="rodzaj">treść przycisku</button> Dostępne rodzaje przycisku: submit - przycisk wysłania formularza reset - przycisk wyczyszczenia danych button - zwykły przycisk (domyślnie) Element button pozwala wprowadzić do przycisku grafikę, tabelkę i inne elementy. Po kliknięciu przycisku nie nastąpi żadna akcja. Aby to zmienić, należy przechwycić wygenerowane zdarzenie onclick. Grupowanie pól Do grupowania pól w formularzu służy znacznik <fieldset> Pola formularza </fieldset> Spowoduje to otoczenie grupy ramką. W ramce może pojawić się nagłówek (tytuł) tej grupy: <fieldset> <legend>tytuł</legend> Pola formularza </fieldset> Legenda może być wyrównana do lewej strony, prawej lub do środka. Należy nadać jej atrybut align z wartością left, right lub center.
Przykładowy formularz 7
8 <form action="mailto:ala@o2.pl?subject=ankieta" method="post" enctype="text/plain" onreset="if (!confirm('czy na pewno chcesz wyczyścić cały formularz?')) return false;"> <fieldset> <legend>dane osobowe</legend> <label for="imie">imię</label><input type="text" id="imie" name="imie"><br> <label for="nazwisko">nazwisko</label><input type="text" id="nazwisko" name="nazwisko"><br> <p>płeć:</p> <label><input type="radio" name="plec" value="kobieta">kobieta</label> <label><input type="radio" name="plec" value="mezczyzna">mężczyzna</label> <p>wiek:</p> <label><input type="radio" name="wiek" value="mniej niz 20">mniej niż 20</label><br> <label><input type="radio" name="wiek" value="20-39">20-39</label><br> <label><input type="radio" name="wiek" value="40-59">40-59</label><br> <label><input type="radio" name="wiek" value="60 lub wiecej">60 lub więcej</label> </fieldset> <div> <p>hobby:</p> <label><input type="checkbox" name="hobby" value="film">film</label><br> <label><input type="checkbox" name="hobby" value="muzyka">muzyka</label><br>
9 <label><input type="checkbox" name="hobby" value="ksiazki">książki</label><br> <label><input type="checkbox" name="hobby" value="sport">sport</label><br> <label><input type="checkbox" name="hobby" value="inne" onclick="document.getelementbyid('inne').style.display = this.checked?'block':'none';">inne (podaj jakie):</label> <input type="text" id="inne" name="inne"> <p>wykształcenie:</p> <select name="wyksztalcenie"> <option value="podstawowe">podstawowe</option> <option value="srednie" selected="selected">średnie</option> <option value="wyzsze niepelne">wyższe niepełne</option> <option value="wyzsze">wyższe</option> <option value="inne">inne</option> </select> <p>uwagi:</p> <textarea name="uwagi" cols="60" rows="5">wpisz swoje uwagi</textarea><br> <input type="submit" value="wyślij formularz"> <input type="reset" value="wyczyść dane"> </div> </form>
10 Atrybut formularza enctype="text/plain" powoduje, że wszystkie formularze będą przysyłane w formie odszyfrowanej, dla powyższego przykładu jest to: imie=ala nazwisko=makota plec=kobieta wiek=mniej niz 20 hobby=muzyka wyksztalcenie=wyzsze niepelne uwagi=brak ĆWICZENIE 1 Przetestuj działanie powyższego formularza. ĆWICZENIE 2 Przygotuj swój formularz wykorzystując poznane elementy. Dołącz do strony arkusz stylów formatujący odpowiednio formularz i jego pola (szerokość i wysokość pól, kolory, czcionki itp.).