<form>外にある<button>タグに、type="button" 等は必須でしょうか？

Question

送信ではなくアクションを実行するためのボタンの<button>タグに、type="button"は必須ですか？

フォーム内にある場合ならtype="button"など指定がないとtype="submit"扱いとなってしまうので、何かアクションを実行させるためのボタンであれば必須だと思います。

けどフォーム外にある場合ならtype="button"は不要ではないかと思いました。（type="submit"扱いでも送信は発生しまいため）

そのあたり正式にはどうでしょうか？

<form>
  <!-- フォーム内なのでtype必須 -->
  <button type="button" class="action">アクション</button>
  <input type="checkbox" value="value">
  <button type="submit">送信</button>
</form>

<div>
  <!-- フォーム外なのでtype不要 -->
  <button class="action">アクション</button>
</div>

<script>
$('.action').click(function(){
  console.log('アクションの実行');
})
</script>

Answer 1

フォーム内なら必須でしょうが、外にあるときは不要ではないかと思いまして、

どこにあっても必須ではありません。type="submit"として扱われるだけです（HTML LS）。

Comments

[tarakorakko]

<form>外でアクションを実行したいだけのボタンの場合、でお聞きしたいです。その場合、デフォルト値であるtype="submit" は起こりませんから、type="button" の明示は不要だと思いませんか？

[maisumakun]

> その場合、デフォルト値であるtype="submit" は起こりませんから

とも限りません。form属性を使えば、<form>外にある<button>をtype=submitとして使うことも可能です。

[tarakorakko]

そうだったんですね。教えて頂いてよかったです。どうもありがとうございました。

Answer 2

正式には

この意図するところが不明ですが、属性には大抵それぞれ「デフォルト値」が設定されていて、htmlに明示がなければそのデフォルト値が有効となるだけの話です。

Comments

[tarakorakko]

<form>外でアクションを実行したいだけのボタンの場合、でお聞きしたいです。その場合、デフォルト値であるtype="submit" は起こりませんから、type="button" の明示は不要だと思いませんか？

[m.ts10806]

やってみてから質問してください。

[tarakorakko]

すごい性格してますね。

[m.ts10806]

意味がわかりません。
色々なパターンを試せば分かることですよね。なにも試さずただ赤の他人の意見を鵜呑みにできるほうが(特にエンジニアの)性格としてはおかしいのでは。
ドキュメントで確認できる事実以外は本当のことかどうかは結局自身で試さなければなりません。
手元で試すのが一番早く確実です。
試せない事情があるならそう書いてください。