HTML II – 5. lekce

Po nepříjemnostech a čekání na úkoly je tu další lekce kurzu HTML II. Tentokrát se zaměřením na formuláře.

Spousta webdesignerů si řekne „K čemu mi budou na stránce fomuláře?“. A najednou ho napadne, že by chtěl dát na stránku okno a tlačítko, kde návštěvníci napíšou zprávu, a pošlou mu ji. A už máme na scéně formuláře.

Základ formuláře

Základ formuláře tvoří párové tagy <form> a </form>, mezi něž se vkládají prvky formuláře. Kód tedy bude vypadat takto:

<form>
zde budou formulářové prvky
</form>

Ale jak už tomu bývá, toto by nic neudělalo. A i kdyby udělalo, tak by se nám na stránce nic neobjevilo. Proto se určují u tagu <form> ještě minimálně 2 atributy:

• method
• action

Metody odesílání určené parametrem method se používají dvě. Jsou to post a get. Více používaná je, myslím, metoda post a my se zde metodou get ani zabývat nebudeme.

Do hodnoty parametru action se píše adresa skriptu, který se vykoná po kliknutí na odesilací tlačítko.

Pokud byste chtěli přes formulář posílat data, musíte přidat ještě jeden parametr. Je to parametr enctype, jenž určuje MIME typ. Pokud jej nenapíšete, formulář tam defaultně (automaticky) „sekne“ hodnotu text/plain, která je pro posílání dat naprosto nepoužitelná. Pro posílání dat se obvykla používá multipart/form-data.

Vstupní pole formuláře – inputy

Pokud se s Vámi někdo bude bavit o inputech, bude pravděpodobně mluvit o tzv. vstupních polích formuláře. Vstupní jsou proto, že do nich něco píšete, zaškrtáváte políčka či jen vybíráte kolečko, ale hlavně proto, že tyto prvky se do formuláře dávájí zpravidla nepárovým tagem <input>. U tohoto tagu se určují další parametry:

type

Určuje typ vstupního pole

value

Základní obsah vstupního pole

maxlenght

Maximální délka napsaného textu

checked

Políčko je již deufaultně zaškrtnuté

name

Jméno inputu – důležité!

Udělám vám malou tabulku se seznamem inputů.

A to by bylo, aby taky neexistovaly nějaké výjimky. Tady jsou:

Jak na <textarea> a <select>

Ukážeme si to na tom, co jsem použil v tabulce. Nejprve tedy popíšeme tag <textarea>:

• Tag je párový
• Určuje se parametr rows (počet řádek)
• Určuje se parametr cols (počet sloupců)
• Nesmíme opomenout ani parametr name

To, co je napsáno mezi <textarea> a </textarea>, se ve výsledku objeví, takže něco jako když zvolíte u <input type="text"> parametr value. Takže vám ukážu příklad:

<textarea name="vzkaz" rows="5" cols="7">Zde mi můžete napsat vzkaz</textarea>

Jak vidíte, nic na tom není. A teď se podíváme na výběrový seznam select. Zadává se jednoduchým, ale pro někoho nezvyklým způsobem. Opět pár základních informací:

• Tag je párový
• Mezi tagy <select> a </select> se vkládá nepovinně párový (může být nepárový) tag <option>, u kterého se povinně určuje parametr value, a za tag se píše to, co se zobrazí na výběr.
• Nesmíme opomenout ani parametr name, který se píše pouze k tagu <select>

Tak, a teď zdrojový kód jako k selectu, jako je v tabulce:

<select name="webovky">

<option value="CSS">CSS</option>

<option value="Javascript">JavaScript</caption>

</select>

Pokud přidáte k tagu <select> parametr multiple bez hodnoty (v XHTML se stejnou hodnotou), můžete pomocí nesouvislého výběru (Ctrl + kliknutí) vybrat více možností. Potom pomocí přidání parametru size nastavíte počet řádků, kolik se zobrazí.

Domácí úkol:

Vytvořte mi celou stránku s černým pozadím, meta tagy, tabulkou, v níž budou prvky formuláře: na text, heslo a odesílací tlačíko. Neuvádějte parametr action a metodu odesílání si zvolte sami.