Formularze w dokumentach HTML

Formularze w dokumentach HTML służą do przekazywania danych do skryptów wykonywanych po stronie przeglądarki bądź też serwera. Na pewno spotkałeś się już z formularzami na stronach, np. podczas wypełniania ankiety, w celu utworzenia konta pocztowego lub wpisu do księgi gości.

Podstawowym znacznikiem w formularzach jest <form>. Oto jego atrybuty:

• method - metoda wysyłania informacji do skryptu wykonywanego po stronie serwera; możliwe wartości: post (nie widoczne w pasku adresu w przeglądarce; zalecana) i get (widoczna w pasku adresu w przeglądarce)
• action - adres url do skryptu, który ma wykorzystywać dane z formularza; tylko przy skryptach wykonywanych po stronie serwera
• name - nazwa formularza; potrzebne przy skryptach wykonywanych po stronie klienta

Pod formularzem w Internet Explorer zostaje jedna linia wolna, którą można usunąć tylko i wyłącznie stosując sztuczkę:

<table cellpadding="0" cellspacing="0" border="0"> <form method="post" action="skrypt.php"> <tr><td><!--tu wstawiasz inne znaczniki formularza --></td></tr> </form> </table>

Kolejnym znacznikiem formularzowym jest <input>. Tag ten wstawia nowy obiekt do formularza. Jest on znacznikiem pustym, czyli nie trzeba go zamykać. Oto jego atrybuty:

• type - typ obiektu; poszczególne typy są omówione niżej
• value - domyślna wartość obiektu
• size - ilość znaków, które można wpisać do obiektu; tylko przy type równym text lub password
• maxlength - maksymalna ilość znaków, które można wpisać do obiektu; tylko przy type równym text lub password
• checked - zaznacza obiekt (tylko przy type równym checkbox lub radio); atrybut bez wartości
• src - źródło obrazka wyświetlanego, gdy type jest równy image

Obiekty utworzone znacznikiem <input> mogą być następujących typów:
text - jest to domyślny typ obiektu, służy do przechowywania zwykłych danych tekstowych, np.:

<input type="text" name="tekst" value="domyślnie" size="10" maxlength="20">

password - służy do przechowywania danych tekstowych, ale zabezpieczonych przed oglądaniem, zamiast poszczególnych liter pokazuje gwiazdki (w XP kropki), np.:

<input type="password" name="haslo" size="10" maxlegth="20">

submit - przycisk wysyłający dane na serwer, jeżeli nie wpisze się wartości atrybutu value, to w IE pokaże się "Prześlij kwerendę", np.:

<input type="submit" value="   OK   ">

reset - przycisk po naciśnięciu którego usuwają się wszystkie informacje z formularza, np.:

<input type="reset" value="Kasuj">

radio - obiekt radiowy, aby można było zmieniać wartości danej wysyłanej przez ten obiekt należy wprowadzić kilka obiektów o tej samej nazwie z inną wartością atrybutu value, przykład użycia:

<input type="radio" name="wyb" value="1" checked> wybierz 1<br> <input type="radio" name="wyb" value="2"> wybierz 2<br> <input type="radio" name="wyb" value="3"> wybierz 3<br> <input type="radio" name="wyb" value="4"> wybierz 4

checkbox - pole wielokrotnego wyboru, można dowolną ilość obiektów tego typu o tej samej nazwie, a można nie zaznaczać żadnego, skrypty wykonywane po stronie serwera widzą zmienną tylko jeżeli pole jest zaznaczone, np.:

<input type="checkbox" name="wyb" value="1">wybierz 1<br> <input type="checkbox" name="wyb" value="2">wybierz 2<br> <input type="checkbox" name="wyb" value="3">wybierz 3<br> <input type="checkbox" name="wyb" value="4">wybierz 4

image - obiekt wyświetlający obrazek o adresie równym wartości atrybutu src, może on być używany jako mapa odsyłaczy wykorzystywana przez skrypt server-side (wykonywany po stronie serwera) lub jako element submit, np.:

