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ěte na mě!</button>

Tlačítko jako odkaz

Pokud chcete, 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>Jdi na hry!</button>
</a>

Atribut disabled (vypnuté tlačítko)

Pokud chcete, aby tlačítko bylo viditelné, ale nešlo na něj kliknout (např. dokud uživatel něco nevyplní), použijte 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ůžete říct tlačítku, aby po kliknutí udělalo něco speciálního. Například se objeví zpráva:

<button onclick="alert('Dobrý den, jsi skvělý programátor!')">Pozdravte se!</button>

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

Cvičení: Moje tlačítka!

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

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

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