Wydawnictwo Helion ul. Chopina 6, Gliwice, POLAND telefon: (32) , fax: (32) w.10 mail:

Transkrypt

1 Po prostu HTML 4 (wydanie II) Autor: Elizabeth Castro T³umaczenie: Maciej Gdula, Andrzej Kierzkowski, Wojciech Oliwa, Piotr Rajca, Zofia Sobociñska ISBN: X Format: B5, 408 stron Data wydania: 07/2000 Cena ksi¹ ki: z³ Wydawnictwo Helion ul. Chopina 6, Gliwice, POLAND telefon: (32) , fax: (32) w.10 mail: helion@helion.com.pl Ogromne zainteresowanie czytelników, pochlebne recenzje, a tak e nowe mo liwoœci jêzyka HTML sk³oni³y autorkê do uzupe³nienia wiadomoœci zawartych w poprzednim wydaniu tej ksi¹ ki. "Po prostu HTML 4. Wydanie II" zosta³a opracowana z myœl¹ o Czytelniku, który chcia³by nauczyæ siê jêzyka HTML. Jest ona doskona³ym przewodnikiem dla pocz¹tkuj¹cych. Przystêpny, bogato ilustrowany wyk³ad poprowadzi Ciê, krok po kroku, przez wszystkie zagadnienia jêzyka HTML 4, prezentuj¹c kolejne i wskazuj¹c w³aœciwe czynnoœci. Zobacz przyk³adowy rozdzia³ Spis treœci Je eli znasz tê ksi¹ kê oceñ j¹ Aktualny cennik ksi¹ ek em Ksi¹ ki i "3D" Online Informacje o nowoœciach em Zamów najnowszy katalog Zobacz opis do³¹czonego pliku Helion 2000

2 Formularze 11 Formularze &RXPR*OLZLDMIRUPXODU]H? ƒ Uzyskanie informacji zwrotnej. ƒ 6WZRU]HQLHNVL*NLJRFL ƒ Przeprowadzanie ankiet. ƒ 3RGJOGDQLHNWRZL]\WXMH7ZRMHVWURQ\ ƒ 6DPRREVáXJ ƒ,zlhohzlfhm Jak do tej pory wszystko, czego QDXF]\áHVL o HTML-XSR]ZDODáR&LMHG\QLHQDSU]HND]\wanie LQIRUPDFML7ZRLPJRFLRP:W\PUR]G]LDOH QDXF]\V]VLGHILQLRZDüIRUPXODU]HNWyUH XPR*OLZLDMprzekazywanie informacji Tobie. 1DIRUPXODU]HVNáDGDMVLGZLH]DVDGQLF]H F]FLVWUXNWXUDF]\WH*SRZáRND]DZLHUDMFD pola, etykiety, przyciski widziane przez X*\WNRZQLNDQDVWURQLHLPLHMP\QDG]LHM Z\SHáQLDQHRUD]REVáXJXMF\VNU\SWNWyU\ RGELHUDLQIRUPDFMLSU]HWZDU]DMGRSRVWDFL NWyUPR*HV]RGF]\WDüOXESU]HOLF]\ü Definiowanie struktuu\irupxodu]dmhvw]xsháqlh proste i podobne do tworzenia innych fragmentów VWURQ\:::0R*HV]ZVWDZLDüSRODWHNVWRZH SRODKDVHáSU]\FLVNLUDGLRZHSRODZ\ERUXPHQX EORNLWHNVWXDQDZHWDNW\ZQHLOXVWUDFMH.D*GHPX HOHPHQWRZLQDGDMHV]QD]ZNWyUDVSHáQLDURO identyfikatora danych w trakcie obróbki..rqvwuxrzdqlhirupxodu]\]rvwdárrpyzlrqh na stronach U]HWZDU]DQLHGDQ\FK]IRUPXODU]DMHVWWURFK EDUG]LHMVNRPSOLNRZDQH3RGVWDZRZHQDU]G]LH, F]\OLVNU\SW\&*,]D]Z\F]DMSLVDQHVZM]\NX PerOOXELQQ\PM]\NXSURJUDPRZDQLD&RSUDZGD SURJUDPRZDQLHZM]\NX3HUOEDQDZHW Z\MDQLHQLHMDNZ\NRU]\VWDüLVWQLHMFHVNU\SW\ Z\NUDF]DSR]DUDP\WHMNVL*NLW\PQLHPQLHM RSLVDáDPNLONDJRWRZ\FKVNU\SWyZ&*,NWyUH SRPRJ&L]DF]üSDWU]VWURQD). -HOLZV]\VWNRWRZ\GDMH&LVL]QLHFKFDMFHOXE Twój dostawca Internetu nie zezwala na wykorzy- VW\ZDQLHVNU\SWyZ&*,WRPR*HV]]GHF\GRZDü VLQDSU]HV\áDQLHGDQ\FK]IRUPXODU]\SRF]W HOHNWURQLF]QSDWU]VWURQDVNRU]\VWDü z publicznych serweuyzreváxjxmf\fkformularze opisanych na stronie 197. Formularze 189

3 5R]G]LDá Skrypty CGI Skrypty CGI 1D]ZDVNU\SW&*,PR*HVSUDZLü*HRVRE\QLH EGFHSURJUDPLVWDPLV]\ENRRGáR*WNVL*N L]DSRPQRIRUPXODU]DFK$OH]DF]HNDMFLH Co to jest CGI? Co tomhvwvnu\sw"1lhmhvwwrd* WDNWUXGQHMDNVLZ\GDMH3RSLHUZV]HVáRZR VNU\SW]DVWSXMHVáRZRSURJUDPWDNLMDN Microsoft Word czy Adobe Photoshop. 2F]\ZLFLHVNU\SW\NWyUHZ\NRU]\VWXMHV] do REUyENLGDQ\FK]IRUPXODU]\VRQLHER prostsze od komercyjq\fkdsolndfmlnrv]wxmf\fk VHWNLGRODUyZOHF]IXQNFMRQXMZSRGREQ\ sposób. CGI, skrót od Common Gateway Interface Uniwersalny Interfejs Komunikacyjny, MHVWSRSURVWXXMHGQROLFRQPHWRGSU]HV\áDQLD LQIRUPDFMLSRPLGzy serwerem, a skryptem. 3RGVXPRZXMFVNU\SW&*,WRSURJUDP ]D]Z\F]DMQDSLVDQ\ZM]\NXSURJUDPRZDQLD QD]\ZDMF\PVL3HUOSRUR]XPLHZDMF\VL z serwerem w standardowy (CGI) sposób. -]\NLHPQDMF]FLHMX*\ZDQ\PGRSLVDQLD skryptów CGI jest Perl. DziejeVLWDNJG\*MHVW WRM]\NáDWZ\GRSU]HQLHVLHQLD]MHGQDM SODWIRUP\QDGUXJGRVNRQDOHQDGDMHVL do SU]HNV]WDáFDQLDGDQ\FKZNRPXQLNDW\ ]UR]XPLDáHGODF]áRZLHNDDRSUyF]WHJRPD UHSXWDFMRGORWRZHJRM]\NDSURJUDPRZDQLD QDSUDZG3URJUDPLFLNRU]\VWDMF\]3HUO XZLHOELDMSU]HFKZDODüVLMDNWRZMHGQHM OLQLMFHNRGXLWR]DSLVDQHMQDW\VLFUy*Q\FK VSRVREyZPRJ]URELüQLHPDOZV]\VWNR -HGQDNGRWZRU]HQLDVNU\SWyZ&*,PR*HV] X*\ZDüWDN*HLQQ\FKM]\NyZSURJUDPRZDQLD C++, tcl, VisulaBasic-a, a ndzhwm]\nd AppletScript i skryptów wsadowych systemu MS-'26-HOL]QDF]NWyU\NROZLHN]W\FK M]\NyZWRX*\MZáDQLHMHJRMHOLQLH skorzystaj z Perla-a. 3URJUDPLFLNRU]\VWDMF\]M]\ND3HUOPDM MHGQZVSDQLDáFHFK OXELVLG]LHOLüVZRLPL progudpdpl:v]g]lhqd:::pr*hv] ]QDOH(üW\VLFHJRWRZ\FKSURJUDPyZ QDSLVDQ\FKZW\PM]\NXSDWU]VWURQD :LHOH]QLFKMHVWGRVWSQ\FK]DGDUPRLQQH niestety nie. Rys WRSURVW\IRUPXODU]]DZLHUDMF\ dwa pola tekstowe, jeden zestaw przycisków UDGLRZ\FKLSU]\FLVNGRVWDUF]DMF\6áRZD Nazwisko, , Komputer, Macintosh i Windows to etykiety. Nie PDMRQHZSá\ZX na GDQHNWyUH]ELHUDQHVZLQQ\VSRVyE Rys $RWRNRG(UyGáRZ\IRUPXODU]D z U\VXQNX1DUD]LH]ZUyüXZDJ na atrybuty NAME i 9$/8(QDXF]\V]VL GHILQLRZDüHOHPHQW\IRUPXODU]DZGDOV]HMF]FL WHJRUR]G]LDáX=DXZD*SRSLHUZV]H*H ZV]\VWNLHHOHPHQW\PDMDWU\EXW1$0( a nie wszystkie atrybut VALUE. Atrybut VALUE GHILQLXMHGDQHSU]HV\áDQH]WHJRHlementu do serwera. 1LHNWyUHHOHPHQW\XPR*OLZLDM X*\WNRZQLNRZLZSLVDQLHGRZROQ\FKZDUWRFL (np. pola tekstowe), a inne nie (np. przyciski radiowe(ohphqw\irupxodu]dnwyuhvl ]D]QDF]DOXEZ\ELHUDPXV]PLHü]GHILQLRZDQ ZDUWRü]D SRPRFDWU\EXWX9$/8( 190

