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属性が送信されるのは無駄です。