Home
Add Document
Sign In
Register
Začátek formuláře. odeslat. Konec formuláře
Home
Začátek formuláře. odeslat. Konec formuláře
1 Přehled formulářových tagů vymezení oblasti formuláře vstupní políčko, odesílací políčko, zaškrtávátka, přepínače, prostě mnoho věcí. Co to přesně...
Author:
Vratislav Havlíček
48 downloads
255 Views
345KB Size
Report
DOWNLOAD PDF
Recommend Documents
Formule VillaKeizersKroon
Formule VillaKeizersKroon
Formule Boerderijwinkel
KAPESNÍ FORMULE
Konec volné formule. Elizabetta bravissima! Sezóna Italských mil
L) formule
Redactionele formule
RECEPTIES. Formule 1 à Formule 2 à Formule 3 à 28.25
DESIGN KAROSERIE FORMULE STUDENT
Facto Magazine. Redactionele formule
FORMULE 1 VE ŠKOLÁCH
RECHTSBIJSTANDSVERZEKERING FORMULE GOLD
OR informatie. Redactionele formule
neuserdijk Overpelt. Receptie formule
Studenti předvedli svoje formule
VÝUKOVÉ KARTY: FORMULE 1
1 Formule predikátové logiky
Facto Magazine. Redactionele formule
Facto Magazine. Redactionele formule
Formule onderzoek 2011
Internet Succes Formule
INFO-BROCHURE: veldkaart-formule
een formule met karakter!
neuserdijk Overpelt. Receptie formule
Okruhy k absolutoriu
Formuláře (HTML)
Přehled formulářových tagů
vymezení oblasti formuláře
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
vyskytuje se uvnitř tagu <select> a představuje jednu možnost v nabídce
oblast pro zadání delšího textu
popisek pole
množina voleb
,
množina prvků s nadpiskem
Tag formuláře. Příklad:
...nějaká vstupní pole + normální html text ...
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-
Okruhy k absolutoriu
Formuláře (HTML)
Podpora zobrazování Níže popsané prvky formuláře by měly být vždy obaleny tagy
a
, protože jinak je prohlížeče Netscape 4, Internet Explorer 3 (a starší) nedokážou zobrazit.
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
obsah
name="textik" value="obsah">
popis Normální vstupní pole
Vstupní pole pro heslo. Pouze
name="heslo" value="kocka">
skryje hodnoty, jinak to nic neumí.
Zaškrtávací políčko (nezaškrtnuté se
name="skrtatko" value="ano">
neodesílá)
Horní
value="horni">Horní
Dolní
checked>Dolní
value="odeslat">
Vždy je aktivní pouze jedna volba se stejným name. Skryté pole bez možnosti změny.
nic
name="tajemstvi" value="nic">
Přepínač
Nezobrazuje se, ale odesílá se tajemstvi=nic.
odeslat
vymazat
Odesílací tlačítko Zákeřné tlačítko obnovující původní hodnoty
Odesílací tlačítko, které zároveň
src="images/jpw.gif">
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
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:
). -2-
Okruhy k absolutoriu
Formuláře (HTML)
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">
Windows
Linux
Výběr z několika možností, který se Window s
Unix
zobrazuje v jednom řádku (protože size=1)
Mac <select name="platforma2" size="3" multiple>
Windows
Linux
Unix
Window s Linux Unix
Mac
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>
Seznam výběrů je tak velký, že nejsou
Windows
Linux
Unix
Window s Linux Unix Mac
Mac
položek). Volba s atributem "selected" je předem vybrána (Unix).
potřeba lišty (size=4 odpovídá počtu
odeslat
Konec formuláře
Pozor, tag <select> je párový!
Textarea Oblast pro zapsání většího textu. -3-
Odesílací tlačítko zde jen pro zkoušku odeslání
Okruhy k absolutoriu
Formuláře (HTML)
HTML
ukázka
popis
Zde může být te
Široké a vysoké vstupní pole
name="dlouhytext">Zde může být text
pro zadávání delších textů
odeslat
Odesílací tlačítko
Začátek formuláře Konec formuláře
Tag
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
(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
(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
, 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
a
), 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-
Okruhy k absolutoriu
Formuláře (HTML)
u
Textarea atribut value nemá. Ve formuláři se objeví jako přednastavená hodnota samotný obsah tagu (vnitřek, prostě
tohle
).
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
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
a u
. 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:
J
méno:
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
), 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-
Okruhy k absolutoriu
Formuláře (HTML)
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í.
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).
Jiným typem zákazu je atribut readonly (jen číst), který umožňuje aktivaci, ale nedovolí změnu:
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
Váš mail:
Předmět:
Zpráva:
-6-
Okruhy k absolutoriu
Formuláře (HTML)
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-
Okruhy k absolutoriu
Formuláře (HTML)
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
); 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-
Okruhy k absolutoriu
Formuláře (HTML)
...
Na místo tří teček je nutno doplnit vlastní formulářová pole, např: Předmět:
Zpráva:
Váš 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.
Předmět:
Text:
Váš email:
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
. Může jich být několik, ale nesmí se vnořovat. V kontejneru
mohou být ostatní tagy HTML.
Okruhy k absolutoriu
Formuláře (HTML)
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:
Jelikož text je dán implicitně, nemusí se atribut TYPE uvádět.
Tlačítko pro odeslání formuláře
VALUE=“POPIS TLAČÍTKA“>
Tlačítko pro vynulování
Víceřádkový text
text, který se objeví jako výchozí
- 10 -
Okruhy k absolutoriu
Formuláře (HTML)
Roletky – výběr ze seznamu: <SELECT
NAME= „jméno výběru“ (MULTIPLE) (SIZE=„počet zobrazených řádků“) (DISABLED) >
Výběr 1
Výběr 2
Výběr 3
Zatrhávací tlačítka
TYPE=checkbox NAME=„ jméno pole“ (CHECKED) > Text vedle políčka
Přepínače
Text1 vedle tlačítka
Text2 vedle tlačítka
Text3 vedle tlačítka
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
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“>
Odeslání souboru
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“>
Grafické odesílací tlačítko
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 -
Okruhy k absolutoriu
Formuláře (HTML)
- 12 -
×
Report "Začátek formuláře. odeslat. Konec formuláře"
Your name
Email
Reason
-Select Reason-
Pornographic
Defamatory
Illegal/Unlawful
Spam
Other Terms Of Service Violation
File a copyright complaint
Description
×
Sign In
Email
Password
Remember me
Forgot password?
Sign In
Our partners will collect data and use cookies for ad personalization and measurement.
Learn how we and our ad partner Google, collect and use data
.
Agree & close