34
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[HTML] button要素をリンクにしたい[追記]

Last updated at Posted at 2016-02-08

W3Cの仕様では、
a要素の中に、インタラクティブコンテンツ(a要素やbutton要素など)を入れてはダメ
なのだそうです。

実はずっと誤解してました…。
次のようなトラブルに出くわして調べてみたらそういうことなのだそうです。
そのトラブルとは…。

#IE11でa要素の中のbutton要素が動作しない

動かなかったのは次のようなコード。

form内のa要素に囲まれたbutton
<!doctype html>
<form method="post" action="foo">
    <a href="bar><button type="button">戻る</button></a>
</form>

IE11以外では動作するのですが、IE11ではボタンが全く無反応になります。
Webで検索してみると、どうやらform要素の中にあるとダメなようです。

form外のa要素に囲まれたbutton
<!doctype html>
<a href="bar><button type="button">戻る</button></a>

このようにしたら動作しました。

が、さらに調べてみると前述のように a要素の中のbutton要素は御法度 とのこと。

#formのaction先以外にリンクしたい

でも、form要素のaction属性の先以外にリンクしたいボタンを作りたい場合どうすればいいのか。

##button要素のformaction属性

こんな属性があったのか!
恥ずかしながら全く知りませんでした。

この属性は、formのaction属性を上書きするもので、button要素毎に異なるaction先を指定できる、という便利な代物です。

具体的にはこんな感じになります。

button要素のformaction属性
<!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 では動かない!
くれぐれもご注意を。

34
44
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?