4 Formularze Rys LHG\X*\WNRZQLNZSURZDG]LLQIRUPDFM do pól tekstowych i wybierze przycisk radiowy, pary nazwa-zduwrüvjrwrzh.olnqlflh SU]\FLVNXGRVWDUF]DMFHJRQD]ZDQ\WX:\OLM LQIRUPDFMHSU]HOHSDU\QD]ZD-ZDUWRüGRVNU\SWX CGI na serwerze Etykieta Nazwa :DUWRü Nazwisko nazwisko_goscia Cookie _goscia Cookie@ cookwood.com Komputer komputer Mac - submit :\OLMLQIRUPDFMH Rys WRELH*FHSDU\QD]ZD-ZDUWRFL które ]RVWDQSU]HVáDQHSRQDFLQLFLXSU]\FLVNX GRVWDUF]DMFHJRU\VXQHN1LHSRP\Oetykiety z QD]ZHOHPHQWX=DXZD*WH**H ZDUWRüSLHUZV]\FK GZyFKSyORGSRZLDGDWHPXFRZSLVDáX*\WNRZQLN :DUWRüSU]\FLVNXradiowego Mac (nazwa), nie Macintosh (etykieta) ]RVWDáDXVWDORQDprzeze mnie, autora strony WWW (patrz rysunek 11.2), DX*\WNRZQLNMHG\QLHNOLNQáSU]\FLVN QLFQLHZSLV\ZDá) cgi.script.url?nazwisko_goscia= Cookie& _goscia= Cookie@cookwood.com&komputer= 0DF VXEPLW :\OLMLQIRUPDFMH Rys HOLZ\NRU]\VWXMHV]PHWRG*(7 to GDQH]RVWDQSU]HVáDQHGRVNU\SWX&*, w SRZ\*V]\VSRVyE=DXZD**HáDFXFKMHVW oddzielony od adresu URL pytajnikiem (?). 1DVWSQLHND*GDQD]ZDMHVWSRáF]RQD]HVZRM ZDUWRFL]QDNLHPUyZQRFL $ZNRFX znak & rozdziela pary nazwa-zduwrü &RURELVNU\SW\&*,".D*G\HOHPHQW7ZRMHJRIRUPXODU]DSRVLDGD QD]Z i ZDUWRü1D]ZDLGHQW\ILNXMHSU]HV\áDQH GDQH0R*HWRE\üQSnazwisko_goscia. :DUWRFLVGDQHSRZLHG]P\Castro), które PRJE\üZSLV\ZDQHSU]H]&LHELHSURMHNWDQWD VWURQ\:::OXESU]H]7ZRMHJRJRFLD (rysunki 11.1 i 11.2*G\X*\WNRZQLNNOLNQLH SU]\FLVNGRVWDUF]DMF\OXEDNW\ZQLOXVWUDFM patrz strona 196), do VHUZHUDSU]HV\áDQHVSDU\ nazwa-zduwründ*ghjrhlementu formularza PR*HWRE\üQSQD]ZLVNRBJRVFLD &DVWUR Skrypt CGI odbiera wszystkie pary nazwa- ZDUWRüLVHJUHJXMHMHWDNE\F]áRZLHNOXEED]D GDQ\FKPyJáMHRGF]\WDüi ]UR]XPLHü Skrypt CGI ma zazwyczaj dwie funkcje. 3LHUZV]]QLFKMHVWSREUDQLe wszystkich par nazwa-zduwrülur]g]lhohqlhlfkqdqlh]doh*qh HOHPHQW\'UXJIXQNFMMHVWZ\NRQDQLHQDW\FK LQIRUPDFMDFKMDNLFKRSHUDFML Z\ZLHWOHQLH LFKSRPQR*HQLHZDUWRFLSyOSU]HVáDQLH ZLDGRPRFL]SRWZLHUG]HQLHPSRF]W HOHNWURQLF]Q]DSLVDQLH w pliku na serwerze lub ]URELHQLHF]HJRNROZLHNLQQHJR,VWQLHMVNU\SW\ &*,WZRU]FHNVL*NLJRFLREVáXJXMFH SRJDZGNLOLF]QLNLJU\Z\V\áDMFHNDUWNL SRF]WRZHZ\ELHUDMFHORVRZRREUD]NL ZVSyáSUDFXMFH]ED]DPLGDQ\FKRUD]ZLHOH wiele innych. BezpiHF]HVWZR =DQLPVLUR]HPRFMRQXMHV]SRZLQLHQHVL GRZLHG]LHü*HVNU\SW\&*,PRJÄXGRVWSQLü serwer intruzom. To z tego powodu wielu dostawców Internetu nie zezwala swoim X*\WNRZQLNRPQDNRU]\VWDQLH]HVNU\SWyZ&*, -HOLMHVWWH*WDNZ7ZRLPSU]\SDGNX to DOWHUQDW\ZPR*HE\üZ\NRU]\VWDQLHVNU\SWX z wyspecjalizowanego serwera, tak jak to RSLVDáDPQDVWURQLH =DMH*HOL7ZyMGRVWDZFD,QWHUQHWX]H]ZDOD na XUXFKDPLDQLHVNU\SWyZ&*,WRSRZLQLHQH SRF]\WDüQDWHPDW]DEH]SLHF]H0R*HV]]DF]ü od strony paulp/cgi-security/de\grzlhg]lhüvlmdnlh VNU\SW\&*,PRJRND]DüVL]GUDGOLZH Skrypty CGI 191

5 5R]G]LDá Zdobywanie skryptów Zdobywanie skryptów -HOL7ZyMGRVWDZFD,QWHUQHWX]JDG]DVLE\ NRU]\VWDá]HVNU\SWyZ&*,QDVWSQ\PNURNLHP SRZLQQRE\ü]GRE\FLHVNU\SWX0R*HV] UR]SRF]üGRVNRSLRZDQLDVNU\SWyZ GRáF]RQ\FKGRWHMNVL*NLSDWU]VWURQD 0R*HV]WDN*HQDSLVDüZáDVQ\VNU\SWOXE ]DDGDSWRZDüGRVZRLFKSRWU]HEMHGHQ]W\VLF\ VNU\SWyZGRVWSQ\FKQD:::1LHNWyUH]QLFK VGRVWSQH]DGDUPRLQQHZ\PDJDMMDNLHM IRUP\Z\QDJURG]HQLDSURJUDPLVW\&KRüQD :::LVWQLHMVHWNLPLHMVFJG]LHPR*QD ]QDOH(üVNU\SW\&*,MDRVRELFLHSUHIHUXM cztery z nich. CGI Resource Index CGI Resource Index publikowany przez Matt s Scripts Archive, Inc. SDWU]SRQL*HM]DZLHUD VHWNLSRáF]HGRSU]HUy*Q\FKVNU\SWyZ&*, napisanych w Perl-XGRNXPHQWDFMLNVL*HN DUW\NXáyZSUDVRZ\FKSURJUDPLVWyZRUD] propoz\fmlsudf\:lwu\qw]qdmg]lhv]srg adresem (patrz rys. 11.6). Matt s Script Archive :LWU\QD]QDQDWDN*HSRGQD]Z06$MHVW jednym z najbardziej popularnych magazynów VNU\SWyZQD:::0R*HV]M]QDOH(üSRG adresem :LWU\QDWDVWZRU]RQD]RVWDáDSU]H]QDVWRODWND Matta Wrighta i zawiera wiele przydatnych i EH]SáDWQLHGRVWSQ\FKVNU\SWyZ&*, napisanych w Perl-u. Extropia.com,QQ\PVáDZQ\P(UyGáHPVNU\SWyZ&*, napisanych w Perl-u jest witryna Extropia.com, VWZRU]RQDSU]H]6HOHQ6RORUD]*XQWKHUD %LU]QLHNVD&KRüRVWDWQLRZLWU\QDWDQDELHUD EDUG]LHMNRPHUF\MQHJRZ\JOGXWRMHGQDN ZFL*PR*QDQDQLHM]QDOH(üZLHOHFLHNDZ\FK VNU\SWyZGRZ\NRU]\VWDQLD$XWRU]\RIHUXM EH]SáDWQSRPRFSU]\NRU]\VWDQLX]QLFK :LWU\QW]QDMG]LHV]SRGDGUHVHP Rys Na witrynie CGI Resource Index znajdziesz ponad 1600 gotowych do skopiowania i uruchomienia skryptów CGI. Niektóre ]QLFKV GDUPRZHLQQHQLH:LWU\QW]QDMG]LHV]SRG adresem WebScript Archive &KRüWDZLWU\QDDXWRUVWZD'DUU\OD%XUJGRUID QLHZWSOLZLHQLHMHVWQDMEDUG]LHMSRSXODUQD ani QLHXGRVWSQLDQDMZLNV]HMLORFLVNU\SWów, WREH]ZWSLHQLD]DZLHUDQDMOHSLHMXGRNXPHQWRZDQ LQDMáDWZLHMV]GRLPSOHPHQWDFMLJUXSVNU\SWyZ CGI napisanych w Perl-X=QDMG]LHV]MSRG adresem

6 Formularze Rys WRMHGQD]ZHUVMLQLHVá\FKDQLH LVWRWQHJRVNU\SWXVáX*FHJRGRSrzetwarzania GDQ\FKSU]HV\áDQ\FK]IRUPXODU]D&Dá\NRGVNU\SWX MHVWLVWRWQ\PR*H]DZ\MWNLHPRVWDWQLFKF]WHUHFK OLQLMHNNWyUHVáX*GRZ\ZLHWODQLDQDGHVáDQ\FK informacji w postaci prostej strony WWW Wykorzystanie skryptów GRáF]RQ\FKGRWHMNVL*NL 'RQLQLHMV]HMNVL*NLGRáF]\áDPJUXSNLONX EDUG]RSURVW\FKVNU\SWyZ&*,NWyUHPR*HV] Z\NRU]\VWDüGRREVáXJLGDQ\FKSU]HV\áDQ\FK SU]H]X*\WNRZQLNyZGR7ZRMHMZLWU\Q\ 6NU\SW\WH]RVWDá\]DSURMHNWRZDQHSRWRDE\ pomóc&l]ur]xplhümdng]ldádmirupxodu]h i XPR*OLZLü&LNRU]\VWDQLH]QLFK$E\FKRü WURFKVNRU]\VWDü]W\FKVNU\SWyZEG]LHV]VL PXVLDáWURFK]QDüQD3HUOXOXEPLHüRFKRW do SR]QDQLDWHJRM]\ND-HOLEDUG]LHM&L interesuje uzyskanie danych z formularzy, to SUDZGRSRGREQLHSRZLQLHQHVNRU]\VWDü z Z\V\áDQLDGDQ\FKSRF]WHOHNWURQLF]Q (patrz strona 196). $E\Z\NRU]\VWDüVNU\SW\GRáF]RQH GRWHMNVL*NL 1. Z serwera FTP Wydawnictwa HELION skopiuj plik ftp://ftp.helion.com/ksiazki/ pphtml4cgi.zip, a nastsqlhur]sdnxmjr 2. Przeczytaj i wykonaj instrukcje zamieszczone QDQDVWSQHMVWURQLHZVHNFMLSW Ä3U]\JRWRZ\ZDQLHVNU\SWyZGRX*\FLD 3. :IRUPXODU]XVWZyU]RGZRáDQLHGRVNU\SWX (umieszczonego na serwerze), tak jak RSLVDáDPWRZNURNXQDVWURQLH 4. PoF]HNDMQDX*\WNRZQLNyZNWyU]\RGZLHG] 7ZZLWU\QZ\SHáQLIRUPXODU]LNOLNQ SU]\FLVNÄ:\OLM 9 Rada :\NRU]\VWDQLHVNU\SWyZ]WHMNVL*NL ƒ-holfkfldáe\]gre\üzlfhmvnu\swyz o ZLNV]\FKPR*OLZRFLDFKWR]DMU]\M na VWURQVHNFMDSWÄ=GRE\ZDQLH skryptów

7 5R]G]LDá Przygotowanie skryptu do X*\FLD 1LHZD*QHF]\QDSLVDáHVNU\SWVDP czy Z\NRU]\VWDV]QDSLVDQ\SU]H]NRJRLQQHJR PXVLV]Z\NRQDüNLONDF]\QQRFL aby SU]\JRWRZDüJRGRX*\FLD Adaptowanie cudzych skryptów -HOLFKFHV]NRU]\VWDü]HVNU\SWX3HUOFLJQLWHJR QS]6LHFLPXVLV]RWZRU]\üJRL]REDF]\ü MDNLH]PLHQQHRUD]FLH*NLGRVWSXVZQLP wykorzystywane. PewnLHEG]LHV]PXVLDá QLHNWyUH]QLFK]PLHQLüE\GRVWRVRZDüMH do Twojego przypadku. 3U]\JRWRZDQLHVNU\SWXGRX*\FLD Przeniesienie skryptów na serwer 1DVWSQ\PNURNLHPMHVWSU]HNRSLRZDQLH skryptu na serwer, za]z\f]dm]dsrprf programu ftp np. Fetch lub WS_FTP (patrz VWURQD1LHNWyUHVHUZHU\Z\PDJDM by ZV]\VWNLHVNU\SW\]QDMGRZDá\VLZNDWDORJX cgi-elq,qqhxgrvwsqldmnd*ghpx X*\WNRZQLNRZLRVRELVWHNDWDORJLFJL-bin. -HV]F]HLQQHSR]ZDODMQDSU]HFKRZywanie VNU\SWyZ&*,JG]LHW\ONR]HFKFHV]MHOLW\ONR nadasz im w celu identyfikacji odpowiednie UR]V]HU]HQLH=DS\WDMVZRMHJRGRVWDZF,QWHUQHWX. 3UDZDGRVWSX -HOL7ZRMDVWURQD]QDMGXMHVLQDVHUZHU]H 8QL[RZ\PWREG]LHV]PXVLDáZ\NRU]\VWDü SURJUDPFKPRGDE\VNU\SW\&*,XGRVWSQLü i ]D]QDF]\üMDNRZ\NRQ\ZDOQH%G]LHV]PyJá ]DPLDVWWHJRX*\üIXQNFMLSURJUDPXIWSRLOHM XGRVWSQLDQSWS-FTP, CuteFtp). 'RáF]HQLHGRVZRMHJRIRUPXODU]D 7DNZLFPDV]VZyMVNU\SW&*,QDVHUZHUze JRWRZ\GRX*\FLD2VWDWQLU]HF]NWyUD SR]RVWDáDGR]URELHQLDWRGRáF]HQLHGRIRUPXODU]D (patrz strona 195)

