12. Základy HTML a formuláře v HTML

). Levé odsazení se zobrazuje zpravidla ve velikosti 40 pixelů, čímž se seznamy podobají tagu

. ul

Nečíslovaný seznam (unordered list). Uvnitř mohou být pouze elementy

. Před položkami se jako odrážka zobrazí puntík, lze to ale změnit atributem type (hodnoty stejné jako u

). Víceúrovňové odrážky se dají dělat zanořováním dalšího

do
• . Druhá úroveň zobrazuje přednastaveně kolečko, třetí čtvereček. Seznamy s obrázkovou odrážkou lze udělat pomocí CSS stylů a vlastosti liststyle-image. Příklad:
  • položka s obrázkovou odrážkou
  d. Obrázky (img) Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného souboru. Src
  
  Zdoj obrázku, prostě cesta k tomu souboru (angl. source = zdroj). Cesta k obrázku se udává jako klasické URL absolutně nebo relativně. Přípustné jsou soubory typu *.gif, *.jpg, v novějších prohlížečích také *.png a v Internet Exploreru *.bmp. (Jiné typy souborů se musejí vkládat jako objekty pomocí plužiny). Pokud soubor obrázku nebude nalezen, zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem. Alt
  
  Zástupný text. Zobrazuje se ve stránce v oblasti nenačteného obrázku. Width, height - Šířka (width) a výška (height) obrázku Border - Tloušťka rámečku. Align - Zarovnání obrázku s okolím.
  
  e. Tabulky (table) Tabulka. Uzavírá celou strukturu tabulky, obsahuje další elementy; zejména řádky tabulky. Tr - Řádek
  
  tabulky.
  
  td
  
  Buňka tabulky. Musí být umístěna v řádku . je párový tag, ale pokud se neuzavře, tak si s tím prohlížeče poradí. Kromě obecných atributů má tyto: col
  
  Sloupec. Umožňuje nastavit nějakou vlastnost všem buňkám v jednom sloupci
  
  6. formuláře je část stránky, která se běžnému uživateli jeví podobně jako dialogové okno - slouží k získávání informací od uživatele - získané informace jsou následně odeslány na server ke zpracování - ke zpracování údajů z formuláře se používají CGI-skripty - takže musíme vytvořit stránku s formulářem a ještě skript, který zaslaná data správně zpracuje - formulář může obsahovat různá vstupní pole, tlačítka a přepínače - formulářů může být na jedné stránce víc, ale nesmí být do sebe vnořeny Formulář se vkládá do stránky pomocí elementu FORM, který má atributy: ACTION...určuje URL CGI skriptu, který bude obsah zpracovávat METHOD...určuje metodu odeslání dat (GET nebo POST) ENCTYPE...určuje způsob kódování obsahu formuláře (standardně: application/x-www-form-urldecode a není důvod ho měnit)
  
  
  ELEMENTY FORMULÁŘE INPUT...vstupní pole SELECT...pro vytváření seznamů TEXTAREA...vstupní pole pro víceřádkový text
  
  1. element INPUT = vstup Jednotlivé atributy elementu INPUT: (mohou být v libovolném pořadí, většina je nepovinná) TYPE...druh vstupního elementu (pokud není uvedeno, je bráno jako TEXT) NAME...každý element INPUT musí mít určeno své jedinečné jméno Data jsou pak odeslána serveru ve formátu: Jméno1=hodnota1&Jméno2=hodnota2&... VALUE...přednastavená hodnota vstupního data type = TEXT - krátký text SIZE...velikost okénka = počet znaků (přednastaveno nataveno na 20) MAXLENGTH - maximální délka zadávaného textu, může být delší než SIZE
  
  Jméno: Příjmení: Jméno: Příjmení: type = PASSWORD - heslo Místo znaků zobrazovány **** Heslo: Heslo: type = RADIO - přepínací tlačítka Nabídnete seznam, je odeslána pouze jedna vybraná hodnota, NAME je stejné! CHECKED...předvybraná možnost Tvoje oblíbená barva: žlutá modrá červená zelená žlutá modrá červená zelená type = CHECKBOX - zaškrtávací pole Nabídnete seznam, jsou odeslány všechny vybrané hodnoty NAME volíme jako typ "pole", vybrané hodnoty naplňují pole automaticky od indexu 0 Př.: Dáš si k jídlu: bramborový guláš svíčkovou s knedlíkem vepřová pečeně se zelím smažený sýr s hranolky filé s bramborovou kaší bramborový guláš svíčkovou s knedlíkem vepřová pečeně se zelím smažený sýr s hranolky filé s bramborovou kaší type = RESET - vynulování Všechna pole formuláře se nastaví na původní hodnoty, neposílá se serveru type = FILE - odeslání souboru Chceme umožnit uživateli odeslání souboru spolu se zbytkem formuláře ACCEPT...můžeme určit MIME typy souborů, které je přípustné vybrat Př.: Připoj obrázek s tvojí originální podobou:
  
  type = HIDDEN - skrytá pole Budeme např. chtít zachovat hodnotu nějaké proměnné i pro příští zobrazení stránky. Př.: Máme 2 čísla, která budeme při každém dalším zobrazení této stránky: nejdříve zvětšovat o 1: cislo1++ a cislo2++ a pak si vypisovat jejich hodnotu. Do prvku HIDDEN uložíme pouze hodnotu čísla2: Z tohoto skriptu se pak vždy odešle také proměnná cislo2 s příslušnou aktuální hodnotou. V důsledku toho se cislo2 bude při každém dalším zobrazení zvětšovat, kdežto cislo1 bude mezi jednotlivými zobrazeními zapomenuto a vynulováno. cislo1=1 cislo2=1 type = SUBMIT - odeslání formuláře serveru Můžeme použít i více tlačítek s různou hodnotou, posílá se jen to zatržené type = IMAGE - odesílací tlačítko s obrázkem Odeslání formuláře, jen místo textu je obrázek, funguje jako klikací mapa Jméno je odesláno se souřadnicemi x a y, kde došlo ke kliknutí (Obr.x a Obr.y) SRC...URL obrázku ALIGN...zarovnání obrázku s okolím (TOP, MIDDLE, BOTTOM, LEFT, RIGHT)
  
  2. element SELECT = seznam Jednotlivé atributy elementu SELECT: MULTIPLE...pokud je zadán, může být ze seznamu vybráno více položek SIZE...počet najednou zobrazených řádek seznamu OPTION...element pro jednotlivou položku SELECTED...předvybrané položky Vyber si měsíc: <select name="Mesic" size="3"> leden únor březen duben květen červen
  
  3. element TEXTAREA = víceřádkový text Jednotlivé atributy elementu TEXTAREA: ROWS...počet řádek vstupního pole COLS...počet sloupců/znaků vstupního pole Ukončovací tag nesmí být vynechán!!!
  
  Zde nám prosím napište připomínky k našemu programu Nezapomeňte nakonec formulář ukončit: