W3Cの仕様では、
a要素の中に、インタラクティブコンテンツ(a要素やbutton要素など)を入れてはダメ
なのだそうです。
実はずっと誤解してました…。
次のようなトラブルに出くわして調べてみたらそういうことなのだそうです。
そのトラブルとは…。
#IE11でa要素の中のbutton要素が動作しない
動かなかったのは次のようなコード。
<!doctype html>
<form method="post" action="foo">
<a href="bar><button type="button">戻る</button></a>
</form>
IE11以外では動作するのですが、IE11ではボタンが全く無反応になります。
Webで検索してみると、どうやらform要素の中にあるとダメなようです。
<!doctype html>
<a href="bar><button type="button">戻る</button></a>
このようにしたら動作しました。
が、さらに調べてみると前述のように a要素の中のbutton要素は御法度 とのこと。
#formのaction先以外にリンクしたい
でも、form要素のaction属性の先以外にリンクしたいボタンを作りたい場合どうすればいいのか。
##button要素のformaction属性
こんな属性があったのか!
恥ずかしながら全く知りませんでした。
この属性は、formのaction属性を上書きするもので、button要素毎に異なるaction先を指定できる、という便利な代物です。
具体的にはこんな感じになります。
<!doctype html>
<form method="post" action="foo">
<button>送信</button>
<button formaction="bar">戻る</button>
</form>
1つ目の「送信」ボタンは、formのaction属性で指定された foo にsubmitします。
2つ目の「戻る」ボタンは、formaction属性で指定された bar にsubmitします。
#その他のformxxxx属性
ほかにも formmethod
formtarget
formenctype
など、form要素での指定を上書きする属性があります。(※参考)
#[追記]
せっかく凄く便利なbutton要素属性を見つけたと思ったのですが、なんと 〜IE10 では動かない!
くれぐれもご注意を。