Elementy button a textarea mají podobný účel, jako některé základní ovládací prvky tvořené elementem input, avšak nabízejí větší možnosti ohledně jejich vytváření. Element button slouží k vytvoření tlačítka a elementem textarea je možné do stránky zahrnout větší textové pole.

Element button – pokročilé tlačítko

Povolený obsah: %button.content;

Atributy:

%attrs;
Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
%focus;
Tato parametrická entita obsahuje atributy specifické pro elementy, které mohou obdržet takzvaný fokus. Ten se uplatňuje obvykle při procházení stránky klávesnicí (typicky pomocí klávesy Tab). Řadíme sem atributy accesskey, tabindex, onfocus a onblur.
name       CDATA       #IMPLIED
Udává jméno tlačítka. Význam tohoto atributu je zde stejný jako u klasických tlačítek tvořených elementem input.
value       CDATA       #IMPLIED
Pomocí tohoto atributu se nastavuje výchozí hodnota daného tlačítka (ta ale nemůže být uživatelem změněna). Narozdíl od tlačítek tvořených elementem input se však tato hodnota nezobrazí jako text na tlačítku.
disabled       (disabled)       #IMPLIED
Umožňuje tlačítko „vyřadit“. Význam tohoto atributu je stejný u všech ovládacích prvků.
type       (button|submit|reset)       "submit"
Tento atribut určuje, jakou funkci bude dané tlačítko mít. Může to být buď submit (pro odesílací tlačítko, výchozí hodnota atributu), reset (tlačítko pro nastavení formuláře na výchozí hodnoty) nebo button (tlačítko, které nemá žádnou předdefinovanou funkci, tu dostane až ve spojení s klientskými skripty).

Element button v XHTML 1.0 Strict DTD

Tlačítka, která můžete vytvořit elementem input, mají svá omezení, jsou tvořena buď pouze textem nebo pouze obrázkem. XHTML tedy nenabízí příliš velké možnosti pro ovlivnění jejich vzhledu. A právě v možnostech ovlivnění vzhledu spočívá výhoda elementu button.

Ten je totiž párový a XHTML nám do něj dovoluje vkládat různý obsah, například obrázky nebo text, který na něm poté bude zobrazen. Abychom byli přesní, jeho obsah je v DTD nastaven na parametrickou entitu %button.content;, která vypadá takto:

(#PCDATA | p | %heading; | div | %lists; | %blocktext; | table | %special; | %fontstyle; | %phrase; | %misc;)*

To je de-facto obsah parametrické entity %Flow;, která znamená téměř libovolný obsah, jsou z ní ale vyloučeny elementy a, form a elementy pro vytváření ovládacích prvků. Je to logické, uvnitř tlačítka nemá žádný smysl vytvářet odkazy, nové formuláře nebo vnořovat další ovládací prvky.

Uvnitř elementu button také nesmíte používat image-mapy.

Nyní vám ukážu příklad, na kterém si vše předvedeme:

<button type=“button“ onclick=“…“>
<p><img src=“klikni_na_me.png“ alt=“Klikni na mě!“ /></p>
<p><strong>Tak na co čekáš?</strong></p>
</button>

A výsledek v prohlížeči (zobrazení opět závisí na schopnostech a nastavení vašeho prohlížeče):

Element textarea – větší textová pole

Povolený obsah: (#PCDATA)

Atributy:

%attrs;
Tato parametrická entita obsahuje další parametrické entity:
%coreattrs; (atributy id, class, style a title),
%i18n; (atributy lang, xml:lang a dir) a
%events; (atributy onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown a onkeyup).
%focus;
Tato parametrická entita obsahuje atributy specifické pro elementy, které mohou obdržet takzvaný fokus. Ten se uplatňuje obvykle při procházení stránky klávesnicí (typicky pomocí klávesy Tab). Řadíme sem atributy accesskey, tabindex, onfocus a onblur.
name       CDATA       #IMPLIED
Udává jméno textového pole.
rows       %Number;       #REQUIRED
Tento atribut nastavuje počet viditelných řádek textu. Tím ale není omezena celková délka textu, protože pole většinou může skrolovat.
cols       %Number;       #REQUIRED
Pomocí tohoto atributu se nastavuje šířka pole, přičemž jeho hodnota se vztahuje k průměrné šířce znaků (například hodnota 10 říká, že pole má být široké 10 × šířka průměrného znaku). I tak ale uživatel může díky skrolování zadávat delší řádky textu. Interpret XHTML také může dlouhé řádky zalamovat, aby nedocházelo k horizontálnímu skrolování.
disabled       (disabled)       #IMPLIED
Umožňuje pole „vyřadit“. Význam tohoto atributu je stejný u všech ovládacích prvků.
readonly       (readonly)       #IMPLIED
Tento boolean-atribut říká, že textové pole je jenom pro čtení, hodnotu, která je zde uvedena, nemůže uživatel změnit. Tento atribut zde má stejný význam jako u jednoduchých textových polí tvořených elementem input.
onchange       %Script;       #IMPLIED
Tato událost je aktivována, pokud uživatel změnil hodnotu ovládacího prvku. Dojde k tomu ve chvíli, kdy prvek ztratí fokus (de-facto se jedná o událost onblur, přičemž navíc musí dojít ke změně hodnoty ovládacího prvku).
onselect       %Script;       #IMPLIED
Tato událost je aktivována ve chvíli, kdy uživatel vybere v poli nějaký text.

Element textarea v XHTML 1.0 Strict DTD

Pomocí elementu textarea se vytváří víceřádková textová pole. Tento element je párový, přičemž smí obsahovat pouze text (#PCDATA). Tento text by měl být použit jako výchozí hodnota pole a jako takový zobrazen i jako jeho výchozí text.

Nyní si vytvoříme textové pole o pěti řádcích a třiceti sloupcích, s nastavenou výchozí hodnotou:

<textarea rows=“5″ cols=“30″ name=“text“>
Výchozí text.
</textarea>

A toto bude přibližně výsledek v prohlížeči:

V příštím díle se podíváme na další pokročilý ovládací prvek, tzv. vysunovací nabídku.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Žádný příspěvek v diskuzi

Odpovědět