buttonタグなんか知らんかったよ

というタグは、見たことあった。が、なんかおかしいことに今日気がついた。

そう、いつもフォームの中に作る「ボタン」は、inputタグで作っていたんだった。buttonタグなんて昔からあったっけ。最近出てくるようになったのか？ともかく、自分の中ではけっこう長いことbuttonタグがinputタグに勝手に脳内変換されていたことが判明。ちょっとショック。

最近触ったHTMLでbuttonが出てきて、そのボタンのテキストが、タグの「中」に書かれてた。

<button type="button" onclick="foo();">うにゃうにゃ</button>

という感じで。
あれー、ボタンに表示されるテキストって value の属性で指定してたよなー、とか思ってたんだがスルーしていた。そのとき気づけよと。

Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities:

ということで、inputタグだとただのテキストかただの画像かどちらかしか使えなかったのが、buttonではHTMLが書けてリッチなボタンを作れると。

こーいう場合にbuttonの方がいいと思うもののまとめ。

1. アイコンとテキストをまとめて「ボタン」にするようなとき。
   画像もテキストもまとめて1つの「ボタン」に簡単にできる。
   （使える環境の人しか確認できないけどサイボウズで使われている。）
2. 同じフォームで複数のボタンがあって、押すボタンによって機能を変えるようなとき。
   こういうときinputのnameを同じにして、押されたほうのボタンの送信される値によってサーバ側で処理を分けるけど、inputタグだと、valueの値が、ボタンのテキストと実際に送信されるvalueとが同じなので、日本語のvalueのときにサーバ側でエンコーディングの問題が出たりした。buttonだと、ボタンのテキストと実際に送信されるvalueが別なので、扱いがかんたん。

とか、書いていたら、http://www.ne.jp/asahi/hp/syow-yow/note0034.htmlという記事が。やっぱりオチはIEか。2は無理だな。