Značka <button>

HTML značka <button> slouží k vytvoření tlačítka. Je hodně podobná značce <input> s atributem type nastaveným na button, submit nebo reset — <button> má tyto typy stejné.

Typický zápis:

<button type="submit" name="tlacitko" value="hodnota">
  Text tlačítka
<button>

Element <button> jde docela dobře stylovat.

Použít <input>, nebo <button>?

Podstatný rozdíl mezi značkami je, kromě různých druhů (<input> je povinně nepárový, <button> povinně párový), že do značky <button> je možné umístit další HTML kód.

Internet Explorer

Ve starších versích IE nebo i v novějších v QUIRK režimu se kolem značky <button> točí řada rozdílů.

Více odesílacích tlačítek

V IE 6 a starších se při použití více <button> tlačítek neodešle jen to, na které bylo kliknuto, ale úplně všechna <button> tlačítka.

Po odeslání se v IE 6 v URL objeví …&vysledek=Ano&vysledek=Ne, ačkoliv se zmáčklo jen jedno tlačítko.

Obsah značky místo value

Další nepěkná věc je, že starší IE odesílá jako hodnotu políčka obsah mezi <button> a </button> místo atributu value, který má značka nastavený.

Tlačítko Odeslat má value nastavenou na Ano, přesto se v IE 7 a starších (v QUIRKu do IE 9 včetně) odešle obsah značky, tj. Odeslat (JavaScriptovou terminologií innerHTML).

Neodeslaní bez kliknutí

Další problém je neodeslání tlačítka v případě, kde se formulář odešle Enterem z jiného políčka. Tím trpí IE 8 a starší (nezávisle na <!doctype>).

Co s tím?

• Nepoužívat ve formulářích <button>, ale <input> s odpovídajícím typem.

• Zpracovávat formuláře na straně serveru tak, aby podoba, ve které se <button> odešle, nehrála roli. Tj. zda byl formulář odeslán testovat jiným políčkem. (Případně si potřebná data, která by mohl odesílat <button> uložit do <input type=hidden> — ten funguje spolehlivě.