8 Formularze Rys D*G\IRUPXODU]VNáDGDVL]WU]HFK F]FL]QDF]QLND)250HOHPHQWyZIRUPXODU]D ZNWyU\FKX*\WNRZQLF\SRGDMOXEZ\ELHUDM LQIRUPDFMHRUD]SU]\FLVNXSU]HV\áDMFHJRNWyU\ XPR*OLZLDSU]HND]DQLHSRGDQ\FKZIRUPXODU]X LQIRUPDFMLQDVHUZHUPR*HWRWH*E\üDNW\ZQ\ obrazek) Rys )RUPXODU]VWDQRZLGRVNRQDá\VSRVyE QDSREUDQLHLQIRUPDFMLRGX*\WNRZQLNyZ Tworzenie formularza.d*g\irupxodu]vnádgdvl]wu]hfkzd*q\fk elementów: znacznika FORM ]DZLHUDMFHJR DGUHV85/VNU\SWX&*,VáX*FHJRGRREVáXJL SU]HV\áDQ\FKGDQ\FK elementów formularza (takich jak pola tekstowe i listy) oraz z przycisku SRZRGXMFHJRSU]HVáDQLHGDQ\FKSRGDQ\FK w formularzu. $E\VWZRU]\üIRUPXODU] 1. Wpisz <FORM METHOD=POST. 2. Wpisz ACTION="skrypt.url", gdzie skrypt.urlmhvwsrár*hqlhpvnu\swx X*\ZDQHJRGRREVáXJLIRUPXODU]D na serwerze (patrz strony ). 3. 6WZyU]]DZDUWRüIRUPXODU]D]JRGQLH z informacjami podanymi na stronach LH]DSRPQLMXPLHFLüQDIRUPXODU]X przycisku SUBMIT (patrz strona 208) lub aktywnego obrazka (strona 212). 4. =DNRF]IRUPXODU]ZSLVXMF</FORM>. $E\X*\WNRZQLNPyJáZ\VáDüGDQHSRGDQH ZIRUPXODU]XEG]LHV]PXVLDáXPLHFLüQD QLPEG(WRSU]\FLVNX68%0,7MHOL formularz zawiera pola, przycisku lub inne HOHPHQW\NWyUHX*\WNRZQLNPR*HZ\SHáQLü), EG(DNW\ZQ\REUD]HN:LFHMLQIRUPDFML na temat przycisków SUBMIT znajdziesz na VWURQLHSRGKDVáHPÄPrzycisk GRVWDUF]DMF\ :LFHMLQIRUPDFMLQDWHPDW aktywnych obrazków znajdziesz na stronie 212 Aktywne obrazki. W celu bardziej precyzyjnego rozmieszczenia HOHPHQWyZIRUPXODU]DPR*HV]Z\NRU]\VWDü WDEHOH:LFHMLQIRUPDFMLQDLFKWHPDW znajdziesz w rozdziale 9. 'RSU]HVáDQLDGDQ\FK]IRUPXODU]DPR*HV] X*\üWDN*HPHWRG\*(7. Jednak metoda ta RJUDQLF]DZLHONRüLQIRUPDFMLMDNLHPR*QD SU]HVáDüGODWHJRSROHFDáDE\PVWRVRZDQLH metody POST. Tworzenie formularza 195

9 5R]G]LDá 3U]HV\áDQLHGDQ\FK 3U]HV\áDQLHGDQ\FK SRF]W HOHNWURQLF]Q -HOLQLHPDV]RFKRW\QDEDZLHQLHVLVNU\SWDPL &*,LPR*HV]SRJRG]LüVL]RWU]\P\ZDQLHP GDQ\FKNWyUHQLHEGLGHDOQLHVIRUPDWRZDQH OXEZVWSQLH przetworzone przez skrypt), to PR*HV]VNRU]\VWDü]PR*OLZRFLSU]HV\áDQLD GDQ\FK]IRUPXODU]DSRF]WHOHNWURQLF]QSRG wskazany adres. $E\SU]HVáDüGDQHSRF]W HOHNWURQLF]Q 1. Wpisz <FORM METHOD=POST. 2. Wpisz ENCTYPE="text/plain", aby SU]HV\áDQHGDQHE\á\RGpowiednio zakodowane. 3. Wpisz com.pl", gdzie jest Twoim adresem poczty elektronicznej, pod NWyU\PDME\üSU]HV\áDQHGDQH 4. Wpisz >. 5. 6WZyU]]DZDUWRüIRUPXODU]DWDNMDNWR RSLVDáDPQDVWURQDFK Wpisz </FORM>. 7DWHFKQLNDPR*HE\üZ\NRU]\VW\ZDQD MHG\QLHZSU]HJOGDUNDFKZZHUVMDFK lub Sy(QLHMV]\FK.LHG\X*\WNRZQLNNOLNQLHSU]\FLVN68%0,7, WR]RVWDQLHZ\ZLHWORQ\NRPXQLNDW RVWU]HJDMF\*HLFKDGUHVH-PDLOEG]LH SU]HVáDQ\ZUD]]GDQ\PLRUD]*e dane nie EGZ*DGHQVSRVyE]DV]\IURZDQH Aby GDQH]RVWDá\SU]HVáDQHX*\WNRZQLF\ PXV]NOLNQüSU]\FLVN2. :LFHMLQIRUPDFMLQDWHPDWPRG\ILNDFML WHPDWXZLDGRPRFL]QDMG]LHV]QDVWURQLH, ZVHNFML]DW\WXáRZDQHMÄ6SU\WQHSRáF]HQLD do poczty. ZawaUWRüSROD2GZLDGRPRFL]DOH*\ od LQIRUPDFMLMDNLHX*\WNRZQLNSRGDáZH ZáDFLZRFLDFKSU]HJOGDUNL,QIRUPDFMDWD PR*HQLHE\üSUDZG]LZD Rys HGQ]PHWRGRPLQLFLDSUREOHPyZ ]ZL]DQ\FK]Z\NRU]\VW\ZDQLHPVNU\SWyZ&*, MHVWSU]HV\áDQLHGDQ\FK]IRUPXODU]DSRF]W HOHNWURQLF]Q Rys )RUPXODU]NWyU\]RVWDQLHSU]HVáDQ\ SRF]WHOHNWURQLF]QZ\JOGDGRNáDGQLHWDNVDPR, MDNIRUPXODU]HREVáXJLZDQHSU]H]VNU\SW\&*, Rys 'DQH]RVWDM]DSLVDQHZWUHFL ZLDGRPRFLSRF]W\HOHNWURQLF]QHM=DXZD**H GRP\OQDOLQLDWHPDWX]DOH*\RGSU]HJOGDUNL X*\ZDQHMSU]H]X*\WNRZQLNDZW\PSU]\SDGNX E\áWR1HWVFDSHRQD]ZLHNRGRZHM0R]LOOD W SROX2GSRZLQLHQE\üSRGDQ\DGUHVSRF]W\ elektronicznej nadawcy. W polu Do zostanie wpisany adres, który poddáhz]qdf]qlnx)

10 Formularze Rys Oto domowa strona Response-O-Matic ( Jest to jeden z lepszych VHUZLVyZREVáXJXMF\FKIRUPXODU]HMDNLHZLG]LDáDP Rys DSRF]WHN5HVSRQVH-O-Matic zada NLONDS\WDDQDVWSQLHVWZRUzy szablon pokazany na rysunku Rys Zachowaj ten szablon na twardym G\VNXL]PRG\ILNXMMHOLWREG]LHSRWU]HEQH (nie zmieniaj ukrytych pól!) Wykorzystanie serwisów REVáXJXMF\FKIRUPXODU]H.ROHMQRSFMGODRVyENWyUHQLHFKFOXEQLH mrjvnru]\vwdü]hvnu\swyz&*,vvhuzlv\ REVáXJXMFH,VWQLHMHNLONDWDNLFKILUPNWyUH WZRU]IRUPXODU]HXPR*OLZLDMX*\WNRZQLNRP GRVWSGRVNU\SWyZ&*,NWyUHREVáXJXMWH IRUPXODU]HOXESU]HWZDU]DMMHEH]SRUHGQLR i SU]HV\áDMZ\QLNLSRF]WHOHNWURQLF]Q =DSáDW]DXVáXJLWHJRW\SXMHVW]D]Z\F]DM XPLHV]F]DQLHUy*QHJRW\SXUHNODP $E\VNRU]\VWDü ]VHUZLVXREVáXJXMFHJR 1. 2GV]XNDMVHUZLVREVáXJXMF\SU]\SRPRF\ wyszukiwarki Yahoo! lub AtlaVista. 2. 3U]HMU]\MLFKPLHMVFHE\]QDOH(üRGSRZLHG]L QDQDVWSXMFHS\WDQLD Kto tworzy formularze: Ty czy oni? &RPXVLV]]URELüGODQLFKZ]DPLDQ za REVáXJIRUPXODU]\" &]\]H]ZDODMQDZ\NRU]\VWDQLHIRUPXODU]\ w celach komercyjnych, czy tylko w prywatnych? 3. $E\XUXFKRPLüIRUPXODU]SRVWSXM]JRGQLH z ich instrukcjami. Przeczytaj poprzednie VWURQ\WHJRUR]G]LDáXDE\GRZLHG]LHüVL jak GHILQLRZDüHOHPHQW\IRUPXODU]D ƒ:lnv]rüvhuzlvyzreváxjxmf\fksu]hv\ád Ci zebrane informacje przez . ƒ6huzlv\reváxjxmfhuy*qlvl]qdf]qlh PLG]\VRE&KRüZ]DVDG]LHZV]\VWNLH z QLFKSU]HWZDU]DMIRUPXODU]HZ]DPLDQ za UHNODPWRMHGQDNQLHNWyUH]QLFKV EDUG]LHMQDWUWQHRGLQQ\FK'ODSU]\NáDGX witryna Respone-o-Matic wymaga Z\ZLHWOHQLHVZRMHMUHNODP\RUD]DGUHVX e-pdloz\áf]qlhqdvwurqlh z SRG]LNRZDQLDPLDQLHQDVDP\P IRUPXODU]X2]QDF]DWR*HEG]LHV]PyJá ]DSURMHNWRZDüIRUPXODU]WDNDE\GRNáDGQLH SDVRZDáGRUHV]W\ZLWU\Q\ 6HUZLV\REVáXJXMFHIRUPXODU]H 197

11 5R]G]LDá Pola tekstowe Pola tekstowe 3RODWHNVWRZH]DZLHUDMMHGQOLQLGRZROQHJR tekstu i ]D]Z\F]DMVZ\NRU]\VW\ZDQH do wpisania nazwiska, adresu i innych podobnych informacji. Zdefiniowanie pola tekstowego 1. -HOLFKFHV]WRRSLV]SROHWHNVWRZHSRGDMF jego etyklhwqs Nazwisko:. 2. Napisz <INPUT TYPE="text". 3. 1DGDMSROXQD]ZSLV]FNAME="nazwa", gdzie nazwawrwhnvwnwyu\eg]lhváx*\á do identyfikacji wprowadzonych przez X*\WNRZQLNGDQ\FKQDVHUZHU]HLZVNU\SFLH 4. -HOLFKFHV]WRZSLV]9$/8( ZDUWRü, gdzie ZDUWRüWRGDQHMDNLHEGSRF]WNRZR Z\ZLHWORQHZSROXLNWyUH]RVWDQSU]HVáDQH QDVHUZHUMHOLX*\WNRZQLNQLHZSLV]HZSROX niczego innego. 5. -H*HOLFKFHV]]GHILQLXMUR]PLDUSRODZSLVXMF SIZE="n"]DVWSnV]HURNRFLSRODZ\UD*RQ w znakach. 6. -HOLchcesz, wpisz MAXLENGTH="n", ]DVWSXMFnPDNV\PDOQOLF]E]QDNyZ NWyUHPR*QDZSURZDG]LüZSROX 7. Napisz znak >. 9 Rada Rys &KRüRNUHOHQLHZDUWRFLDWU\EXW 1$0(GODND*GHJRSRODWHNVWRZHJRMHVWQLH]EGQH, WRDWU\EXW9$/8(PR*QDVWRVRZDüZWHG\ gdy FKFHV]RNUHOLüGRP\OQZDUWRüSROD Rys RODWHNVWRZHPRJPLHüUy*QH ZLHONRFLDE\PR*QDZQLFKSRGDZDüUy*QHJR typu informacje ƒ1dzhwmholqlhzslv]hzsrox*dgqhm ZDUWRüRUD]MHOLQLH]RVWDQLHRNUHORQD ZDUWRüGRP\OQDSRODWRLWDNRGSRZLDGDMF\ mu atrybut1$0(]rvwdqlhsu]hvádq\ na VHUZHUZUD]]QLH]GHILQLRZDQSXVW ZDUWRFLDWU\EXWX9$/8( ƒ'rp\oqdzduwrüdwu\exwx6,=(z\qrvl 8*\WNRZQLNPR*HZSLVDüZLFHM ]QDNyZQL*PLHFLVLZUDPFHDOHQLH ZLFHMQL*RNUHORQRDWU\EXWHP MAXLENGHTH. Do wpisywania ZLNV]\FKLORFLWHNVWX]QDF]QLHOHSLHM QDGDMVLREV]DU\WHNVWRZHSDWU]VWURQD). Rys %DUG]RZD*QHMHVWQDGDZDQLHSRORP WHNVWRZ\PRSLVRZ\FKQD]ZX*\ZDMFGRWHJR DWU\EXWX1$0(']LNLWHPXEG]LHV]ZLHG]LDá, jakie informacje otrzymujesz 198

