Přehled formulářových tagů <form> vymezení oblasti formuláře <input> vstupní políčko, odesílací políčko, zaškrtávátka, přepínače, prostě mnoho věcí. Co to přesně bude, určuje type <select> výběr, taková ta rolovací nabídka. Někdy se tomu říká drop-down menu <option> vyskytuje se uvnitř tagu <select> a představuje jednu možnost v nabídce <textarea> oblast pro zadání delšího textu <label> popisek pole <optgroup> množina voleb <fieldset>, <legend> množina prvků s nadpiskem <form></form> Tag formuláře. Příklad: <form action="skript.php3" method="post" target="_blank">...nějaká vstupní pole + normální html text...<input type=submit value=odeslat> </form> Vypadá to takhle: Začátek formuláře...nějaká vstupní pole + normální html text... odeslat Konec formuláře Action je vymyšlená, takže to tady nefunguje. Co znamenají jednotlivé atributy: action obsahuje URL (v tomto případě relativní) na skript, kterému je potom formulář posílán target určuje cílový rám, ve kterém se budou výsledky zpracovávat. Podobnost s target u odkazů není náhodná. Např. hodnota target="_blank" posílá výsledek do nového okna. Method method určuje způsob, kterým budou data odesílána. K dispozici jsou hodnoty GET a POST. GET je metoda základní (nemusí se zadávat). Data odeslaná metodou GET jsou součástí URL za otazníkem a jsou vidět. Používá se většinou u krátkých formulářů. Metoda POST je vhodná pro rozsáhlejší vstupy. Data nepřidává do URL (takže nejsou vidět), ale odesílá je jako samostatný HTTP objekt. Jaký vliv má method na zpracování dat? Některé skripty mezi metodami get a post nečiní rozdíly (např. PHP skripty.) Jiné rozdíly činí (ASP a většina CGI skriptů), ovšem nijak zásadní. Takže je většinou jedno, která metoda se to použije. Doporučuje se postovat vstupy obsahující hesla a dlouhé vstupy, protože get je omezen myslím na 1024 znaků. - 1 -
Podpora zobrazování Níže popsané prvky formuláře by měly být vždy obaleny tagy <form> a </form>, protože jinak je prohlížeče Netscape 4, Internet Explorer 3 (a starší) nedokážou zobrazit. <input> Input znamená "vstup". Tag input má mnoho podob. Jednou je to vstupní pole, jindy odesílací políčko, někdy přepínač, jindy odesílací obrázek atd. Všechno to určuje atribut type: Začátek formuláře HTML ukázka popis <input type="text" size="10" name="textik" value="obsah"> <input type="password" size="10" name="heslo" value="kocka"> <input type="checkbox" checked name="skrtatko" value="ano"> <input type="radio" name="puntik" value="horni">horní<br> <input type="radio" name="puntik" value="dolni" checked>dolní <input type="hidden" name="tajemstvi" value="nic"> <input type="submit" value="odeslat"> <input type="reset" value="vymazat"> <input type="image" name="obrazek" src="images/jpw.gif"> obsah Horní Dolní nic odeslat vymazat Normální vstupní pole Vstupní pole pro heslo. Pouze skryje hodnoty, jinak to nic neumí. Zaškrtávací políčko (nezaškrtnuté se neodesílá) Přepínač Vždy je aktivní pouze jedna volba se stejným name. Skryté pole bez možnosti změny. Nezobrazuje se, ale odesílá se tajemstvi=nic. Odesílací tlačítko Zákeřné tlačítko obnovující původní hodnoty Odesílací tlačítko, které zároveň posílá souřadnice kliknutí. Konec formuláře Zkuste si schválně pozměnit hodnoty uvedené výše a odeslat, koukejte, co to provede s dotazem v URL za otazníkem. Do tabulky se mi nevešel poslední typ <input type="file" name="soubor"> Začátek formuláře Konec formuláře slouží k zadání cesty k souboru. Nepřenáší se jméno souboru, ale celý soubor. Ke správné funkci vyžaduje určitá nastavení (v definici formuláře: <form enctype="multipart/form-data">). - 2 -
<input type=file> se nezobrazuje v Internet Exploreru 3. Atribut value nefunguje. Zpracovat přiložený soubor na serveru není žádná sranda a já s tím pracovat neumím. Select Výběrová nabídka, které se občas říká "select box" nebo taky "drop-down menu" nebo prostě menu. Má různé podoby ovlivňované zejména atributem size. Začátek formuláře HTML ukázka popis <select name="platforma" size="1"> <option value="win">windows <option value="linux">linux <option value="unix">unix <option value="mac">mac </select> <select name="platforma2" size="3" multiple> <option value="win">windows <option value="linux" selected>linux <option value="unix">unix <option value="mac">mac </select> Window s Window s Linux Unix Výběr z několika možností, který se zobrazuje v jednom řádku (protože size=1) Výběr zobrazený ve třech řádcích (size=3) s možností výběru více položek -- to dělá to "multiple"(klikejte s klávesou CTRL) <select name="platforma3" size="4" multiple> <option value="win">windows <option value="linux">linux <option value="unix" selected>unix <option value="mac">mac </select> Window s Linux Unix Mac Seznam výběrů je tak velký, že nejsou potřeba lišty (size=4 odpovídá počtu položek). Volba s atributem "selected" je předem vybrána (Unix). <input type="submit" value="odeslat"> Pozor, tag <select> je párový! Textarea Oblast pro zapsání většího textu. odeslat Konec formuláře - 3 - Odesílací tlačítko zde jen pro zkoušku odeslání
HTML ukázka popis <textarea size="10" rows="4" cols="15" name="dlouhytext">zde může být text </textarea> Zde může být te Široké a vysoké vstupní pole pro zadávání delších textů <input type="submit" value="odeslat"> odeslat Odesílací tlačítko Začátek formuláře Konec formuláře Tag <textarea> je také párový. Zkuste si odeslání a sledujte, co se stane. Velikost textarey se měří na znakové řádky a sloupce, ale dá se přetlouct pomocí CSS. Zalamování řádek při psaní a po odeslání se řídí atributem wrap. Atribut Name Name je nejdůležitější atribut formulářových tagů. Identifikuje je a posílá své jméno s daty. Symbolicky po odeslání vypadá dotaz takto:?jméno=hodnota&jméno2=hodnota2 Příklady odesílání dat si můžete vyzkoušet ve výše uvedených tabulkách. Nebo například v dotazu?jidlo=jablko&piti=kafe&zvire=ko%e8ka jsou řetězce jidlo, piti a zvire obsahem atributu name, kdežto jablko, kafe a kočka jsou zadané hodnoty. Ještě pár zajímavých výjimek: U <input type=radio> (přepínač) se může vyskytovat více puntíků se stejným jménem. Vždy může být zatržený ale jenom jeden; ten se potom odesílá se svou hodnotou U <input type=image> (obrázkové odesílání) se při kliknutí musejí odesílat dvě hodnoty -- souřadnice. Ke jménu (name) se připojují tečka s písmenky x a y. Například pokud je <input type=image name=obrazek>, potom jeho odeslání může vypadat takto:?obrazek.x=13&obrazek.y=121 U <select multiple> je třeba odesílat více hodnot se stejným jménem. Při odesílání se prostě zařadí za sebe:?platforma=unix&platforma=linux Atribut Value Hodnota, obsah polí. U některých prvků formuláře je to hodnota přednastavená (u <input type="text"> a <input type="password">), která jde před odesláním měnit u tlačítek (input type="submit" a type="reset") některých prvků je to hodnota zobrazovaná na tlačítku - 4 -
u <input type="file> z bezpečnostních důvodů nefunguje atribut value a nejde jej ovládat ani skriptem (dal by se tak totiž vykrást např. soubor s hesly) u ostatních prvků (select, input type="checkbox", type="radio", type="hidden") je to hodnota nezobrazovaná a neměnitelná, která se ale odesílá s daty. Textarea atribut value nemá. Ve formuláři se objeví jako přednastavená hodnota samotný obsah tagu (vnitřek, prostě <textarea>tohle</textarea>). Velikosti prvků Input typu text a password nastavují svoji velikost podle atributu size. Ten udává počet znaků, který se tam může zobrazit. (Fakticky se tam ale vejde znaků více.) Size u tagu <select> označuje počet zobrazených řádků výběru. Tagu <textarea> se zadává šířka a výška ve znacích pomocí atributů rows a cols (řádky a sloupečky). Pokud je na prvky formuláře aplikován CSS styl (zejména width a height), převáží původní nastavení (nefunguje v NN4). Checked a selected Atributy, jimiž se označuje přednastavené zatržení políčka nebo výběr. Jsou to atributy zvláštní tím, že za nimi není rovnítko s hodnotou. Checked se dá použít u <input type="checkbox"> a u <input type="radio">. Selected se dá použít u výběrů <select>. Pokud jsou tyto atributy použity v jednom výběru nebo přepínači vícekrát, platí jen ten první z nich. Accesskey Jiným způsobem, jak aktivovat formulářové pole bez kliknutí do něj, je použití horké klávesy Alt + písmeno. Písmeno se zadává jako hodnota atributu accesskey, kupříkladu políčko: <u>j</u>méno: <input type=text accesskey="j"> se zobrazí úplně normálně, ale při stisku kombinace Alt + j (na české klávesnici levý alt) se políčko aktivuje pro zápis: Jméno: Accesskey se dá využít i u odkazů (tag <a>), takže se po stisku Alt + klávesa rovnou sleduje odkaz. Je dobrým zvykem aktivní písmenko podtrhávat nebo jinak zvýraznit, aby uživatel pochopil, že může ťuknout klapku. Tabindex Zkušení uživatelé webu při vyplňování formulářů rádi používají klávesu tab (tabulátor) pro přeskakování mezi políčky formuláře. Pokud ale někdo zkonstruuje příliš komplikovaný příšerný formulář (nejčastěji pomocí vnořených tabulek), tak se pak tabulátor z pohledu uživatele chová - 5 -
nevypočitatelně (protože sleduje posloupnost HTML kódu, nikoli optickou posloupnost). V takových případech se hodí použít tabindex jako atribut formulářových polí. <input tabindex="1" type="text" name="jméno"> Tento příklad je užitečný i v jiném případě, totiž pokud na stránce je nějaké velmi důležité formulářové pole, které ale následuje po mnoha odkazech. Typickou ukázkou je vyhledávací políčko v katalozích typu Seznamu. Kdyby se k vyhledávacímu políčku chtěl uživatel proťukat tabulátorem, tak to bude trvat dlouho. Pokud ale bude mít nastaven tabindex="1", tak se políčko aktivuje po prvním stisku tabulátoru. Pokus o příklad: Při stisku tabulátoru se projdou všechna políčka, která mají tabindex nastavený a pak se teprve aktivují ta bez tabindexu. Jako hodnota tabindexu se udává přirozené číslo, jejichž množina je společná pro celou stránku. Pokud se něčemu nastaví tabindex nula, nelze to tabulátorem aktivovat (obvykle nedůležitá boční políčka). Disabled & readonly Přidání atributu disabled (bez hodnoty) do formulářových polí je učiní nepřístupnými, takže se nedají aktivovat. U některých typů polí se zákaz projeví vizuálně zešedivěním (např. checkbox), u jiných jen tím, že do nich nelze kliknout (type=text). <input type=text size=10 disabled> <input type=checkbox disabled> Jiným typem zákazu je atribut readonly (jen číst), který umožňuje aktivaci, ale nedovolí změnu: <input type=text size=10 value="pokus" readonly> pokus Taková pole se používají buďto jako obměna skrytých polí (ovšem nejistě, protože starší prohlížeč zákaz ignorují), nebo jako zpestření klientských skriptů (JavaScriptu nejčastěji). Hodnoty polí a nastavení zákazu se totiž dají JavaScriptem měnit. Má-li políčko nastaveno disabled, formulář jej neodesílá. Políčka read-only posílá. Potřebujete-li mít nepřístupné políčko, které se bude odesílat, ale bude šedivé, přidejte mu styl. Action="mailto:..." HTML už v sobě obsahuje způsob, kterým se má vyplněný formulář odeslat na mail adresa@prijemce <form action="mailto:adresa@prijemce" method="post" enctype="text/plain"> Váš mail: <input name="mail_odesilatele" size="20"><br> Předmět: <input name="subject" size="20"><br> Zpráva: <textarea name="body" rows="4" cols="30"></textarea><br> <input type="submit" value="odeslat"> </form> - 6 -
Action="mailto..." způsobí, že se prohlížeč při odesílání formuláře pokusí kontaktovat mailovací program na čtenářově počítači a předat mu obsah formuláře k odeslání na adresu, která je uvedena za "mailto:". Atribut enctype nastavuje způsob předávání obsahu: nejvíce se mi osvědčil text/plain. Kdyby se tam enctype nezadávalo, mail se odešle prázdný s přílohou postdata.att, ve které je zakódovaný obsah formuláře. Nic hezkého na čtení, např.: mail_odesilatele=nikdo@nidke&subject=p%f8edm%ect&body=toto+je+zpr%e1va Pokud se ale zadá text/plain, tak se alespoň nepokazí čeština a zachovají se řádkové zlomy. Konkrétní způsob odeslání závisí na prohlížeči a mailovém programu. Např. Internet Explorer do předmětu dává text: "Formulář vystavený z aplikace MSIE". K odeslání se pak používá nejčastěji program Outlook. Proč je to nespolehlivé Mail z formuláře s action="mailto..." často nenajde adresáta. Problémy spočívají v nastavení počítače u čtenáře. Možné důvody: Prohlížeč formulář nemusí umět zpracovat nebo nemá nastavený mailovací program. Např. windowsovská Mozilla bez mailovacího klienta přinejlepším otevře okno Outlooku, formulářová pole ignoruje. Odesílatel se může leknout hlášky, která se zobrazuje při odesílání (že to půjde poštou, což nemusí být bezpečné) a dá raději storno, čímž se odesílání zruší. Poštovní program (nejčastěji Outlook Express) může mít nesprávně nastavený SMTP server. Maily pak zůstávají na lokále v Poště k odeslání. Podle mých odhadů je nesprávně nastavený SMTP server na třetině až polovině všech instalací Outlooku. Zejména se to týká počítačů ve školách, na úřadech, v knihovnách. Byl jsem na civilce v knihovně; na každém rok starém počítači jsem tam objevil asi čtyři stovky neodeslaných mailů, z toho polovičku z formulářů, které měly nastavené action="mailto:". Navíc, když už se formulář podaří odeslat, je jako odesilatel uveden majitel účtu, nikoliv skutečný odesilatel. Příjemce (tedy já) odpovídá někomu, kdo vůbec neví, co se děje. To je poslední důvod, proč klientské odesílání doporučuji nepoužívat a zkusit raději způsoby serverové. Serverové odesílání Action se namíří na nějakou aktivní stránku (např. ASP nebo PHP skript), která udělá dvě věci: 1. Odešle mail 2. Do prohlížeče odešle stránku, nejčastěji potvrzení odeslání Podle možností vašeho serveru Některé stránky po registraci nabízejí na svých serverech takové skripty už hotové a funkční, což ocení zejména ti, kteří na serveru nemohou nic. - 7 -
Pokud máte možnost využívat serverové skripty s odesíláním mailů, můžete si napsat tu aplikaci sami (nebo zkopírovat zdejší příklad). Nebo má váš poskytovatel webového prostoru na serveru nějakou zvláštní doplňkovou věc, která umožňuje odesílání mailů z formulářů. Přes cizí servery Znám dvě české služby, které umožňují odesílání mailů z formulářů: Maiform a Blueboard. Je třeba se registrovat, nechat si vygenerovat kód formuláře a ten umístit do své stránky. Formulář se bude odesílat na vzdálený server, který odešle mail a zobrazí stránku s potvrzující stránkou. Zatímco na Bluebordu je registrace a použití trochu jednodušší, Mailform nabízí podle mého názoru o něco větší možnosti. www.blueboard.cz Na hlavní stránce se zvolí registrace, pak se vyplní formulář. Odesílání mailů z formulářů se v terminologii tohoto serveru jmenuje "Blueform". Aby to fungovalo, musí ze v nastavení Blueformu zadat e-mail, na který se má formulář odesílat. Zároveň se mohou nastavit barvy, to není podstatné. Pak stačí nechat si vygenerovat kód a umístit ho do stránek. Kód Blueformu je umístěn v tagu <iframe>, do kterého se načítá formulář ze serveru. Vzhled a funkci formuláře tedy (kromě barev) není možné nijak podstatně ovlivnit (leda byste si ho zkopírovali a pak si udělali svůj parazitní formulář změnou action). Naštěstí má formulář velmi moderní vzhled a hezky používá styly. Zajímavé je, že formulář je načítán ze serveru, i když není žádný mail odesílán. Formulář obsahuje pouze dvě políčka, což většinou stačí: zadání mailu odesílatele a text zprávy. Příchozí zpráva má pak předmět (subject) "BlueForm Message", který nelze nijak změnit. Jako odesílatel je uveden mail, který uživatel zadá do okénka mail. Zpráva dorazí bez jakýchkoli balastních textů. Blueboard využívá pro odesílání PHP (což není podstatné). Server Blueboard.cz je zajímavý i tím, že kromě formuláře do mailu poskytuje i návštěvní knihu, ankety, počitadlo, chat a jiné aktivní prvky. www.mailform.cz Maily přes Mailform doporučuji využívat, pokud se nespokojíte s mailem odesílatele a prostou zprávou, ale potřebujete od uživatele získat další strukturované údaje. Formulář si totiž v tomto případě stavíte sami, server řeší pouze odesílání. Do formuláře si můžete umístit další libovolná pojmenovaná pole (nejčastěji tagem <input>); vyplněný obsah těchto polí přijde do mailu. V nastavení se dá zvolit mnoho způsobů vzhledu a formování došlé zprávy, různé příjemce, předmět zprávy a další vymoženosti. Registrace na mailform.cz je naprosto typická, pouze se při ní zadává i adresa stránky, kde bude formulář umístěn. Podle mých zkušeností tam stačí zadat přibližnou adresu, to jest doména.cz. Pak je vygenerován formulář, který je třeba naplnit svými formulářovými poli (nejčastěji intputy). - 8 -
<form method="post" action="http://www.mailform.cz/form.asp"> <input type="hidden" name="mailform_userid" value="9427">... <input type="submit"> </form> Na místo tří teček je nutno doplnit vlastní formulářová pole, např: Předmět: <input type="text" name="subject"><br> Zpráva: <textarea name="zprava"></textarea><br> Váš mail: <input name="mail"> K celému systému je velmi obsáhlá nápověda. Například se tam dá nastavit, aby se jako předmět zadala hodnota zadaná do políčka subject. Jediná drobná nevýhoda je, že se v došlé poště jako odesílatel ukazuje "MailForm robot", případné odpovědi naštěstí docházejí na adresu, kterou uživatel zadá do políčka s name RefererEmail, Email či Mail. Skript od MaKr Kamarád MaKr napsal a na svém serveru rozběhal skript, který umožňuje odesílání mailů z jednoduchého formuláře bez nutnosti registrace. Změňte si údaje a zkuste to. <FORM action="http://mgs.web3.cz/html4all/mail.php" method="post"> <!-- Tyto dva parametry musí být skutečné a správné!!!--> <INPUT type="hidden" name="komu" value="torp@seznam.cz"><!-- adresát --> <INPUT type="hidden" name="rpath" value="torp@seznam.cz"><!-- odesilatel --> <!-- absolutní adresa stránky, kam se má přejít po odeslaní!--> <INPUT type="hidden" name="goto" value="new/email-od.htm"> Předmět: <INPUT type="text" name="p" value=""><br> Text: <TEXTAREA cols=50 rows=5 name="t"></textarea><br> Váš email:<input type="text" name="od" value=""><br> <INPUT type="submit" name="send" value="odeslat"> </FORM> Formuláře-shrnutí Formuláře umožňují interakci mezi uživatelem a serverem. Tvorba formuláře má 2 části. Jedna část je HTML dokument, který bude obsahovat pole formuláře. Druhá část bude samostatný skript na serveru, který bude zpracovávat zadané informace ve formulářových polích. Tento skript se spustí po stisknutí tlačítka ve formuláři. Tvorba HTML stránky Prvky formuláře jsou v kontejneru <FORM> </FORM>. Může jich být několik, ale nesmí se vnořovat. V kontejneru <FORM> mohou být ostatní tagy HTML. <FORM METHOD= metoda jak mají být data odeslána na server hodnota - POST/GET ACTION= cesta a název skriptu, který se spustí a převezme data po odeslání formuláře na server. NAME= TARGET= jméno formuláře jméno okna, ve kterém má být zobrazen výsledek získaný odesláním formuláře ENCTYPE= způsob kódování obsahu formuláře, standardně: application/x-www-form-urlencoded - 9 -
<FORM ACTION= mailto: ikaros@pbvos.cz METHOD=POST ENCTYPE = multipart/form-data > Volba metody odeslání Většina serverů dokáže zpracovat data předaná oběma metodami. Hlavním rozdílem je, že metoda GET uvádí data formuláře jako část adresy. Dokáže přenést omezené množství dat, bývá nastavováno na serverech na 1000 znaků. Metoda POST umožňuje přenést neomezené množství dat, ale při odesílání neuvidíte v poli adresa žádná ze zadaných dat. Je vhodná pro složitější a větší formuláře. Základní prvky formuláře Tag INPUT vytváří různé druhy vstupních prvků, druh prvku určíme atributem TYPE. Vstupní pole pro krátký text: <INPUT TYPE=text> Jelikož text je dán implicitně, nemusí se atribut TYPE uvádět. <INPUT NAME= jméno pole VALUE= nastavení výchozí hodnoty pole SIZE= zadání rozměru pole v počtu znaků, standardně je 20 znaků MAXLENGTH= maximální počet znaků, která může uživatel zapsat > Tlačítko pro odeslání formuláře <INPUT TYPE=submit Tlačítko pro vynulování VALUE= POPIS TLAČÍTKA > <INPUT TYPE=reset VALUE= POPIS TLAČÍTKA > Víceřádkový text <TEXTAREA NAME= jméno pole ROWS= počet řádků pole COLS= počet sloupců> text, který se objeví jako výchozí </TEXTAREA> - 10 -
Roletky výběr ze seznamu: <SELECT NAME= jméno výběru (MULTIPLE) (SIZE= počet zobrazených řádků ) (DISABLED) > <OPTION VALUE= řetězec předaný serveru > Výběr 1 </OPTION> <OPTION SELECTED> Výběr 2 </OPTION> <OPTION> Výběr 3 </OPTION> </SELECT> Zatrhávací tlačítka <INPUT Přepínače TYPE=checkbox NAME= jméno pole (CHECKED) > Text vedle políčka <INPUT TYPE=radio NAME= popis výběru VALUE= hodnota předávaná serveru (CHECKED)> Text1 vedle tlačítka<br> <INPUT TYPE=radio NAME= popis výběru VALUE= hodnota předávaná serveru > Text2 vedle tlačítka<br> <INPUT TYPE=radio NAME= popis výběru VALUE= hodnota předávaná serveru > Text3 vedle tlačítka<br> Heslo Použití a chování tohoto prvku je stejné jako u TYPE=text. Při psaní do tohoto pole se zobrazí hvězdičky <INPUT TYPE=password Odeslání souboru NAME= jméno pole VALUE= nastavení výchozí hodnoty pole SIZE= zadání rozměru pole v počtu znaků, standardně je 20 znaků MAXLENGTH= maximální počet znaků, která může uživatel zapsat > <INPUT TYPE=file Grafické odesílací tlačítko <INPUT TYPE=image NAME= jméno pole SIZE= zadání rozměru pole v počtu znaků, standardně je 20 znaků MAXLENGTH= maximální počet znaků, která může uživatel zapsat ACCEPT= image/*, text/plain > SRC= URL obrázku WIDTH= šířka obrázku HEIGHT= výška obrázku BORDER=0 (NN4.5 jinak udělá kolem tlačítka modrý rámeček)> - 11 -
- 12 -