20
16

More than 5 years have passed since last update.

HTMLボタンを押したら遷移する

Posted at

HTMLボタンを押したら遷移する

4月で新人さんが入ってきているのと、化石のような書き方(*無駄なonclick)を見てクラっときたため、遷移ボタンについて残しておきます。
IE11/Chrome/Firefoxでの動作は確認しました(2019/04現在)。
caniuse.comでも大丈夫そうです。

遷移だけする(フォームは送信しない)

<a href="(URL)">
    <button type="button">(テキスト)</button>
</a>

メリット:
・マウスオーバーで遷移するURLがわかる
デメリット:
・aタグにあてたCSSが干渉する可能性がある

フォームを送信して遷移する

<button type="submit" formaction="(URL A)" name="button_a" >(テキスト)</button>
<button type="submit" formaction="(URL B)" name="button_b">(テキスト)</button>

メリット:
・送信ボタンごとに押した遷移先がHTML側で変えられる。

<form method="post" id="(フォームID)">
    <input type="text" name="" value="my data"/>
</form>
<p>くぁwせdrftgyふじこlp</p>
<button type="submit" formaction="(URL A)" form="(フォームID)">(テキストA)</button>
<button type="submit" formaction="(URL B)" form="(フォームID)">(テキストB)</button>

メリット:
・form属性をbuttonタグに入れると、formの外にボタンが定義できる。

今どきやめようぜ

<button type="button" onclick="location.href='(URL)'">(テキスト)</button>
<input type="submit" value="(テキスト)">

・HTMLにJavaScriptを書くのは基本的にやめましょう。バグ調査で時間ロスするかもしれません。
・ボタンテキスト表示のために入れたのvalue属性が送信されるのは無駄です。

20
16
0

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
20
16