12 Formularze Rys $WU\EXW1$0(LGHQW\ILNXMHKDVáRJG\GDQH ]IRUPXODU]DVSU]HWZDU]DQHSU]H]VNU\SW&*, Rys *G\X*\WNRZQLNZSLVXMHKDVáR w IRUPXODU]XWRMHVWRQRÄ]DVáDQLDQH JZLD]GNDPL Rys Po przetworzeniu przez skrypt REVáXJXMF\GDQH]IRUPXODU]\]ZDUWRüSROD KDVáRSU]\ELHUDIRUPQRUPDOQHJRWHNVWX Pola WHJRW\SXQLH]DSHZQLDMZ\VRNLHJRSR]LRPX EH]SLHF]HVWZDSDWU]SU]HGRVWDWQLDUDGD 3ROHKDVáD -HG\QDUy*QLFSRPLG]\SROHPKDVáR a normalnym polem tekstowym, polega na tym, *H]QDNLZSLV\ZDQHZSROXKDVáRVZ\ZLHWODQH MDNRJZLD]GNL'DQHQLHVMHGQDNV]\IURZDQH SU]\SU]HV\áDQLXQDVHUZHU =GHILQLRZDQLHSRODKDVáR 1. -HOLFKFHV]RSLV]SROHKDVáR1DSU]\NáDG napisz :SURZDG(KDVáR. 2. Wpisz <INPUT TYPE="password". 3. Wpisz NAME= "nazwa", gdzie nazwaeg]lh WHNVWHPVáX*F\PGRLGHQW\ILNDFMLGDQ\FK na serwerze (i w skrypcie). 4. -HOLFKFHV]]GHILQLXMUR]PLDUSRODZSLVXMF SIZE="n"]DVWSXMFn szerokrflsrod Z\UD*RQZ]QDNDFK 5. -H*HOLFKFHV]QDSLV]MAXLENGTH="n", ]DVWSXMFnPDNV\PDOQOLF]E]QDNyZ NWyUHPR*QDZSURZDG]LüZW\PSROX 6. Napisz znak >. ƒ1dzhwmholzsroxkdvárqlh]rvwdq SRGDQH*DGQHLQIRUPDFMHWRLWDNMHJR nazwa zostanie pu]hvádqdqdvhuzhu]sxvw, QLH]GHILQLRZDQZDUWRFLDWU\EXWX9$/8(). ƒ7dn*hzw\pw\slhsyopr*qdrnuholülfk GRP\OQZDUWRüSDWU]SXQNWQDVWURQLH -HGQDNMHVWWRVSU]HF]QH]LGH i SU]H]QDF]HQLHPSyOKDVáD 3ROHKDVáD ƒjedynym rodzajem zabezpieczenia, jakie RIHUXMHSROHKDVáRWR]DEH]SLHF]HQLHSU]HG RVREDPLSRVWURQQ\PL]DJOGDMF\PLSU]H] UDPLX*\WNRZQLNRZLZSLVXMFHPXKDVáR 3RQLHZD*GDQHQLHVNRGRZDQHQDF]DV SU]HV\áDQLDGRVHUZHUDUHGQLR ]DDZDQVRZDQ\FUDFNHUPR*HEH] ZLNV]HJRZ\VLáNXRGF]\WDüKDVáR ƒ,qirupdfmhgrw\f]fh]deh]slhf]dqldvwurq KDVáHP]QDMG]LHV]QDVWURQLH 199

13 5R]G]LDá Bloki tekstu Obszary tekstowe &]DVDPLFKFHV]GDüX*\WNRZQLNRZLZLFHM PLHMVFDQDRGSRZLHG(:RGUy*QLHQLXRGSyO tekstowych (patrz strona 198) obszary tekstowe PRJ]DMPRZDüREV]DUFDáHMVWURQ\SR]DW\P LFKREMWRüPR*HVLSRZLNV]DüZPLDU wpisywania do nich nowych informacji. Pola WHJRW\SXGRVNRQDOHQDGDMVLGRZSLV\ZDQLD S\WDRUD]NRPHQWDU]\ Zdefiniowanie bloku tekstu 1. -HOLFKFHV]WRZSLV]WHNVWLQIRUPXMF\ o przeznaczeniu obszaru tekstowego. 2. Napisz <TEXTAREA. 3. :SLV]QD]ZSRODZ\ERUXNAME= "nazwa", gdzie nazwaeg]lhwhnvwhpváx*f\p do identyfikacji danych na serwerze (i w skrypcie). 4. -H*HOi chcesz, napisz ROWS="n", gdzie n RNUHODQDLOHZLHUV]\PDE\üZ\VRNLHSROH WHNVWX'RP\OQZDUWRFLV wiersze. 5. -HOLFKFHV]ZSLV]COLS="n", gdzie n jest V]HURNRFLSRODWHNVWXZ\UD*RQZ znakach. 'RP\OQZDUWRFLMHVW 40 znaków. 6. -HOLFKFHV] by w trakcie wprowadzania tekstu OLQLHE\á\DXWRPDW\F]QLHGRVWRVRZ\wane do marginesów napisz WRAP. 7. Napisz znak >. 8. (ZHQWXDOQLHZSURZDG(GRP\OQ\WHNVW W W\PWHNFLHQLHZROQR&LX*\ZDü jakichkolwiek znaczników HTML. 9. Wpisz </TEXTAREA>. ƒw przypadku obszarów tekstowych wykorzystanie atrybutu VALUE nie ma sensu. ƒ8*\wnrzqlnpr*hzeornxwhnvwrz\p ZSURZDG]LüGR]QDNyZ-HOLEG]LH WRSRWU]HEQHSRMDZLVLSDVNLSU]HZLMDQLD. Rys :]QDF]QLNX7(;7$5($QLHX*\ZD VLDWU\EXWX9$/8('RP\OZDUWRüREV]DUyZ WHNVWRZ\FKSRGDMHVLZSLVXMFMSRPLG]\ RWZLHUDMF\PL]DP\NDMF\P]QDF]QLNLHP TEXTAREA (tak jak pokazano na rysunku) Rys 'RP\OQ\WHNVWPR*QDXVXQü ZSURZDG]DMFQDMHJRPLHMVFHQRZ\ Rys Obszary tekstowe doskoqdohqdgdmvl GRZ\SLV\ZDQLDGáX*V]\FKNRPHQWDU]\LVXJHVWLL. =D]Z\F]DMVWRVXMHVLMHZNVL*NDFKJRFLRUD] biuletynach informacyjnych 200

14 Formularze Rys W przypadku przycisków opcji atrybut 1$0(SHáQLSRGZyMQURONRMDU]\RQGDQ\ SU]\FLVN]JUXSSU]\cisków oraz identyfikuje ZDUWRüSRMHMSU]HVáDQLXGRVNU\SWX.OXF]RZH ]QDF]HQLHPDDWU\EXW9$/8(JG\*ZSU]\SDGNX SU]\FLVNyZRSFMLX*\WNRZQLNQLHPDPR*OLZRFL SRGDQLDZDUWRFL Rys U]\FLVNLRSFMLWZRU]RQHVSU]\X*\FLX znaczników HTML. Natomiast ich etykiety (np. Ä.UyOHZVNL Ä0Dá*HVNL LWSSRGDZDQHV jako normalny tekst Rys =DXZD**HQDVHUZHUMHVWSU]HV\áDQD ZDUWRüDWU\EXWX9$/8(Ä.U DQLHWHNVW Z\ZLHWODQ\QDVWURQLHÄ.UyOHZVNL Przyciski opcji &]\SDPLWDV]VWDUHUDGLRVDPRFKRGRZH z GX*\PLF]DUQ\PLSODVWLNRZ\PLSU]\FLVNDPL" :FLVQáHMHGHQSU]\FLVNVáXFKDáHIDOGáXJLFK ZFLVQáHGUXJL VáXFKDáH8.)-u. Nigdy nie E\á\ZFLQLWHGZDSU]\FLVNLMHGQRF]Hnie. Przyciski radiowe (ang. radio buttons) na IRUPXODU]X]DFKRZXMVLLGHQW\F]QLH Definiowanie przycisków 1. -HOLFKFHV]WRRSLV]ZVHNFML)250JUXS SU]\FLVNyZUDGLRZ\FK1DSU]\NáDGQDSLV] :\ELHU]MHGQ]QDVWSXMF\FKPR*OLZRFL. 2. Wpisz <INPUT TYPE="radio". 3. Wpisz NAME="grupa". Grupa jest identyfikatorem danej grupy przycisków radiowych. Tylko jeden przycisk z grupy grupapr*he\üzgdqhmfkzlol]d]qdf]rq\ 4. 0XVLV]]GHILQLRZDüZDUWRüLQQGODND*GHJR przycisku w grupie grupa:slv]zlf VALUE="ZDUWRü", gdzie ZDUWRü to VáRZR VNUyWNLOND]QDNyZLWSNWyUH]RVWDQ SU]HVáDQHGRVHUZHUDMDNRGDQHJG\SU]\FLVN EG]LH]D]QDF]RQ\ 5. -H*HOLFKFHV]DE\SU]\FLVNE\áGRP\OQLH zaznaczony po odebraniu strony WWW przez X*\WNRZQLNDZSLV]CHECKED. 6. Napisz znak >. 7. WSURZDG(WHNVWNWyU\RSLV]HX*\WNRZQLkowi SU]\FLVNUDGLRZ\&]VWRMHVWWR VDPRVáRZR OXE]ZURWNWyUHZSLVDáHGOD9$/8(DOHQLH PXVLE\ü 8. Powtórz kroki od 2. do 7. dla wszystkich przycisków w grupie grupa_przycisków. 9 Rada ƒ0r*hv]su]\slvdüsu]\flvnrpradiowym NODZLV]HVNUyWX:LFHMLQIRUPDFML znajdziesz na stronie 201. Przyciski opcji 201

