Seznamy, tabulky, formuláře
Na dnešním cvičení se podíváme na seznamy, tabulky a formuláře. Podíváme se na jejich vytvoření, zajímavé vlastnosti a příklady vizualizace.
Seznamy
Jak už víme, a také jsme si několikrát ukázali, pro výčet prvků se v HTML používají seznamy. Podle
kontextu používáme buď číslované (<ol>) nebo nečíslované (<ul>)
(případně definiční <dl>). Oba tyto seznamy můžeme pomocí několika vlastností
vizualizovat.
U číslovaných seznamů můžeme využít několika atributů, které ovlivňují číslování seznamu.
Pomocí atributu type lze změnit styl číslování, například na písmena nebo římské číslice.
Atribut start
umožňuje nastavit počáteční hodnotu seznamu, takže číslování nemusí začínat od jedničky. Další možností
je atribut reversed, který obrátí pořadí číslování a seznam se pak zobrazuje sestupně.
U nečíslovaných (i číslovaných) seznamů můžeme upravovat vzhled odrážek pomocí několika CSS
vlasností.
Základní vlastností je list-style-type, která určuje tvar odrážky, například plné kolečko
(disc), prázdné kolečko (circle) nebo čtvereček (square). Pomocí hodnoty none lze odrážky úplně
odstranit, což se často využívá například při tvorbě navigace. Další možností je použití vlastnosti
list-style-image, která umožňuje nastavit vlastní obrázek jako odrážku. Pro přesnější
ovládání pozice odrážek lze použít vlastnost
list-style-position, která určuje, zda bude odrážka zobrazena uvnitř (inside) nebo vně
(outside) textu. To je velmi užitečné při zarovnávání seznamu na stránce. Následuje ukázka.
Tabulky
Pro přehledné zobrazení dat v řádcích a sloupcích můžeme v jazyce HTML použít tabulky. Používají se především tam, kde je potřeba zobrazit strukturované informace, například ceníky, výsledky, seznamy nebo rozvrhy. Není vhodné je používat pro rozvržení celé stránky – k tomu máme CSS Flexbox nebo Grid!
Pro tvorbu tabulek v HTML existuje mnoho elementů. Tím nejzákladnějším je element
<table>, který obaluje celou tabulku. Každá tabulka má hlavičku a tělo, někdy může
obsahovat i patičku. Pro hlavičku tabulky se používá element
<thead>, pro tělo <tbody> a pro patičku
<tfoot>. Každý řádek v tabulce je obalený to elementu <tr>. Pro
buňky tabulky rozlišujeme dva elementy podle toho, jestli se nachází v hlavičce tabulky, používáme
<th>, nebo v jejím těle, používáme <td>. U elementu
<th> navíc máme k dispozici atribut scope pomocí kterého jednoduše
určíme, jestli platí hlavička pro sloupec nebo řádek.
Základní tabulku lze vytvořit poměrně snadno (příklad). Pro její vizualizaci nám slouží
vlastnosti jako border-collapse, border-spacing nebo
caption-side.
Formuláře
Formuláře v HTML jsou jednou z nejdůležitějších součástí moderních webových stránek a webových aplikací. Téměř žádná moderní webová aplikace se bez nich neobejde. Jejich správné používání je proto klíčové a je velmi důležité znát jednotlivé elementy a jejich atributy.
Základním prvkem formuláře je element <form>, která obaluje celý formulář
a určuje, kam a jak se data odesílají pomocí atributů jako action a
method. Nejčastěji používaným prvkem je <input>, který má mnoho typů
podle toho, jaký vstup
očekáváme od uživatele. Kromě toho exituje další řada atributů, které nám pomáhají chování ovlivnit.
Mezi další elementy patří třeba <label>, <legend>,
<fieldset> nebo <button>.
Pojďme si nyní ukázat dva příklady. V prvním si vytvoříme komplexnější formulář s využitím různých elementů. V druhém si vytvoříme vizualizaci input elementu s ikonou a doplňujícími informacemi.