JavaScript – uspořádání obsahu odeslaného z formuláře na e-mail

Vážení čtenáři, vítám vás v další části pojednání o JavaScriptu. Před nějakým časem jsem se zmínil o tom, jak je možné odeslat obsah formuláře na e-mailovou adresu. Bohužel došlý mail byl v dost neuspořádané formě. Dnes se budu zabývat na žádost čtenáře Intervalu.cz tím, jak jej odeslat v úhledné formě.

Při odesílání formuláře můžete určit řadu věcí, kterými můžete ovlivňovat jednak to, kam data z formuláře budou zaslána, také to, jak budou zakódována a v jaké formě budou předána příjemci. Navíc můžete určit funkci, která zkontroluje správnost dat před odesíláním, a nebo data také může upravit. A místem, kde toto všechno určujete, je právě značka form:

<form name="f" action="mailto:xyz@nekde.cz" method="post" enctype="application/x-www-form-urlencoded" onSubmit="return kontrola_a_uprava_dat();"> … </form>

Použil jsem schválně v příkladu značky <form> všechny běžně používané atributy, kterými se běžně ovlivňují parametry odesílání dat formuláře. Vyplatí se vědět, co ten který atribut znamená, a proto je alespoň zběžně popíšu v dalším textu. Určitě vám doporučuji si přečíst článek o Odesílání formuláře, který vyšel v tomto časopise, a na který navazuji.

Atribut name určuje jméno formuláře. Toto jméno je důležité pouze pro JavaScript, pokud tedy k tomuto formuláři nepřistupujete pomocí JavaScriptu, můžete atribut name vynechat.

Atribut action určuje příjemce dat. V případě, že chci poslat data na e-mailovou adresu, použiji mailo: plus vlastní adresa. Jako příklad, zápis action="mailto:ahoj@nekde.cz" pošle obsah formuláře na adresu ahoj@nekde.cz.

Atribut method určuje metodu předání dat. Používá se buď get, nebo post. Pomocí method neurčujete, v jaké formě příjemce dostane data, ale spíše, jakým "kanálem" se k němu dostanou. Pro vás je důležité vědět, že příjemce dat musí být jinak naprogramován, když dostává data metodou get, a jinak, když je dostává metodou post. Pokud data posíláte pomocí elektronické pošty, používejte metodu post pro zaslání dat, jinak žádná data nezašlete. Pokud data neposíláte na e-mailovou adresu, ale jinému příjemci, je dobré zjistit, jakou metodou je schopen příjemce data přijmout. Někteří umějí obě metody, potom je to v zásadě jedno, například u všech PHP skriptů. V takovém případě doporučuji dávat přednost metodě post.

Atribut onSubmit umožňuje určit funkci v JavaScriptu, která provede kontrolu, případně i úpravu dat ve formuláři před odesláním, a vrátí true, pokud je vše v pořádku a data se odešlou. A nebo funkce vrátí false, pokud není všechno jak má být, a odeslání se neprovede. Pokud atribut onSubmit nepoužijete, odeslání se provede vždy.

Atribut enctype určuje, v jaké formě budou data poslána. Zde je právě jádro pudla. Tady můžete určit, jak budou data do mailu zapsána. Zde určujete obsah pomocí tzv. MIME standardu, což je mezinárodní standard pro určování typu obsahu různých dokumentů, ale také obrázků, zvukových a video sekvecí, a vlastně čehokoliv. Používá se zejména v internetových souvislostech. Dále tedy popíšu některé MIME typy, které se používají při odesílání obsahu formuláře na e-mailovou adresu. Přehled všech MIME typů byste měli najít na na tomto místě.

Základní typ pro odesílání dat z formuláře je MIME typ "application/x-www-form-urlencoded". Tento dlouhý název říká, že data z formuláře budou odeslána mailem, který bude mít nejspíše přiložený soubor s názvem postdata.att a v tomto souboru budou obsahy jednotlivých položek formuláře. Bohužel, v souboru je text zakódován pomocí tzv. URL kódování, které je sice lidsky trochu čitelné, ale někdy dá zabrat. Jde o to, že každá mezera je nahrazena znakem +. Vše, co není číslice, nebo písmeno anglické abecedy (tedy i různá česká písmena s háčky a čárky) je nahrazeno tvarem %XX, kde místo XX je ASCII kód znaku v šestnáctkové soustavě. Tedy čitelnost textu se snižuje tím více, čím více ryze českých znaků text obsahuje:

