CELÁ OBRAZOVKA ZPĚT NA OBSAH



3. opakování

(Shrnutí lekcí 8 až 10)

Obsah lekce :

Formuláře

Pomocí příkazů pro tvorbu formulářů lze do jazyka HTML zabudovat políčka pro zadávání textu a tlačítka. Údaje vyplněné uživatelem se zasílají serveru, kde se také zpracovávají.
Již jazyk HTML 2.0 poskytuje příkazy pro tvorbu formulářů. Části dokumentů, které mají sloužit k získávání informací, lze vytvořit v podobě formuláře, do něhož autor může umístit jak vstupní pole, tak i seznamy s možnostmi, z nichž se položky vybírají pomocí tlačítka nebo zaškrtávacích tlačítek. Jakmile uživatel stiskne po vyplnění formuláře tlačítko "Submit", jsou údaje získané tímto formulářem odeslány na server.
V tomto místě však nastávají problémy. Bez programu, který by na serveru dále zpracoval data z formuláře, nelze prakticky nic dělat. Naštěstí existuje jedna výjimka, kdy se zadaná data místo na server mohou zaslat pomocí funkce mailto na libovolnou e-mailovou adresu. Bohužel došlý výsledek na danou adresu není příliš přehledný, neboť obsahuje spoustu speciálních znaků. I přesto však zůstává funkce mailto tím nejschůdnějším řešením, jak využít HTML formuláře a dostat se k vyhodnocení získaných výsledků.

Definice formuláře je uzavřena mezi návěští <FORM> a </FORM>. Do kontejneru FORM jsou pomocí mnohostranného příkazu <INPUT> vkládána vstupní pole. Atribut TYPE u příkazu INPUT může nabývat dvou speciálních hodnot "submit" a "reset". V obou případech je zobrazeno odpovídající tlačítko. Úkolem tlačítka "Submit" je zaslat získaná data z formuláře na server k dalšímu zpracování. V nejjednodušším případě si prohlížeč znovu vyžádá aktuální HTML stránku, ke které připojí informaci zadanou uživatelem. Tlačítko "Reset" vymaže z formuláře všechny již zadané hodnoty.


Aby mohl být výstup z formuláře dále zpracováván, musí být tato stránka spojena s nějakým CGI skriptem, který komunikuje s dalším programem uloženým na straně serveru. Program vyhodnotí zaslaná data a výsledek odešle klientskému browseru.
Data doplňená do formuláře jsou připojována za název dokumentu otazníkem. Po otazníku následuje označení (label) vstupního pole, které je shodné s hodnotou atributu NAME zadaného v návěští <INPUT>. Mezery jsou nahrazeny znaménky plus (+). Speciální znaky jsou zapsány v hexadecimálním kódu, kterému předchází znak %.