15 5R]G]LDá Pola wyboru Pola wyboru 3RGF]DVJG\SU]\FLVNLUDGLRZHSR]ZDODM X*\WNRZQLNRZLQDZ\EUDQLHW\ONRMHGQHMRSFML z kilku w grupie, to pola wyboru (ang. check boxesvrgvlhelhqlh]doh*qhlx*\wnrzqln PR*H]D]QDF]\üW\OHSyOZ\ERUXLOH]HFKFH Podobnie jak w przypadku przycisków UDGLRZ\FKWDNLQD]ZDSRODZ\ERUXVáX*\ do zebrania pól w grupy. Zdefiniowanie pól wyboru 1. W sekcji FORM dokumentu HTML ZSURZDG(WHNVWMHOLFKFHV]RSLVXMF\JUXS SyOZ\ERUX1DSU]\NáDGQDSLV]Wybierz ZV]\VWNLHRGSRZLDGDMFH&LPR*OLZRFL. 2. Wpisz <INPUT TYPE="checkbox". Uwaga QLHPDVSDFMLZVáRZLHcheckbox! 3. 1DGDMSROXQD]ZSLV]FNAME="nazwa", gdzie nazwa to identyfikator danej grupy pól wyboru. 4. =GHILQLXMZDUWRüGODND*GHJRSRODZ\ERUX ZSLVXMFVALUE="ZDUWRü". :DUWRüEG]LH SU]HVáDQDGRVHUZHUDW\ONRJG\SROH]RVWDQLH ]D]QDF]RQHSU]H]X*\WNRZQLNDDOERSU]H] Ciebie patrz krok H*HOLFKFHV]ZSLV]CHECKED, aby przycisk E\á]D]QDF]RQ\SRRGHEUDQLXVWURQ\::: SU]H]X*\WNRZQLND,7\MDNRSURMHNWDQWVWURQ\, LX*\WNRZQLNPR*HFLH]D]QDF]\üW\OHSyO ile chcecie. 6. Napisz znak >. 7. :SURZDG(WHNVWNWyU\RSLV]HX*\WNRZQLkowi SROHZ\ERUX&]VWRMHVWto ten sam tekst, kwyu\zslvdáhgod9$/8(, ale równie dobrze PR*HWRE\üLQQ\WHNVW 8. Powtórz kroki od 2. do 7. dla wszystkich pól wyboru. 9 Rada ƒ0r*hv]su]\slvdünd*ghpxsroxz\erux w JUXSLHZáDVQ\NODZLV]VNUyWX:LFHM informacji znajdziesz na stronie 201. Rys Tekst podawany jako opis pola nie PXVLRGSRZLDGDüMHJRZDUWRFLDQLQD]ZLH -HVWWRPR*OLZHG]LNLWHPX*HWHNVWLGHQW\ILNXMH SROHZSU]HJOGDUFHQDWRPLDVWZDUWRü atrybutu VALUE w skrypcie Rys *\WNRZQLNPR*H]D]QDF]\üW\OHSyO wyboru, ile ckfh:duwründ*ghjr]d]qdf]rqhjr SROD]RVWDQLHSU]HVáDQDGRVNU\SWXZUD]]QD]Z grupy pól Rys RQLHZD*X*\WNRZQLN]D]QDF]\áWU]\ SRODZ\ERUXQDVHUZHUSU]HV\áDQHVZV]\VWNLH WU]\ZDUWRFLZDUWRFL nie tekst widoczny na stronie przy polu).7hqvnu\swz\zlhwod ND*GHSROHRVREQR 202

16 Formularze Rys HQXWZRU]\VLSU]\X*\FLXGZyFK znaczników HTML SELECT oraz OPTION. :VSyOQ\GODZV]\VWNLFKRSFMLDWU\EXW1$0(RNUHOD VLZ]QDF]QLNX6(/(&7QDWRPLDVWSRV]F]HJyOQH atrybuty VALUE w znacznikach OPTION. Rys HOLZPHQXQLHRNUHOLV]DWU\EXWX 6,=(X*\WNRZQLNQLHEG]LHPyJáQLF]HJR]QLHJR Z\EUDü:PHQXGRP\OQLHZ\ELHUDQDMHVWSLHUZV]D RSFMDOXERSFMDZNWyUHMX*\WRDWU\EXWX6(/(&7(' (patrz krok 8.) Rys =DXZD**HQDVHUZHUMHVWSU]HV\áDQD ZDUWRüDWU\EXWX1$0(DQLHHW\NLHWDZLGRF]QD na stronie Menu 0HQXVGRVNRQDá\PQDU]G]LHPSR]ZDODMF\P na przedstawienie grupy opcji, z których X*\WNRZQLNPR*HZ\EUDüMHGQOXENLOND Zdefiniowanie menu 1. W sekcji FORM dokumentu HTML opisz, MHOLFKFHV]PHQX 2. Napisz <SELECT. 3. 1D]ZLMPHQXZSLVXMFNAME="nazwa". Gdy GDQHEGZ\V\áDQHGRVHUZHUDWRnazwa EG]LHLGHQW\ILNRZDüGDQHZ\EUDQHZPHQX 4. Wpisz SIZE="n", gdzie n to liczba pozycji menu, którhegzlgrf]qhsrrwzru]hqlx strony. 5. -H*HOLFKFHV]QDSLV]MULTIPLE, by XPR*OLZLüX*\WNRZQLNRZL]D]QDF]HQLH ZLFHMQL*MHGQHMSR]\FMLPHQX 6. Napisz znak >NRF]F\]QDF]QLN6(/(&7 7. Napisz <OPTION. 8. Napisz SELECTED,MHOLFKFHV]E\ pozycja E\áDGRP\OQLHZ\brana. 9. Wpisz VALUE="ZDUWRü", gdzie ZDUWRü identyfikuje dane otrzymywane przez serwer. 10. Napisz >. 11. :SURZDG(WHNVWNWyU\FKFHV]E\SRMDZLáVL w menu. 12. Powtórz kroki od 7. do 11. dla wszystkich pozycji menu. 13. Napisz </SELECT>. -HOLZNURNXGRGDV] atrybut SIZE, to PHQXEG]LHZ\JOGDáRUDF]HMMDNOLVWDLQLH EG]LHPLDáR*DGQHJRZ\EUDQHJRHOHPHQWX FK\ED*HX*\MHV]DWU\EXW6(/(&7(' -HOLZDUWRüDWU\EXW6,=(MHVWZLNV]D od LORFLRSFMLZPHQXWRX*\WNRZQLNPR*H XVXQü]D]QDF]HQLHZV]\VWNLFKRSFMLNOLNDMF QDSXVW\PREV]DU]HSRQL*HMQLFK Menu 203

17 5R]G]LDá Menu -H*HOLGHILQLXMHV]V]F]HJyOQLHGX*HPHQX z ZLHORPDSR]\FMDPLPR*HGREU]HE\áRE\ SRJUXSRZDüRSFMHZNDWHJRULHLXPLHFLüMH w podmenu. $E\]GHILQLRZDüPHQX ]DZLHUDMFHSRGPHQX: 1. 6WZyU]PHQXZ\NRU]\VWXMFPHWRG ze strony Przed pierwszym znacznikiem OPTION pierwszej grupy pozycji, które chcesz XPLHFLüZSRGPHQXZSLV]<OPTGROUP. 3. Wpisz LABEL="W\WXá">, gdzie W\WXá to QDJáyZHNSRGPHQX 4. Przed pierwszym znacznikiem OPTION pierwszej grupy pozycji, które chcesz XPLHFLüZSRGPHQXZSLV]<OPTGROUP. 5. Po ostatnim znaczniku OPTION w grupie wpisz </OPTGROUP>. 6. 3RZWyU]NURNLRGGRGODND*GHJR podmenu. ƒ7hruhw\f]qlhde\]ghilqlrzdüwhnvwphqx PR*HV]GR]QDF]QLND237,21GRGDü LABEL="nazwa_pozycji", ale mimo *HMHVWWRF]FLVWDQGDUGX+70/DQL ([SORUHUDQL1HWVFDSHQLHZ\NRU]\VWXMWHM LQIRUPDFMLZáDFLZLH-HOLQLHPDatrybutu /$%(/SU]HJOGDUNLDXWRPDW\cznie Z\NRU]\VWXMtekst wpisany za znacznikiem OPTIONWDNMDNRSLVDáDPZNURNX na stronie 203). ƒ3rgphqxfkrüqdoh*grrilfmdoqhm VSHF\ILNDFMLVWDQGDUGX+70/QLHV MHV]F]HREVáXJLZDQHDQLSU]H],QWHUQHW Explorera, ani przez Netscape a. Rys D*GHSRGPHQXPDW\WXáRNUHORQ\ atrybutem LABEL w znaczniku OPTGROUP, i kilka pozycji zdefiniowanych znacznikiem 237,21L]Z\Ná\PWHNVWHP 204

18 Formularze Rys $E\XPR*OLZLüX*\WNRZQLNRZL SU]HV\áDQLHSOLNyZWU]HEDVSHáQLüGZD]DVDGQLF]H ZDUXQNL3RSLHUZV]HX*\üPHWRG\3267 w znaczniku FORM. Po drxjlhqlh]dsrpqlhü o RNUHOHQLX(1&7<3(Z]QDF]QLNX,1387 Rys 'HILQLXMFSROHSU]HV\áXSOLNXWZRU]\V] ]DUyZQRSROHZNWyU\PX*\WNRZQLNPR*HZSURZDG]Lü FLH*NGRVWSXLQD]ZSOLNXMDNi przycisk 3U]HJOGDMWDNE\JRüPyJáZ\NRU]\VWDüokno dialogowe Otwórz) 8PR*OLZLHQLHX*\WNRZQLNRZL SU]HV\áDQLD plików -HOLLQIRUPDFMDNWyUFKFHV]]ELHUDü]DSRPRF IRUPXODU]\PDVNRPSOLNRZDQSRVWDüWRPR*H OHSLHMEG]LHE\X*\WNRZQLNSU]HV\áDáQD7ZyM serwerfdá\soln $E\]H]ZROLüX*\WNRZQLNRZL na SU]HVáDQLHSOLNX 1. Wpisz <FORM METHOD=POST ACTION="upload.cgi">, gdzie upload.cgi MHVWDGUHVHP85/VNU\SWX&*,VáX*FHJR do SU]HWZDU]DQLDSU]HV\áDQ\FKSOLNyZ :LNV]RüVNU\SWyZVáX*F\FK do przetwarzania danych z formularzy nie EG]LHGRWHJRFHOXZ\VWDUF]DMFD 2. Wpisz ENCTYPE="multipart/form-data". $WU\EXWWHQ]DSHZQL*HSOLN]RVWDQLH SU]HVáDQ\ZRGSRZLHGQLPIRUPDFLH 3. :SURZDG(RSLVGODSRODSU]HV\áXSOLNX tak DE\X*\WNRZQLNZLHG]LDáFR]QLP]URELü :SLV]FRZURdzaju Jaki plik chcesz SU]HVáDü" 4. Wpisz <INPUT TYPE="file"DE\VWZRU]\ü SROHSU]HV\áXSOLNXLSU]\FLVN3U]HJOGDM (Browse). 5. Napisz NAME="W\WXá", gdzie nazwa jest dla VHUZHUDLGHQW\ILNDWRUHPSU]HV\áDQHJRSOLNX. 6. -HOLFKFHV]ZSLV]SIZE="n", gdzie n to szerokrüz]qdndfksrodznwyu\pjrü ZSURZDG]DQD]ZLFLH*NGRVWSXGRSOLNX. 7. 1DSLV]NRF]F\]QDN>. 8. :]Z\F]DMQ\VSRVyEGRNRF]IRUPXODU] 9 Rada ƒ$wu\exw6,=(mhvwrsfmrqdoq\dohsrqlhzd* ZLNV]RüFLH*HNGRVWSXL QD]ZMHVWGRü GáXJDWRGREU]HMHVWZ\EUDüV]HURNRü F]\]QDNyZ'RP\OQLHMHVW ƒ'rreváxjlirupxodu]\xpr*olzldmf\fk SU]HND]\ZDQLHSOLNyZQLHPR*HV]X*\ZDü metody GET. ƒ6nu\sw\&*,váx*fhgrreváxjl SU]HND]\ZDQ\FKSOLNyZPR*HV]]QDOH(ü pod adresem 3U]HV\áDQLHSOLNyZ 205

