První novoroční výprodej Java týden
Hledáš brigádu v IT, která bude 100 % home office a 100 % flexibilní? Pak napiš na: redakce [zavináč] itnetwork.cz pro více info!
80 % bodů zdarma díky akci Black Friday! Tento týden rovněž sleva na e-learning Java až 80 %

button - Český HTML 5 manuál

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Tag <button> umožňuje vložit tlačítko, které nemusí být bezprostředně součástí formuláře. Tag je párový a může obsahovat další elementy jako text a obrázky. Tím se odlišuje od elementu <input>.

Atributy

Naši partneři možná hledají právě tebe!

Můžeme specifikovat následující atributy:

  • autofocus - Atribut je typu boolean. Pokud je uveden, element se zaktivní po načtení stránky.
  • disabled - Atribut je typu boolean. Pokud je uveden, nelze na tlačítko kliknout a je často zobrazeno jako zašedlé.
  • form - Element může být definován mimo formulář a následně být k tomuto formuláři připojen uvedením atributu form s hodnotou id formuláře. Element může patřit více formulářům.
  • formaction - Změní atribut action formuláře.
  • formenctype - Změna enctype.
  • formmethod - Změna method.
  • formnovalidate - Změna validate.
  • formtarget - Změna target.
  • name - Definuje jméno elementu.
  • type - Specifikuje typ tlačítka. Hodnota button (je výchozí pouze v některých prohlížečích) označuje obyčejné tlačítko. Jeho kliknutí zpracujeme např. JavaScriptem. Dále můžeme uvést typy submit a reset. Ty se používají v případě, když je element button součástí formuláře. Submit odešle hodnoty, reset vyčistí formulář.
  • value - Hodnota tlačítka, která se po kliknutí odešle.

Ukázka použití

<button type="button">Tlačítko</button>

Výsledek:

Ukázka použití HTML 5 tagu button k vložení klikatelného tlačítka

 

 

Manuál pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Všechny články v sekci
Formuláře - Český HTML 5 manuál
Aktivity (1)

 

 

Komentáře

Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:18.8.2012 15:29

když chci tlacitko jako odkaz tak :

<button type="button" onClick="window.location.replace('http://devbook.cz')">odkaz</button>
??
Odpovědět
18.8.2012 15:29
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
Drahomír Hanák:18.8.2012 15:39

Je lepší nastylovat si odkaz jako tlačítko. Takhle to nebudou vyhledávače brát jako odkaz. Navíc není dobré používat in-line zápis JS událostí. Ty binduj v externím souboru. Výjimka je AngularJS, kde existují speciální atributy a kde je celé HTML bráno jako šablona View.

 
Odpovědět
18.8.2012 15:39
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Drahomír Hanák
Daniel Vítek:18.8.2012 15:44

v tom tvém css3 tlačítkovači máš ale jako výchozí button....ještě jsem se chtěl zeptat ten kód z toho tlačítkovače mám změnit na a {.....} nebo na li {......} ?

Odpovědět
18.8.2012 15:44
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
Drahomír Hanák:18.8.2012 15:47

Button je tam proto, že je to Tlačítkovač :) Ten se hodí do formulářů. Pokud styluješ odkazy, stačí nahradit button { ... } za a { ... }

 
Odpovědět
18.8.2012 15:47
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Drahomír Hanák
Daniel Vítek:18.8.2012 15:54

ok dik :-)
ještě jeden dotaz ;-) ty děláš i grafiku ?

Odpovědět
18.8.2012 15:54
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
Drahomír Hanák:18.8.2012 15:55

Jen trochu. Grafika mi moc nejde, ale snažím se dělat pěkné weby.

 
Odpovědět
18.8.2012 15:55
Avatar
ondrasekno04
Člen
Avatar
ondrasekno04:9.2.2015 15:31

Jak se udělá odkazovací tlačítko ?
:-)
PS.: prosim , vysvetleni jako retardovy.

 
Odpovědět
9.2.2015 15:31
Avatar
ondrasekno04
Člen
Avatar
Odpovídá na ondrasekno04
ondrasekno04:9.2.2015 15:32

prominte . odpoved nalezena

 
Odpovědět
9.2.2015 15:32
Naši partneři možná hledají právě tebe!
Avatar
ondrasekno04
Člen
Avatar
ondrasekno04:9.2.2015 15:33
:-)
 
Odpovědět
9.2.2015 15:33
Avatar
ondrasekno04
Člen
Avatar
ondrasekno04:9.2.2015 15:34

A jak mu priradim nejakej styl ?

 
Odpovědět
9.2.2015 15:34
Avatar
Fredep
Redaktor
Avatar
Odpovídá na ondrasekno04
Fredep:9.2.2015 15:42

Normálně, jako kterémukoli jinému elementu...

button  {...}
.moje_tlacitko {...} // Pomocí class
Editováno 9.2.2015 15:43
 
Odpovědět
9.2.2015 15:42
Avatar
ondrasekno04
Člen
Avatar
Odpovídá na Fredep
ondrasekno04:9.2.2015 15:50

A v html mu při použití třídy přiřadím element class ? :-)

 
Odpovědět
9.2.2015 15:50
Avatar
Filip Stryk
Redaktor
Avatar
Odpovídá na ondrasekno04
Filip Stryk:9.2.2015 15:51

ano

<button class="trida"></button>
 
Odpovědět
9.2.2015 15:51
Avatar
Fredep
Redaktor
Avatar
Odpovídá na ondrasekno04
Fredep:9.2.2015 15:55

Ačkoli tlačítko vypadá odlišně, je sto stále ten stejný html element, kterému můžeš přiřazovat třídy, ID, můžeš na něj aplikovat jakékoli styly ap. :)

 
Odpovědět
9.2.2015 15:55
Avatar
ondrasekno04
Člen
Avatar
ondrasekno04:10.2.2015 13:39

Dík všem.

 
Odpovědět
10.2.2015 13:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 15 zpráv z 15.