Výuka IT

Tlačítka

Tlačítka jsou skvělá pro to, aby uživatel mohl něco udělat – například odeslat formulář nebo spustit nějakou akci.

Vytvoření základního tlačítka

Pro vytvoření tlačítka použijeme značku <button>. Text mezi otevírací a uzavírací značkou bude textem na tlačítku.

<button>Klikněme na mě!</button>

Tlačítko jako odkaz

Pokud chceme, aby tlačítko po kliknutí přešlo na jinou stránku (fungovalo jako odkaz), obklopte tlačítko značkou <a>.

<a href="stranka_s_hrami.html">
    <button>Pojďme na hry!</button>
</a>

Atribut disabled (vypnuté tlačítko)

Pokud chceme, aby tlačítko bylo viditelné, ale nešlo na něj kliknout (např. dokud uživatel něco nevyplní), použijme atribut disabled.

<button disabled>Toto tlačítko je vypnuto</button>

Tlačítka a JavaScript

Opravdová síla tlačítek se ukáže s JavaScriptem. Můžeme říct tlačítku, aby po kliknutí udělalo něco speciálního. Například se objeví zpráva:

<button onclick="alert('Dobrý den, jsme skvělí programátoři!')">Pozdravme se!</button>

Funkce alert() zobrazí malé vyskakovací okno s textem.

Cvičení: Moje tlačítka!

Úkol: Vytvořme novou sekci <h2> "Moje super tlačítka".

  1. Vytvořme jedno jednoduché tlačítko s textem "Stiskněme mě!".
  2. Upravme tlačítko, aby po kliknutí se otevřela nějaká webová stránka (např. Google).
  3. Vytvořme další tlačítko, které bude vypnuté (disabled).

Uložme a klikněme na svá tlačítka!