19 5R]G]LDá Pola ukryte Kilka uwag o polach ukrytych )RUPXODU]H+70/SR]ZDODMQDWZRU]HQLHSyO VSHFMDOQHJRW\SXNWyUHFKRüQLHZLGRF]QHQD HNUDQLHVWDQRZLMHGQDNF]üIRUPXODU]D Na SLHUZV]\U]XWRNDPR*QDE\VG]Lü*HSROD takievfdánrzlflhqlhsu]\gdwqh MHOL X*\WNRZQLF\LFKQLHZLG]WRMDNPDMZQLFK SRGDüMDNLHGDQH"2GSRZLHG(MHVWSURVWD X*\WNRZQLF\QLHSRGDMLQIRUPDFMLZW\FK SRODFK=DPLDVWWHJRWR7\EG]LHV]]DSLV\ZDá w tych polach informacje uzyskane z formularzy, Z\SHáQLRQ\FKZF]HQLHMáF]FMH]LQIRUPDFMDPL SRGDQ\PLSU]H]X*\WNRZQLNDZELH*F\P formularzu. :\REUD(VRELH*HZSLHUZV]\PHWDSLH ]ELHUDQLDLQIRUPDFMLSURVLV]X*\WNRZQLND o podanie imienia i nazwiska, adresu oraz QXPHUXWHOHIRQX1DVWSQLHFKFHV]VNLHURZDü X*\WNRZQLNDQDVWURQ]DZLHUDMFNDWDORJ na NWyUHMPR*HZ\EUDüL]DPyZLüPHEOH =DPLDVW]PXV]DüX*\WNRZQLNyZGRSRQRZQHJR SRGDZDQLDLQIRUPDFMLSHUVRQDOQ\FKPR*HV] X*\üVNU\SWX&*,GRSREUDQLDW\FKLQIRUPDFML i wygenerowania w drugim formularzu pól XNU\W\FKZNWyU\FKLQIRUPDFMHWH]RVWDQ ]DSLVDQH']LNLWHPXNLHG\EG]LHV] SU]HWZDU]DáGUXJLIRUPXODU]WRZV]\VWNLHSROD LWH]DZLHUDMFH]DPyZLRQHSURGXNW\MDNLWH z informacjami personalnymi ]RVWDQ przetworzone. 1LHGDMVL]P\OLüVáRZXÄXNU\WH &KRüSROD WHJRW\SXIDNW\F]QLHQLHVZ\ZLHWODQH w SU]HJOGDUFHWRMHGQDNVWDQRZLLQWHJUDOQ F]üNRGXVWURQ\W\ONRG]LNLWHPXVNU\SW&*, PR*HSREUDüLFKZDUWRFLD]DWHPVWH* GRVNRQDOHZLGRF]QHGODRVyENWyUHZ\ZLHWO NRG(UyGáowy strony (patrz strona 314)

20 Formularze Rys )UDJPHQWNRGX+70/X*\WHJR do VWZRU]HQLDIRUPXODU]DSRND]XMHMDNPR*QD GHILQLRZDüSRODXNU\WH3LVDQLHWDNLHJRNRGXVDPHPX QLHPDZLNV]HJRVHQVXGODWHJRGRV\üQLHFKWQLH SU]HGVWDZLDPWHQSU]\NáDG3Rla ukryte powinny ERZLHPE\üJHQHURZDQHSU]H]VNU\SW\&*, Pola ukryte &KRüU]DGNRNLHG\VDPEG]LHV]GRGDZDáSROD XNU\WHGRNRGXIRUPXODU]DWRMHGQDNDE\SLVDü VNU\SW\&*,WZRU]FHWDNLHSRODEG]LHV] PXVLDáZLHG]LHüMDNWRURELü Zdefiniowanie elementu ukrytego 1. Wpisz <INPUT TYPE="hidden". 2. Napisz NAME="nazwa", gdzie nazwa to identyfikator (nazwa) przechowywanych danych. 3. Napisz VALUE="ZDUWRü"]DVWSXMF ZDUWRüLQIRUPDFMNWyUFKFHV]SU]HFKRZDü 4. Wpisz znak >. ƒ3rodxnu\whqlhvz\zlhwodqh w SU]HJOGDUFHGODWHJRWH*QLHPD znaczenia, w którym miejscu formularza ]RVWDQXPLHV]F]RQH:\VWDUF]\*H ]DSLV]HV]MHSRPLG]\RWZLHUDMF\P i ]DP\NDMF\P]QDF]QLNLHP)250 ƒ-holzduwrfldwu\exwyz1$0(rud] 9$/8(VNáDGDMVLZ\áF]QLH]H]QDNyZ alfanumeu\f]q\fkw]qqlh]dzlhudm RGVWSyZDQL*DGQ\FKLQQ\FK ÄPLHV]Q\FK ]QDNyZWRQLHPXVLV]LFK ]DSLV\ZDüw FXG]\VáRZDFK&XG]\VáRZ\ PDMVSHFMDOQHznaczenie w skryptach SLVDQ\FKZM]\NX3HUOLGODWHJRDE\ VWUDFLá\WR]QDF]HQLHQDOH*\MHSRSU]HG]Dü zndnlhprgzurwqhjrxnrqlnd=whjr Z]JOGXMHOLWRW\ONRPR*OLZHQLH SRZLQLHQH]DSLV\ZDüZDUWRFLSyO XNU\W\FKZFXG]\VáRZDFK Pola ukryte ƒ$e\vwzru]\ühohphqwgrvwduf]dmf\gdqh ZUD]]UHV]WIRUPXODU]DSRNOLNQLFLX przycisku Dostarcz, ale który jest widoczny dlax*\wnrzqlnd]ghilqlxm]z\ná\hohphqw i dodaj atrybut READONLY (patrz strona 218)

21 5R]G]LDá 3U]\FLVNGRVWDUF]DMF\ 3U]\FLVNGRVWDUF]DMF\ :V]\VWNLHZSLVDQHSU]H]X*\WNRZQLND LQIRUPDFMHQLHPDMGOD&LHELH*DGQHMZDUWRFL GRSyNLX*\WNRZQLNQLHZ\OHW\FKGDQ\FK do serwera. Dlatego zawsze na formularzu SRZLQLHQHXPLHFLüSU]\FLVN68%0,7 by X*\WNRZQLNPyJáGRVWDUF]\ü&LZSURZDG]RQH GDQH-HOLZIRUPXODU]XFKFHV]X*\üDNW\ZQ\FK obrazków, to przeczytaj informacje przedstawione na stronie 212). 6WZRU]HQLHSU]\FLVNXGRVWDUF]DMFHJR 1. Wpisz <INPUT TYPE="submit". 2. -HOLFKFHV]ZSLV]VALUE= "nazwaprzycisku", gdzie nazwaprzycisku to napis, który Z\ZLHWORQ\]RVWDQLHQDSU]\FLVNX 'RP\OQLHZ\ZLHWODQ\MHVWQDSLV Submit Query. 3. Wpisz znak >. -HOLQLHRNUHOLV]DWU\EXWX9$/8(SU]\FLVNX GRVWDUF]DMFHJRWR]RVWDQLHQDQLP Z\ZLHWORQ\QDSLVÄ6XEPLW4XHU\. Para nazwa-zduwrügodsu]\flvnx GRVWDUF]DMFHJRMHVWSU]HND]\ZDQDQDVHUZHU Z\áF]QLHZWHG\JG\RNUHOLáHDWU\EXW 1$0(SU]\FLVNX$]DWHPMHOLSRPLQLHV] WHQDWU\EXWQLHEG]LHV]PXVLDáSU]HMPRZDü VLGRGDWNRZ\PL]XSHáQLHQLHSRWU]HEQ\PL danymi. =GUXJLHMVWURQ\PR*HV]VWZRU]\üNLOND SU]\FLVNyZGRVWDUF]DMF\FKGODND*GHJR z nich zdefiniowdü]duyzqrdwu\exw1$0( MDNL9$/8(LQDSLVDüVNU\SW&*, UHDJXMF\QDWRNWyU\SU]\FLVN]RVWDá QDFLQLW\2F]\ZLFLHGRWHJRVDPHJRFHOX PR*QDZ\NRU]\VWDüSU]\FLVNLRSFMLFR EG]LH]QDF]QLHSURVWV]H Rys HOLZ]QDF]QLNXWZRU]F\PSU]\FLVk QLHSRGDV]ZDUWRFLDWU\EXWX1$0(WRSDUD nazwa-zduwrüqlh]rvwdqlhsu]hvádqdgrvnu\swx. 7RGREU\SRP\VáZ]LZV]\SRGXZDJIDNW *H LQIRUPDFMHRSU]\FLVNXGRVWDUF]DMF\PQLHV Ci wcale potrzebne Rys RGVWDZRZIXQNFMSU]\FLVNX dostarczamfhjrmhvwxuxfkrplhqlhvnu\swx &*,NWyU\SRVáX*\GRSU]HWZRU]HQLDZDUWRFL SR]RVWDá\FKSyOIRUPXODU]D0R*HV]RNUHOLü ]DZDUWRüSU]\FLVNXSRGDMFMZDWU\EXFLH 9$/8(6áRZDÄ=áy*]DPyZLHQLH VEH] ZWSLHQLD]QDF]QLHEDUG]LHM]UR]XPLDáHGOD X*\WNRZQLNyZQL*GRP\OQHÄ6XEPLW4XHU\ Rys HOLZSU]\FLVNXQLHRNUHORQR ZDUWRFLDWU\EXWX1$0(WRZDUWRüDWU\EXWX 9$/8(QLH]RVWDQLHSU]HVáDQDGRVNU\SWX Ale F]\NWRMHMGRF]HJRSRWU]HEXMH" 208

22 Formularze Rys HOLFKFHV]VWZRU]\üSU]\FLVN GRVWDUF]DMF\ZSRVWDFLREUD]NDEG]LHV]PXVLDá SRVáX*\üVL]QDF]QLNLHP%877211DMOHSV]\P UR]ZL]DQLHPMHVWRNUHOHQLHZWDNLPREUD]NX SU]H(URF]\VWHJRWáDL]DSLVDQLHJRZIRUPDFLH*,) WDNDE\áDGQLH]HVSROLáVL]SU]\FLVNLHP Rys Kod HTML konieczny do stworzenia SU]\FLVNXSU]HV\áDMFHJR]REUD]NLHPMHVWQLHFR bardziej skomplikowany, jednak daje tak rewelacyjne efekty +70/XGRVWSQLDNLONDQRZ\FK]QDF]QLNyZ XPR*OLZLDMF\FKWZRU]HQLHáDGQLHMV]\FK SU]\FLVNyZGRVWDUF]DMF\FK0R*HV]GRGDZDü LOXVWUDFMH]PLHQLDüF]FLRQNDQDZHWNRORUWáD $E\VWZRU]\üilustrowany przycisk GRVWDUF]DMF\ 1. Wpisz <BUTTON NAME="submit" VALUE="submit" TYPE="submit". 2. -HOLFKFHV]QDSLV]STYLE="font: 24pt Arial CE; background:yellow"oxefr SRGREQHJRDE\]PLHQLüZ\JOGWHNVWX przycisku (patrz strona 261). 3. Wpisz >. 4. :SURZDG(OXEQLHWHNVWNWyU\PDVL SRMDZLüQDSU]\FLVNXSROHZHMVWURQLHREUD]ND. 5. Wpisz <IMG SRC="obrazek.gif", gdzie obrazek.gifwrqd]zdloxvwudfmlnwyudpdvl SRMDZLüQDSU]\FLVNX 6. -HOLFKFHV]ZSURZDG(LQQHDWU\EXW\REUD]ND. 7. Wpisz >DE\]DNRF]\üGHILQLFMREUD]ND 8. :SURZDG(OXEQLHWHNVWNWyU\PDVL SRMDZLüQDSU]\FLVNXSRSUDZHMstronie obrazka. 9. Napisz </BUTTON>. ƒ=qdf]qln%87721pr*hv]wh* Z\NRU]\VWDüGRGHILQLRZDQLDSU]\FLVNyZ GRVWDUF]DMF\FKEH]LOXVWUDFML3RSURVWX SRPLNURNLRGGR ƒ:lfhmlqirupdfmlrwzru]hqlxsu]\flvnyz za SRPRFVNU\SWyZ]QDMG]LHV]QDVWURQLH 300. ƒobecnie tylko Explorer 4 dla Windows REVáXJXMHznacznik BUTTON, mimo *HMHVWRQF]FLVWDQGDUGX+70/ 3U]\FLVNGRVWDUF]DMF\ 209

