Kurs HTML & CSS (by foock) .: www.foock.vel.pl :: :: do menu :. .: poprzednia lekcja :: nastêpna lekcja :. Formularze Formularze s± najciekawszym elementem HTML-a, wymagaj± jednak dobrej znajomo¶ci HTML-a. Stosowane s± one coraz czê¶ciej - dziêki nim mo¿emy np. uk³adaæ ankiety. W czasie tej lekcji omówione zostan± formularze wysy³ane za pomoc± poczty e-mail - jest to sposób najprostszy i najpopularniejszy. elementy Na pocz±tek omówiê poszczególne elementy formularza. Oto one: jednowierszowe pole tekstowe: <input type="text" name="pole_tekstowe" size="20" value="jaki¶ tekst"> Tak to wygl±da: Opcja value="jaki¶ tekst" powoduje wpisanie tekstu domy¶lnie w pole, size="20" ustali d³ugo¶æ pola na 20 znaków, a name="pole_tekstowe" nazywa nam to pole. pole has³a: <input type="password" name="pole_hasla" size="20" value="007"> Tak to wygl±da: Jak widaæ zamiast liter mamy gwiazdki - pole to s³u¿y do przechowywania hase³. ukryte pole: <input type="hidden" name="ukryte_pole" size="20" value="bla"> Tak to wygl±da: Jak pewnie zauwa¿y³e¶, tego pola nie widaæ. S³u¿y ono do przechowywania wa¿nych danych, których internauta nie mo¿e zmieniæ. przewijane pole tekstowe: <textarea name="przewijane_pole" cols="20" rows="10">bla, bla</textarea> Tak to wygl±da: bla, bla Pojawi³y siê tu dwie nowe (stare) opcje: cols="20" i rows="20". Pierwsza z nich ustala wysoko¶æ, a druga szeroko¶æ pola. menu rozwijane: <select name="menu_rozwijane" size="1"> <option value="1">jeden</option> <option value="2">dwa</option> <option value="3">trzy</option> </select> Tak to wygl±da: jeden dwa trzy W powy¿szym menu bêd± trzy mo¿liwo¶ci wyboru, maj±ce warto¶ci w postaci liczb dodatnich. Wielko¶æ menu wynosi 1, tzn. ca³y czas widzimy tylko jedno pole. Mo¿emy to zmieniæ odpowiednio zwiêkszaj±c warto¶æ parametru size. pole wyboru: <input type="checkbox" name="pole_pierwsze" value="1">bla<br> <input type="checkbox" name="pole_drugie" checked value="2">zaznaczone bla<br> <input type="checkbox" name="pole_trzecie" value="3">i jeszcze raz bla<br> Tak to wygl±da: bla, bla zaznaczone bla, bla i jeszcze raz bla, bla Otrzymali¶my kwadratowe pola. Je¶li klikniemy na jedno z nich, zaznaczymy je, powtórne klikniêcie powoduje odznaczenie. Za pomoc± dopisku checked domy¶lnie je zaznaczamy (patrz drugie w przyk³adzie). przycisk radiowy: <input type="radio" name="przyciski" checked value="1">zaznaczone co¶<br> <input type="radio" name="przyciski" value="2">inne co¶<br> <input type="radio" name="przyciski" value="3">jeszcze inne co¶<br> Tak to wygl±da: zaznaczone co¶ inne co¶ jeszcze inne co¶ Te przyciski s± okr±g³e. Poza tym od poprzedniego elementu ró¿ni± siê tym, ¿e w grupie przycisków nazwanych tak samo, tylko jeden z nich mo¿e zostaæ zaznaczony. przyciski: <button type="submit" name="przycisk_do_wys³ania"> <font size="2" face="Courier New"><b>Jaki¶ przycisk</b></font> </button> Tak to wygl±da: Jaki¶ przycisk Przyciski stosuje siê do wysy³ania (type="submit") lub resetowania (type="reset") formularzy. Pomiêdzy tagami <button></button> Mo¿emy wstawiæ ró¿ne elmenty: sformatowany tekst, tabele, rysunki itp. sposoby przesy³ania danych Aby stworzyæ formularz potrzebujemy co najmniej dwóch elementów: jakiej¶ warto¶ci i przycisku, dziêki któremu dane zostan± przes³ane. Ca³o¶æ zamykamy znacznikami <form></form>. Ale musimy do daæ kilka parametrów informuj±cych przegl±darkê o sposobie przesy³ania danych: method="post" - sposób obs³ugi formularza: post - wys³anie danych, get - pobranie danych; action="plik" - plik, który obs³u¿y formularz; do ich obs³ugi u¿ywa siê jêzyków skryptowych (JavaScript, PHP, CGI lub ASP), my natomiast bêdziemy go wysy³aæ poczt± (action="mailto:[e-mail]"); enctype="text/plain" - dziêki temu parametrowi odbiorca dostanie formularz rozkodowany, w formie czytelnego listu. Oto przyk³adowy formularz, zamkniêty w gustownym obramowaniu: <fieldset><legend align="center"><b>Ankieta</b></legend> <form method="post" action="mailto:[e-mail]?subject=formularz" enctype="text/plain"> Jak siê nazywasz? <br> <input type="text" name="imie" size="20"><p> Jakiej jeste¶ p³ci? <br> <select name="plec" size="1"> <option>-- wybierz --</option> <option value="kobieta">kobieta</option> <option value="mezczyzna">mê¿czyzna</option> </select><p> Ile masz lat? <br> <input type="radio" name="wiek" value="do10">do 10<br> <input type="radio" name="wiek" checked value="do20">11-20<br> <input type="radio" name="wiek" value="do30">21-30<br> <input type="radio" name="wiek" value="do40">31-40<br> <input type="radio" name="wiek" value="do50">41-50<br> <input type="radio" name="wiek" value="od50">50 lub wiêcej<br> <p> <button type="submit" name="wysylamy"><b>WY¦LIJ</b></button> <button type="reset" name="resetujemy"><b>ZRESETUJ</b></button> </form></fieldset> Ankieta Jak siê nazywasz? Jakiej jeste¶ p³ci? -- wybierz -- kobieta mê¿czyzna Ile masz lat? do 10 11-20 21-30 31-40 41-50 50 lub wiêcej WY¦LIJ ZRESETUJ Je¶li chcesz, mo¿esz mi go wys³aæ :) .: poprzednia lekcja :: nastêpna lekcja :. :: do menu :. .: www.foock.vel.pl ::