September discount week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

button - Český HTML 5 manuál

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost 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

 

Všechny články v sekci
Formuláře - Český HTML 5 manuál
Článek 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 university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (1)

 

 

Komentáře

Avatar
Daniel Vítek
Redaktor
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
Redaktor
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
Redaktor
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
Redaktor
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
Redaktor
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
Redaktor
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost 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.