23 5R]G]LDá Przycisk RESET Wymazywanie formularza *G\E\OXG]LH]DSLHUZV]\PUD]HPEH]EáGQLH Z\SHáQLDOLIRUPXODU]HWRQDRáyZNDFKQLH E\áRE\JXPHNDNODZLDWXUDQLH]DZLHUDáDE\ klawisza BACKSPACE. Przycisk RESET XPR*OLZLDX*\WNRZQLNRZLUR]SRF]FLH Z\SHáQLDQLDIRUPXODU]DRGQRZD 1DFLQLFLHWHJRSU]\FLVNXSRZRGXMH wyczyszczenie wszystkich elementów formularza LSU]\ZUyFHQLHLPZDUWRFLGRP\OQ\FK RNUHORQ\FKprzez Ciebie w definicji formularza. Stworzenie przycisku RESET 1. Wpisz <INPUT TYPE="reset". 2. -H*HOLFKFHV]ZSLV]VALUE= "nazwaprzycisku", gdzie nazwaprzycisku to QDSLVNWyU\]RVWDQLHZ\ZLHWORQ\ na SU]\FLVNX'RP\OQLHZ\ZLHWODQ\ jest napis Reset. 3. Wpisz znak >. 9 Rada Para nazwa-zduwrügodsu]\flvnx5(6(7 MHVWZ\V\áDQDGRVNU\SWXZ\áF]QLHZWHG\ JG\]RVWDQLH]GHILQLRZDQDZDUWRüDWU\EXWX 1$0('ODWHJRMHOLSRPLQLHV]WHQDWU\EXW WRZVNU\SFLHQLHEG]LHV]PXVLDá]DZUDFDü VRELHJáRZ\REVáXJ]XSHáQLHQLHSRWU]HEQ\FK danych (które w przypadku tego przycisku SU]\MPXM]D]Z\F]DMSRVWDüÄZ\F]\ü IRUPXODU] OXEF]HJRSRGREQHJR Rys U]\X*\FLXDWU\EXWX9$/8(PR*HV] RNUHOLüWHNVWNWyU\]RVWDQLHZ\ZLHWORQ\ na przycisku RESET Rys HOLX*\WNRZQLNNOLNQLHSU]\FLVN RESET, to we wszystkich polach formularza ]RVWDQZSLVDQHLFKZDUWRFLGRP\OQH 210

24 Formularze Rys USHZQLMVL*HQDGDáHDWU\EXWRZL 7<3(ZDUWRüUHVHW:SU]HFLZQ\PZ\SDGNX SU]\FLVNGRQLF]HJRVLQLHSU]\GD Rys R*HV]]LOXVWURZDüSU]\FLVNUHVHWXMF\, ]DSRPRF]QDF]QLND%87721LSHZQLHVWZRU]\V] ádgqlhmv]loxvwudfmrghpqlh HTML 4, jak do tej pory tylko w Explorerze, XPR*OLZLDGRGDZDQLHLOXVWUDFML]PLDQF]FLRQNL, DQDZHWNRORUXWáDSU]\FLVNXUHVHWXMFHJR $E\VWZRU]\ü ilustrowany przycisk resewxmf\: 1. Wpisz <BUTTON NAME="reset" VALUE="reset" TYPE="reset". 2. -HOLFKFHV]QDSLV]STYLE="font: 24pt Arial CE; background:yellow" OXEFRSRGREQHJRDE\]PLHQLüZ\JOG tekstu na przycisku (patrz strona 261). 3. Wpisz >. 4. :SURZDG(OXEQLHWHNVWNWyU\PDVL SRMDZLüQDSU]\FLVNXSROHZHMVWURQLH obrazka. 5. wpisz <IMG SRC="obrazek.gif", gdzie obrazek.gif WRQD]ZDLOXVWUDFMLNWyUDPDVL SRMDZLüQDSU]\FLVNX 6. -HOLFKFHV]ZSURZDG(LQQHDWU\EXW\REUD]ND. 7. Wpisz >DE\]DNRF]\üGHILQLFMREUD]ND 8. :SURZDG(OXEQLHWHNVWNWyU\PDVL SRMDZLüQDSU]\FLVNXSRSUDZHMVWURQLH obrazka. 9. Napisz </BUTTON>. ƒ=qdf]qln%87721pr*hv]wh* Z\NRU]\VWDüGRGHILQLRZDQLDSU]\FLVNyZ UHVHWXMF\FKEH]LOXVWUDFML3RSURVWXSRPL kroki od 5. do 7. ƒ:lfhmlqirupdfmlrwzru]hniu przycisków za SRPRFVNU\SWyZ]QDMG]LHV]QDVWURQLH 300. ƒobecnie tylko Explorer 4 dla Windows REVáXJXMH]QDF]QLN%87721PLPR *HMHVWRQF]FLVWDQGDUGX+70/ Przycisk RESET 211

25 5R]G]LDá Aktywne obrazki Aktywne obrazki,vwqlhmhpr*olzrüx*\fldreud]nd tak zwanego aktywnego obrazka MDNRSRáF]HQLD HOHPHQWXXPR*OLZLDMFHJRZSURZDG]HQLH GDQ\FKRUD]SU]\FLVNXGRVWDUF]DMFHJR3UyF] SU]HVáDQLDGDQ\FKZSLVDQ\FKZSR]RVWDá\FK SRODFKIRUPXODU]DNOLNQLFLHQDWDNLPREUD]NX SRZRGXMHWDN*HSU]HVáDQLHQDVHUZHU ZVSyáU]GQ\FKSRáR*HQLDZVND(QLNDP\V]NL RNUHORQ\FK]DSRPRFGZyFKSDUQD]ZD- ZDUWRü:SDUDFKW\FKQD]Z\JHQHURZDQHV SRSU]H]GRGDQLHZ\UD*HÄ[ RUD]Ä\ GR ZDUWRFLDWU\EXWX1$0(:DUWRFLW\FKSDU RNUHODMSR]LRPHLSLRQRZHSRáR*HQLH ZVND(QLNDP\V]\ZREV]DU]HREUD]ND Wykorzystanie aktywnego obrazka 1. Stwórz obrazek i zapisz go w formacie GIF lub JPEG (patrz strona 57). 2. Wpisz <INPUT TYPE="image". 3. Napisz SRC="adres_url_obrazka", gdzie adres_url_obrazka wskazuje, gdzie na serwerzh]qdmgxmhvlsoln]reud]nlhp 4. Wpisz NAME="nazwa"*G\X*\WNRZQLN NOLNQLHREUD]HNWRZVSyáU]GQHx i y kursora P\V]NL]RVWDQZSLVDQHGR zmiennej nazwa i Z\VáDQHGRVHUZHUD 5. Wpisz znak >NRF]F\GHILQLRZDQLH aktywnego obrazka. Rys LHPXVLV]XPLHV]F]DüSU]\FLVNX 68%0,7QDIRUPXODU]X]DZLHUDMF\PDNW\ZQ\ REUD]HNSRQLHZD*NOLNQLFLHREUD]NDWH*Z\V\áD dane do serwera Rys *G\X*\WNRZQLNNOLNQLHREUD]HN do VHUZHUD]RVWDQSU]HVáDQHELH*FH wspyáu]gqhnxuvrudp\v]nl ƒ*g\x*\wnrzqlnnolknie aktywny obrazek, wszystkie informacje wpisane do formularza VZ\V\áDQHGRVHUZHUD'ODWHJRGREU\P zwyczajem jest poinformowanie X*\WNRZQLNDMDNLNLHG\SRVáX*\üVL REUD]NLHPDWDN*HXPLHV]F]HQLHREUD]ND QDNRFXIRUPXODU]D*HE\X*\WNRZQLN najpieuzz\sháqlálqqhsrod, a GRSLHURSy(QLHM NOLNQáREUD]HNLZ\VáDáGDQH. Rys U]HJOGDUNDGRGDMHNURSNRUD][ GRQD]Z\DWU\EXWX1$0(LX*\ZDWHMQD]Z\ do LGHQW\ILNDFMLSR]LRPHMZVSyáU]GQHMPLHMVFD ZNWyU\PNOLNQáX*\WNRZQLN:SRGREQ\ VSRVyEREVáXJLZDQDMHVWZVSyáU]GQDSLRQRZD ƒ0r*hv]]dsurmhnwrzdüfdá\nzhvwlrqdulxv] ]DSRPRFREUD]NyZ.ROHMQHS\WDQLH DNW\ZQ\REUD]HNSRMDZLVLSRNOLNQLFLX i Z\VáDQLXGRVHUZHUDRGSRZLHG]L 212

26 Formularze na aktualne pytanie. Rys Znacznik FIELDSET doskonale QDGDMHVLGRSRG]LHOHQLDIRUPXODU]DQDPQLHMV]H EDUG]LHM]UR]XPLDáHSRUFMH Rys =HVWDZ\SyOVRWRF]RQHFLHQNOLQL a W\WXáSRMDZLDVLZSUDZ\POXEOHZ\PJyUQ\P rogu Organizacja elementów formularzy :SU]\SDGNX]ELHUDQLD]DSRPRFIRUPXODU]D ZLHOXLQIRUPDFMLPR*QDSRJUXSRZDüSRZL]DQH ]HVREHOHPHQW\DE\XáDWZLüZ\SHáQLDQLH IRUPXODU]D,PáDWZLHMMHVWX*\WNRZQLNRZL ]UR]XPLHü formularz, tym bardziej prawdopodobne MHVW*HZ\SHáQLJRSRSUDZQLH $E\SRJUXSRZDüHOHPHQW\ formularza: 1. Za znacznikiem FORM, ale przed definicjami HOHPHQWyZNWyUHFKFHV]ZáF]\üGR pierwszej grupy, napisz <FIELDSET>. 2. Wpisz <LEGEND. 3. -HOLFKFHV]ZSLV]ALIGN=kierunek, gdzie kierunek to top (góra), bottom Gyá left (w lewo) lub right (w prawo). 4. Wpisz >. 5. :SURZDG(WHNVWOHJHQG\W\WXáXJUXS\ 6. Napisz </LEGEND>. 7. =GHILQLXMHOHPHQW\IRUPXODU]DNWyUHPDM QDOH*HüGRSLHUZV]HMJUXS\:LFHMLQIRUPDFML znajdziesz na stronach ). 8. Napisz </FIELDSET>DE\]DNRF]\ü SLHUZV]JUXSHOHPHQWyZ 9. 3RZWyU]NURNLRGGRGODND*GHMJUXS\ elementów. ƒ1lhpxvlv]zslv\zdüohjhqg\$e\]qlhm ]UH]\JQRZDüSRPLNURNLRGGR 6. :ádflzlhzrjyohqlhpxvlv]juxsrzdü HOHPHQWyZQDIRUPXODU]X-HVWWRX*\WHF]QH QDU]G]LHDOH]XSHáQLHRSFMRQDOQH Organizacja elementów formularzy ƒ:wudnflhslvdqldnvl*nlw\onr,(god :LQGRZVUR]SR]QDZDáGHILQLFM]HVWDZyZ SyO,SRWUDILáZ\UyZQ\ZDüOHJHQGW\ONR do lewej lub prawej strony

27 5R]G]LDá Nadanie etykiety Formalne nadanie etykiety elementowi formularza -DN]DXZD*\áHLQIRUPDFMDRSLVXMFD Z\ZLHWODQDRERNHOHPHQWyZIRUPXODU]DE\áD do tej pory]z\ná\pwhnvwhp0rjáhqs ZSLVDüÄ,PL SU]HGSROHPZNWyU\P X*\WNRZQLNPDZSLVDüQD]ZLVNR+70/ XGRVWSQLDPHWRG]D]QDF]DQLDHW\NLHWG]LNL F]HPXPR*HV]IRUPDOQLHSRáF]\üHW\NLHW] RGSRZLHGQLPHOHPHQWHPRUD]Z\NRU]\VW\ZDü je w skryptach. Aby forpdoqlhqdgdühw\nlhw elementowi formularza: 1. Wpisz <LABEL. 2. Napisz FOR="nazwa", gdzie nazwa jest ZDUWRFLDWU\EXWX,'RGSRZLHGQLHJR elementu. 3. :SURZDG(]DZDUWRüHW\NLHW\ 4. Napisz </LABEL>. ƒ$e\zvnd]dü]qdf]qlnlhp/$%(/gdq\ element formularza, musis]]ghilqlrzdü atrybut ID w znaczniku tego elementu. Np.: <INPUT TYPE=text SIZE=15,' QD]ZLVNR!3RV]F]HJyá\]HUNQLM na VWURQ ƒ(w\nlhw\vf]fl+70/-a 4, ale w trakcie Z\GDZDQLDWHMNVL*NLDQL([SORUHUDQL 1HWVFDSHQLHREVáXJLZDá\LFK$V]F]Hrze PyZLFVSUDZLDMZLFHMNáRSRWyZQL*V WHJRZDUWH2VRELFLH]QLFKnie skorzystam. Rys àf]\v]hw\nlhw]hohphqwhp IRUPXODU]D]DSRPRFDWU\EXWyZ)25L,' Rys Gdy wykorzystujesz etykiety, nie ma *DGQHMZLGRF]QHMUy*QLF\ przynajmniej na razie ƒ%dug]lhmhihnw\zqdwhfkqlndrnuhodqld QD]ZHOHPHQWyZRSLHUDVLQD wykorzystaniu DWU\EXWX7,7/(:LFHM informacji na ten temat znajdziesz na stronie, w sekcji zatytxárzdqhm Nadawanie W\WXáyZHOHPHQWRPVWURQ::: na stronie