Největší část práce ve formulářích obstarává příkaz <INPUT>. Typ vstupního pole je určen atributem TYPE, který může nybývat následujících hodnot:

  • <INPUT TYPE="text">

  • Typ "text" slouží k zadávání jednořádkových textů. Tento typ je definován jako implicitní, takže je použit i v případě, že u příkazu INPUT není typ definován. Délku tohoto vstupního pole je možné omezit pomocí atributu SIZE. Maximální délku zobrazovaného pole je možné omezit atributem MAXLENGTH. Pokud je MAXLENGTH menší než SIZE, pak se text v okénku posouvá (roluje).

  • <INPUT TYPE="password">

  • Políčka typu "password" jsou velice podobná políčkům pro zadávání textu ovšem s výjimkou, že místo hodnoty zapisované do pole typu "password" jsou vypisovány hvězdičky. Je však nutné upozornit na to, že tento způsob zadávání hesla není nejbezpečnější a není velkým problémem toto heslo odhalit.

  • <INPUT TYPE="checkbox">

  • Políčko typu "checkbox" je zobrazeno buď v podobě malého čtverečku, který lze zakřížkovat, nebo tlačítka, které lze vypnout nebo zapnout. Na rozdíl od textových polí, jejichž obsah je posílán na server i v případě, že jejich obsah je prázdný, je název checkboxu sdělen serveru pouze v případě, když je aktivní. Hodnota aktivního checkboxu je stanovena na základě atributu VALUE, který standardně přechází do stavu "on".

    Atribut VALUE umožňuje zabránit kolizím v případech, kdy je stejným jménem označeno několik checkboxů. V těchto případech je nutné atributu VALUE přiřadit různé hodnoty.


    Příklad:

    <FORM>
    Vlastním:<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV"> Televizor<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
    </FORM>

    Zobrazení:

    Vlastním:
    Televizor
    Videorekordér
    Hi-Fi soupravu


    Například po zaškrtnutí skupin televizoru a videorekordéru se odešle na server:

    MAJ="TV"&MAJ="VR"



    Pomocí atributu CHECKED je možné označit několik políček, které již budou v nabídnutém formuláři zaškrtnuty. Uživatel má samozřejmě možnost toto zaškrtnutí zrušit.


    Příklad:

    <FORM>
    Vlastním:<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="TV" CHECKED> Televizor<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="VR"> Videorekordér<BR>
    <INPUT TYPE="checkbox" NAME="MAJ" VALUE="HF"> Hi-Fi soupravu<BR>
    </FORM>

    Zobrazení:

    Vlastním:
    Televizor
    Videorekordér
    Hi-Fi soupravu


  • <INPUT TYPE="radio">

  • Tlačítka typu "radio" se chovají obdobně jako checkboxy. Vyznačují se kruhovým zaškrtávacím políčkem a v daném okamžiku je možné mít zaškrtnuto maximálně jedno políčko. Těmto tlačítkům musí být hodnota VALUE zadána povinně. I v tomto případě je možné nastavit předvolbu pomocí atributu CHECKED. Pokud bude tato předvolba použita u více prvků, bude použit jako aktivní poslední z nich.


    Příklad radiobuttonů:

    <FORM>
    Vlastním televizor<BR>
    <INPUT TYPE="radio" NAME="TV" VALUE="B" CHECKED> barevný
    <INPUT TYPE="radio" NAME="TV" VALUE="C" > černobílý
    </FORM>

    Výsledek:

    Vlastním televizor
    barevný černobílý

  • <INPUT TYPE="reset">

  • Atribut TYPE="reset" je značkou INPUT zobrazen jako obyčejné tlačítko, které má však speciální funkci. Stisknutím tohoto tlačítka dojde k přenastavení všech údajů ve formuláři na počáteční nastavení. Standardní nápis "Reset" lze změnit nastavením atributu VALUE.

  • <INPUT TYPE="submit">

  • Také funkce typu "submit" je zpracována stejným způsobem jako typ "reset". Avšak stisknutím tohoto tlačítka dojde k odeslání zaškrtnutých hodnot na server k dalšímu zpracování. I u této funkce je možné přenastavit standardní nápis "Submit Query" pomocí atribuitu VALUE.

    <TEXTAREA> ... </TEXTAREA>
    Návěští TEXTAREA umožňuje ve formuláři zadat víceřádkový text. Šířku okna (udanou počtem znaků) a výšku okna je možné nastavit atributy COLS a ROWS. Těmito atributy však není délka textu omezena, neboť v okně je možné listovat. Text mezi počátečním a koncovým návěštím TEXTAREA bude zapsán v okně jako předvolba.

    <SELECT>
    Funkce SELECT umožňuje výběr ze seznamu nabízených možností, které jsou vždy v rámci kontejneru <SELECT> uvozeny návěštím <OPTION>.

    Tabulky

    Tabulky jsou v jazyce HTML velmi mocným nástrojem. Jejich použím lze nejen tisknout přehledné sloupce různých hodnot, ale i vytvořit profesionálně vyhlížející stránku použitím různých tabulkových "triků", které budou popsány v rámci této kapitoly.
    Nutno předem upozornit, že tabulky jsou do standardu jazyka zahrnuty až od jeho verze 3.0, a tedy některé starší prohlížeče je nemusí umět používat.
    Definice tabulky je dána návěštím <TABLE> a </TABLE>. Atribut BORDER této značky umožňuje zviditelnění tabulky. Stejně jako u formulářů, je nutné i v tomto případě v kontejneru tabulky použít další příkazy, které umožňují specifikovat konečný vzhled celé tabulky. Návěští <TR> definuje řádek tabulky, který obsahuje návěští (většinou několik) <TD> představující sloupce dat.
    Návěští <TH> (table header) pak definuje nadpis jednotlivých sloupečků dat. Pomocí značky <CAPTION> je možné přidat k tabulce popisek, který bude zarovnán na střed tabulky.


    Příklad použití tabulky:

    <TABLE BORDER>
    <CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
    <TR>
    <TH></TH> <TH>Ascii</TH>
    <TH>Latin2</TH> <TH>Kamenik</TH>
    </TR>
    <TR>
    <TD>Windows</TD> <TD>html_wa.zip</TD>
    <TD>html_wl2.zip</TD> <TD>html_wk.zip</TD>
    </TR>
    <TR>
    <TD>Unix</TD> <TD>html_ua.tgz</TD>
    <TD>html_ul2.tgz</TD> <TD>html_uk.tgz</TD>
    </TR>
    </TABLE>

    Zobrazení:

    Specifikace jmen souborů Výuky HTML
    AsciiLatin2Kamenik
    Windowshtml_wa.ziphtml_wl2.zip html_wk.zip
    Unixhtml_ua.tgzhtml_ul2.tgz html_uk.tgz


    Pomocí atributů COLSPAN a ROWSPAN lze docílit sjednocení několika sousedních buňek tabulky ve vodorovném (svislém) směru. Tímto způsobem lze jednoduše docílit zpřehlednění tabulky.


    Spojování buněk tabulky:

    <TABLE BORDER>
    <CAPTION>Specifikace jmen souborů Výuky HTML</CAPTION>
    <TR>
    <TH><PRE> </PRE></TH> <TH>Ascii</TH>
    <TH>Latin2</TH> <TH>Kamenik</TH>
    </TR>
    <TR>
    <TD>Windows</TD> <TD ROWSPAN=2>html_a.zip</TD>
    <TD>html_wl2.zip</TD> <TD>html_wk.zip</TD>
    </TR>
    <TR>
    <TD>Unix</TD>
    <TD>html_ul2.tgz</TD> <TD>html_uk.tgz</TD>
    </TR>
    </TABLE>

    Zobrazení:

    Specifikace jmen souborů Výuky HTML
     
    AsciiLatin2Kamenik
    Windowshtml_a.ziphtml_wl2.zip html_wk.zip
    Unixhtml_ul2.tgz html_uk.tgz

    Poznámka: Obdobným způsobem lze za pomoci atributu COLSPAN spojit dvě políčka ve vodorovném směru.


    U příkazu TABLE slouží jeho atribut WIDTH k určení šířky tabulky. Velikost lze zadávat i relativně, tedy např. WIDTH=100% způsobí vykreslení tabulky přes celou šíři okna prohlížeče.
    V současné době se tabulkových příkazů používá většinou nikoliv k zarovnávání číselných hodnot, ale k celkové úpravě HTML stránky. Například lze do několika sloupečků tabulky umístit obrázky, které budou na stránce pravidelně rozmístěny nezávisle na šířce okna prohlížeče.
    Jako další příklad mohou sloužit všechny lekce výuky jazyka HTML, které jsou zpracovány jako vycentrované tabulky o šířce 500 pixelů.
    Tabulkami je možné výrazně zpřehlednit i formuláře. Zaškrtávací políčka lze umístit do jedné buňky tabulky, zatímco jejich popis bude ve vedlejším sloupečku.

    Ramce

    Pomocí rámců (frames) je možné rozdělit okno prohlížeče na několik oblastí. V každé oblasti je možné zobrazit jiný dokument, který může být (a většinou též je) provázán s ostatními dokumenty v jiných rámcích.
    Nejčastěji bývá rámců použito k rozdělení okna na úzký sloupeček umístěný vlevo (méně častěji vpravo) obsahující nabídku HTML dokumentů, a větší okno, ve kterém jsou tyto dokumenty zobrazovámy. Stejným způsobem je tvořena i tato výuka jazyka HTML.
    Rámce jsou definovány ve speciálním HTML dokumentu, který neobsahuje příkaz <BODY>. Místo něj je použit kontejner <FRAMESET>, ve kterém je definován počet rámců a jejich rozmístění v okně prohlížeče. Pomocí atributu COLS je definováno vertikální rozdělení zobrazovací plochy, atributem ROWS pak členění horizontální. Hodnota těchto atrubutů je zadávána v počtu pixelů, případně procentuálně. Hvězdička v definici těchto atributů vymezuje rámci zbylý prostor okna (v případě použití více "hvězdičkových" hodnot, je zbývající prostor plochy prhlížeče spravedlivě rozdělen mezi tyto rámce). Počet hodnot atributů COLS a ROWS určuje počet rámců v okně.
    Uvnitř kontejneru FRAMESET se používá příkazu <FRAME> a příslušného atributu SRC, s jehož pomocí se specifikuje dokument, který má být v daném okně zobrazen. Atribut NAME pak přiřazuje danému rámci jeho jméno, které se stává cílem hypertextových odkazů.

    Rámce získávají smysl v okamžiku, kdy v HTML dokumentu jsou hypertextové odkazy na jiné HTML stránky, které jsou pak nataženy do různých rámců. Jako příklad zde uvádíme část dokumentu, který je zobrazen v levé části okna prohlížeče při zpracování výuky jazyka HTML.


    Příklad na pohyb v rámcích:

    <OL>
    <LI> Lekce</LI><BR>
    <A HREF="zaklady.htm" TARGET="main"> Základy</A>
    <LI> Lekce</LI><BR>
    <A HREF="struktur.htm" TARGET="main"> Strukturování dokumentu</A>
    <LI> Lekce</LI><BR>
    <A HREF="format.htm" TARGET="main"> Formátování textu</A>
    </OL>

    Poznámka: tento dokument je otevřen v rámu, který pojmenován obsah, a jak je patrné všechny odkazy jsou přesměrovávány do jiného okna s názvem main.


    Prohlížeče, které neumějí rámce zpracovávat, přeskočí rozdělení obrazovky a neudělají vůbec nic. Na tuto možnost je pamatováno zavedením příkazu <NOFRAMES>, který se provede právě v případě prohlížeče neznajícího rámce. V tomto kontejneru je možné umístit celé tělo HTML dokumentu s upozorněním, že pro zobrazení následujících stránek je nutné mít prohlížeč s podporou rámců, případně sem lze umístit alternativní "nerámcové" zpracování těchto stránek.


    Příklad

    Napište zdrojový program v jazyce HTML, jehož výsledkem bude následující dotazník :

    Dotazník

    Vyplňte, prosím, tento dotazník a stiskněte tlačítko "Pošli"
    Jméno a příjmení :
    Fakulta :
    Fav
    Fel
    Fst
    jiná
    Věk :
    Váš oblíbený fotbalový klub :



    Vaši oblíbení profesoři na Universitě :
    Vaši neoblíbení profesoři na Universitě :
    Jedno z možných řešení najdete zde
    Testování - zde si můžete vyzkoušet, jak jste danou látku zvládli

    CELA OBRAZOVKA ZPET NA OBSAH