XHTML – elementy button a textarea

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):

Tak na co čekáš?

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ýchozí text.

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.