28 Formularze 2NUHOHQLHNROHMQRFL dla klawisza TAB =DSRPRFNODZLV]D7$%X*\WNRZQLF\PRJ SRUXV]DüVLSRHOHPHQWDFKIRUPXODU]DRGJyU\ GRGRáX:]DOH*QRci od konkretnej struktury IRUPXODU]DPR*HV]]PLHQLüWNROHMQRüWDNDE\ X*\WNRZQLNZ\SHáQLáZV]\VWNLHpola danej grupy SU]HGSU]HMFLHPGRQDVWSQHM Rys R*HV]GRGDüDWU\EXW7$%,1'(; do: GHILQLFMLSRáF]HHOHPHQWyZIRUPXODU]\ i map interpretowanych u klienta $E\RNUHOLüNROHMQRüGOD klawisza TAB Dopisz do definicji elementu formularza atrybut TABINDEX=nJG]LHQWROLF]EDRNUHODMFD NROHMQRüGOD7$%-a. Rys *G\UR]SRF]\QDV]VWURQIRUPXODU]D od GHILQLFMLSRáF]HQLDWR]DSHZQH]HFKFHV]]PLHQLü NROHMQRüGODNODZLV]D7$%WDk by najpierw XGRVWSQLDQHE\áRSLHUZV]HSROHDQLHSRáF]HQLH ƒ7$%,1'(;pr*hsu]\elhudüzduwrfl od 0 do ƒ'rp\oqdnrohmqrügod7$%-d]doh*\ od NROHMQRFLHOHPHQWyZZGRNXPHQFLH +70/-HOL]PLHQLDV]NROHMQRü to HOHPHQW\GRVWSQHVRGQDMQL*V]HJR do QDMZ\*V]HJRQXPHUX7$%,1'(; ƒ:irupxodu]xnrohmqrügod7$%-dpr*hv] RNUHODüGODSyOWHNVWRZ\FKSyOKDVHá pól wyboru, przycisków radiowych, bloków tekstu, menu i przycisków. ƒ0r*hv]su]\slvdüqxphu7$%,1'(; mapie LQWHUSUHWRZDQHMXX*\tkownika i SRáF]HQLRP. 3RZLFHMLQIRUPDFMLVLJQLMQD VWURQL 132. ƒ1rgreu]hqlhprj&lrnádp\zdü pierwsze QDFLQLFLH7$%Z\ELHUDDGUHV aktualnej strony WWW, nawet wtedy gdy pasek z adresem jest ukryty. Dopiero drugie QDFLQLFLH7$%Z\ELHUDHOement z QDMQL*V]\PQXPHUHP7$%,1'(; na danej stronie..rohmqrünodzlsza TAB 215

29 5R]G]LDá Definiowanie klawiszy skrótów Definiowanie klawiszy skrótów :VSDQLDáQRZFHFK+70/-DMHVWPR*OLZRü GHILQLRZDQLDNODZLV]\VNUyWyZGRUy*Q\FK fragmentów Twojej strony, w tym do elementów IRUPXODU]\1DFLQLFLHNODZLV]DVNUyWXSRZRGXMH wybranie danego elementu do wprowadzania danych (np. w przypadku pól tekstowych) lub zaznaczenie elementu (np. przycisku radiowego). $E\]GHILQLRZDüNODZLV]VNUyWX do elementu formularza: 1. :HZQWU]]QDF]QLNDGHILQLXMFHJRHOHPHQW wpisz ACCESSKEY=". 2. :SLV]NODZLV]VNUyWXGRZROQOLWHUOXEF\IU). 3. 1DSLV]NRF]F\]QDN". 4. -HOLFKFHV]GRGDMLQIRUPDFMRNODZLV]X VNUyWXGRWHNVWXWDNE\JRFLHZLHG]LHOL o jego istnieniu. ƒjedynie w Internet Explorerze 4 i 5 przeznaczonym dla systemów Windows XGDáRPLVLVWZRU]\üSRSUDZQLHG]LDáDMFH klawisze skrótów. ƒw celu skorzystania z klawisza skrótu w :LQGRZVX*\WNRZQLNPXVLQDFLVQü$OW i Z\EUDQOLWHU.ODZLV]HVNUyWyZQLH G]LDáDMQD0DFLQWRVKDFK*G\EGG]LDáDü X*\WNRZQLNSU]\SXV]F]DOQLHEG]LHPXVLDá QDFLVQüNODZLV]&RPPDQG ƒdefiniowane przez Ciebie klawisze skrótu PRJXQLHZD*QLDüNODZLV]HVNUyWXSU]HJOGDUNL. -HOLZ\NRU]\VWDV]SRSXODUQ\klawisz skrótu (np. S od Save Zachowaj), trpr*hv] UR]VLHUG]LüVZRLFKJRFL0LHMna uwadze, *H SU]\QDMPQLHMZ:LQGRZVQDMZD*QLHMV]H NODZLV]HVNUyWXSU]HJOGDUHNZ\NRU]\VWXM Control, a nie Alt. Rys Definiujesz klawisz skrótu przez dodanie atrybutu ACCESSKEY do definicji elementu formularza Rys LHG\JRüRJOGDVWURQ*DGHQ HOHPHQWQLHMHVWZ\EUDQ\'REU\PSRP\VáHP MHVWGRSLVDQLHWHNVWXLQIRUPXMFHJRJRFL o istnieniu klawiszy skrótów Rys RQDFLQLFLXNODZLV]DVNUyWX (w SU]\NáDG]LH$OW-M), wybrany i zaznaczony zostanie przycisk radiowy Mruczek. W przypadku SRODWHNVWRZHJRF]\WH*EORNXWHNVWXNXUVRU zostanie SU]HVXQLW\GRSRODDJRüEG]LH PyJáZSURZDG]LüWHNVW 216

30 Formularze Uczynienie elementu formularza nieaktywnym &]DVDPLFKFHV]]DEURQLüJRFLRPZ\NRU]\VWDQLH SHZQ\FKIUDJPHQWyZIRUPXODU]D1DSU]\NáDG chcesz, by przyclvngrvwduf]dmf\qlhe\ádnw\zq\, GRSyNLZV]\VWNLH*GDQHSRODIRUPXODU]DQLH ]RVWDQZ\SHáQLRQH Rys R*HV]GRGDüDWU\EXW',6$%/(' do dowolnego elementu formularza, ale prawdopodobnieqdmzlnv]\vhqvpdwr w przypadku ]QDF]QLND,1387GHILQLXMFHJR SU]\FLVNGRVWDUF]DMF\ Rys :SU]\NáDG]LHSU]\FLVN*áRVXMMHVW Z\FLHQLRZDQ\SRQLHZD*X*\WNRZQLNQLHZ\EUDá MHV]F]H*DGQHJRSU]\FLVNXUDGLRZHJR Do uaktywnienia przycisku dostarczajfhjr QLH]EGQ\MHVWVNU\SW Aby element formularza E\á nieaktywny W znaczniku FORM wpisz DISABLED. ƒ-hg\q\pvsrvrehpqd]pldq]dzduwrfl elementu, który nie jest aktywny, jest wykorzystanie skryptu. Po ZLFHM LQIRUPDFMLVLJQLMGRUR]G]LDáX%G]LHV] WDN*HSRWU]HERZDáSHZQHJRGRZLDGF]HQLD w NRU]\VWDQLX]M]\ND-DYD6FULSW ƒ-holxf]\qlv]hohphqwirupxodu]d QLHDNW\ZQ\PMHJRNODZLV]VNUyWXUyZQLH* QLHEG]LHDNW\ZQ\3RZLFHMinformacji ]HUNQLMQDVWURQ Nieaktywny element formularza 217

31 5R]G]LDá 8QLHPR*OLZLHQLH]PLDQ &]DVDPLNRQLHF]QHRND]DüVLPR*HDXWRPDW\F]QH Z\SHáQLHQLHHOHPHQWXIRUPXODU]DLXQLHPR*OLZLHQLH X*\WNRZQLNRZLGRNonywania zmian w tym HOHPHQFLH1SPR*HV]*GDüRGJRFLD potwierdzenia pewnych danych albo w trakcie powtórnego zbierania danych Z\ZLHWODü SRSU]HGQLRSU]HVáDQHGDQH7DNLHHOHPHQW\ zaznaczasz jako tylko do odczytu. $E\XQLHPR*OLZLüX*\WNRZQLNRZL dokonywanie zmian :]QDF]QLNXGHILQLXMF\PHOHPHQWZSLV] READONLY. Rys Dodaj atrybut READONLY do definicji dowolnego elementu formularza, NWyUHJR]DZDUWRFLX*\WNRZQLNQLHSRZLQLHQ ]PLHQLDü 8QLHPR*OLZLHQLH]PLDQ ƒ$wu\exw5($'21/<pr*hv]x*\zdü w odniesieniu do: pól tekstowych, pól KDVHápól wyboru, przycisków radiowych i bloków tekstu. ƒ8*\flhdwu\exwx5($'21/<su]\srplqd ukr\flhhohphqwxeh]xnu\zdqld:lfhm na ten temat znajdziesz na stronie 206. Rys :SU]\NáDG]LHZEORNXWHNVWX ÄW\ONRGRRGF]\WX Z\ZLHWODQ\MHVWVSRVyE JáRVRZDQLDX*\WNRZQLNDZSU]HV]áRFL 8*\WNRZQLNPR*HWRREHMU]HüL ]DJáRVRZDü ponownie 218

32 Formularze Skrypt Pik-Netu i Heliona &KFLHOLE\P\SROHFLü&LVNU\SWRSUDFRZDQ\ SU]H]JOLZLFNILUP3,.-NET i Wydawnictwo Helion, specjalnie dla potrzeb X*\WNRZQLNyZQLHPDMF\FKPR*OLZRFL umieszczania programów CGI na serwerze. Jego wykorzystanie jest bardzo proste: 1. Wpisz <FORM ACTION=" METHOD="GET">. 2. $E\RNUHOLüQDMDNLDGUHVPDME\ü Z\V\áDQHGDQH]7ZRMHJRIRUPXODU]D wpisz: <INPUT TYPE="hidden" NAME="adresdoskryptu" value="adres@nazwa.twojego.serwera", gdzie adres@nazwa.twojego.serwera to adres, na NWyU\PDE\üZ\V\áDQD ]DZDUWRüIRUPXODU]DF]\OLQDMF]FLHM Twój adres owy). 3. Wpisz <INPUT TYPE="hidden" NAME="subjectdoskryptu" VALUE="Temat listu">. Temat listu RNUHODMDNDZDUWRüEG]LHVLSRMDZLDü w polu SubjectOLVWyZNWyUHEG]LHV] RWU]\P\ZDá 4. :SLV]SR]RVWDáWUHü]DSURMHNWRZDQHJR uprzednio formularza. Nie wolno Ci ]GXEORZDüQD]ZSyOadresdoskryptu i subjectdoskryptu. 5. Nie zapomnij o umieszczeniu przycisków SUBMIT i RESET (strony ). 6. 3U]HGXGRVWSQLHQLHPIRUPXODU]D X*\WNRZQLNRP, koniecznie przetestuj, czy ZV]\VWNRG]LDáDSRSUDZQLH:UD]LH NáRSRWyZSRáF]VL]HVWURQRSLVXMF VNU\SW0R*HV]M]QDOH(üSRGadresem: Skrypt Pik-Netu i Heliona 219