<input type="image" src="obrazek">

hidden - obiekt przechowujący ukrytą informację, powinien mieć dwa atrybuty: name i value, np.:

<input type="hidden" name="zmienna" value="wartosc">

Kolejnymi znacznikami formularzowym są <select> i <option>. Oto atrybuty pierwszego znacznika:

• multiple - wskazuje czy możliwe jest dokonywanie wielokrotnego wyboru; brak wartości
• size - powoduje wyświetlanie listy pozycji jako listy przewijanej, a liczba wyświetlanych pozycji jest równa wartości tego atrybutu
• name - nazwa listy

A to atrybuty drugiego znacznika:

• value - wartość danej pozycji w liście
• selected - wskazuje czy pozycja w liście jest zaznaczona

Oto przykłady użycia tych znaczników:

<select name="nazwa"> <option value="1" selected> wartość 1</option> <option value="2" > wartość 2</option> <option value="3" > wartość 3</option> <option value="4" > wartość 4</option> </select>

 

<select name="nazwa2" size="4" multiple> <option value="1"> wartość 1</option> <option value="2"> wartość 2</option> <option value="3"> wartość 3</option> <option value="4"> wartość 4</option> <option value="5"> wartość 5</option> <option value="6"> wartość 6</option> </select>

Ostatnim znacznikiem obsługującym formularze jest <textarea>. Służy on do przechowywania bardzo długich danych tekstowych, mających często kilka linii. Oto jego atrybuty:

• name - nazwa elementu formularza
• rows - ilość linii w polu tekstowym
• cols - ilość liter w jednej linii

Przykład użycia tego znacznika:

<textarea name="tekst" rows="10" cols="80"></textarea>

Na zakończenie tego rozdziału postanowiłem podać źródło prawdziwego formularza używanego na naszej stronie:

<div align="center"> <table width="700" border="0" cellpadding="2" cellspacing="1"> <form method="post" action="oper.php" name="forma"> <input type="hidden" name="krok" value="1"> <input type="hidden" name="lista" value="1"> <tr><td width="700" align="left" colspan="2"><span class="big">Nowa wiadomoć</span></td> </tr> <tr><td width="150" bgcolor="#505246" align="right" height="50"><span class="bbig">Login:</span><br><span class="malya">KSYWKA lub IMIĘ i NAZWISKO</td><td width="550" bgcolor="#676A5A" align="left" height="50">&nbsp;&nbsp;<input class="login" type="text" size="15" name="ksywa"></td> </tr> <tr><td width="150" bgcolor="#505246" align="right" height="50"><span class="bbig">Hasło:</span><br><span class="malya">TYLKO ZAREJSTROWANI</td><td width="550" bgcolor="#676A5A" align="left" height="50">&nbsp;&nbsp;<input class="login" type="password" size="10" name="haslo">&nbsp;&nbsp;<a href="index.php=5" class="b"><b>Zarejestruj się!</b></a></td> </tr> <tr><td width="150" bgcolor="#505246" align="right" height="50"><span class="bbig">Temat:</span><br><span class="malya">TEMAT TWOJEJ WIADOMOŚCI</td><td width="550" bgcolor="#676A5A" align="left" height="50">&nbsp;&nbsp;<input class="login" type="text" size="50" name="temat"></td> </tr> <tr><td width="150" bgcolor="#505246" align="right" height="200" valign="top"><br><span class="bbig">Treć:</span><br><span class="malya">TREŚĆ TWOJEJ WIADOMOŚCI</td><td width="550" bgcolor="#676A5A" align="left" height="200">&nbsp;&nbsp;<textarea cols="60" rows="12" name="tresc"></textarea></td> </tr> <tr><td width="700" align="center" height="30" colspan="2" bgcolor="#676A5A"><input type="image" class="img" src="img/dodaj.gif">&nbsp;&nbsp;<a href="javascript:czysc();"><img src="img/czysc.gif" border="0"></a></td> </tr> </form> </table></div>