pole_1=toto+je+obsah+prvn%EDho+pole&pole_2=toto+je+obsah+druh%E9ho+pole

Zde vidíte, že obsah je dost nečitelný. Výše uvedená ukázka vznikla odesláním formuláře se dvěma textovými položkami s názvy pole_1 a pole_2. Jak je patrné, položky se oddělují pomocí znaku &.

Typ "application/x-www-form-urlencoded" je pro odesílání formulářů brán jako základní. Tedy pokud nepoužijete atribut enctype, je automaticky použit tento základní typ. Chcete-li použít něco jiného, musíte použít atribut enctype s uvedením žádaného MIME typu.

Dalším, pro formuláře doporučovaným MIME typem je "multipart/form-data". Nad tímto typem se standardizační komise pro jazyk HTML rozplývá nadšením a chválou, jak dobře se hodí zejména pro rozsáhlá data. Podle rozsahu, který je popisu věnován soudím, že je komise do tohoto typu zamilovaná.

Také při použití "multipart/form-data" se odešle mail s přiloženým souborem. V tomto souboru bude ovšem text uspořádán jinak. Především tu není žádné URL kódování, takže vám nebude dělat problém přečíst text. Místo toho jsou v textu jednotlivé položky odděleny čarou ze znaků -, kde na konci čáry je stále stejná podivná změť číslic a písmen. Ta ale žádnou informaci nenese:

—————————–7d03b61f188 Content-Disposition: form-data; name=“pole_1″ toto je obsah prvního pole —————————–7d03b61f188 Content-Disposition: form-data; name=“pole_2″ toto je obsah druhého pole —————————–7d03b61f188

Dále je vidět, že pod čarou je za name= jméno pole ve formuláře a na dalším řádku je obsah toto pole. Pokud použijete enctype="multipart/form-data", dostanete sice trochu úřednicky zpracovaný, ale jinak dobře čitelný text.

Snad jenom poznámku, že kódování "multipart/form-data" je opravdu vhodné na zpracování různorodých dat o libovolné velikosti. Velmi jednoduše lze posílat formuláře, které obsahují soubory i položky nejrůznějších typů. Pokud tedy posíláte třeba celé soubory z formuláře, mohu jenom doporučit.

Výše uvedená obě kódování lze použít v jakémkoli případě, nejenom pro elektronickou poštu, ale pro jakéhokoli příjemce. Obě kódování jsou uvedena v současném standardu jazyka HTML. Na druhé straně ne každý příjemce je schopen přijmout jakékoli kódování. Obecně platí, že prakticky každý příjemce je schopen přijmout data v základní formě "application/x-www-form-urlencoded". Ostatní kódování nemusí být schopen přijmout vždy.

Samozřejmě můžete použít MIME typy další, které nejsou přímo zmíněny ve standardu HTML, protože odesílání formulářů není věc pouze HTML, ale zasahuje i do dalších oblastí internetových standardů. Protože MIME typy se používají mimo jiné i při odesílání mailů. Každý e-mailový klient při doplní do každého mailu hlavičku, která mimo jiné obsahuje MIME typ obsahu mailu. Dokonce je možné posílat v jenom mailu několik obsahů, často se například používá odesílání mailu jako čistý text, a zároveň jako HTML. Zkusím se tedy dále věnovat, byť jenom velmi zběžně, MIME typům použitelným v mailu v souvislosti s odesíláním formuláře.

Základním, všeobecně podporovaným MIME typem v mailech je typ "text/plain". Tento typ jednoduše značí "čistý text" bez jakýchkoli ozdob. Proto použijete-li enctype="text/plain" ve ynačce <form>, dostanete jednoduchý, krásně čitelný text v úhledném balení:

pole_1=toto je obsah prvního pole pole_2=toto je obsah druhého pole

Ještě více potěšující je, že text je přímo odeslán jako tělo emailu, a nemusíte ho lovit v žádném připojeném souboru. Zkrátka je to velice dobré, protože typ "text/plain" je nejpřirozenější typ pro e-mailového klienta.

Takže na závěr příklad, jak takový úhledný mail můžete odeslat:

<html> <head> <title>Odeslání úhledného mailu</title> </head> <body> <form action="mailto:ponkrac@peregrius.cz" method="post" enctype="text/plain"> <input type="text" name="jmeno" value=""> <input type="text" name="zprava" value=""> <input type="submit" value="Odeslat"> </form> </body> </html>

A to je pro tento pondělní den vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.