なぜTIL-<翻訳>HTML button tagにtype属性を入れるのか

入る前に。

この位置付けはhttps://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9に翻訳された位置付けである.誤訳や意訳があるかもしれません.この部分を教えてくれれば、訂正します.👩🏻‍💻🌟.
original source of this posting is from https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9 If the original author requests deletion, it will be deleted immediately.
Jiwon Han翻訳(韓智苑)

- https://velog.io/@geeonie
- https://github.com/geeonie

Spoiler

buttonにタイプがない場合はtype=「submit」として操作され、クリック時にフォームデータをコミットしようとします.button、submit、resetタイプを割り当てると、コードの意図がより明確になり、他の人もコードをよりよく理解することができます.

Button basics

<button>Press me</button> 

上記のコードは有効なHTMLであり、W 3 c markup検証サービス(Web標準検証)を介しています.ただし、buttonには常にtypeプロパティを含めることをお勧めします.typeプロパティが含まれていない場合、button behaviorが潜在的に混同される可能性があります.

タイプ属性値

Buttonでは、typeというオプションのプロパティを使用して、その用途を明確にし、次の3つの値を書き込むことができます.
1.submit
2.button
3.reset

"submit"

<button type=“submit”>Press me</button>

このボタンはフォームデータを送信します.Submitボタンは通常フォームに含まれて使用されます.

"button"

<button type=“button”>Press me</button>

このボタンにはdefault動作はありません.「JavaScriptとして」ボタンをクリックすると、実行するアクションを定義する必要があります.

"reset"

<button type=“reset”>Press me</button>

このボタンはフォームに含まれており、クリックするとフォームを初期値にリセットします.

no type

<button>Press me</button>

typeプロパティのないボタンはsubmitボタンと同じように動作します.このボタンをクリックしてもHTMLを使用しないと、潜在的なエラーが発生する可能性があります.

Button types in action

次のgifは簡単なformを示しています.onsubmitイベントをフォームのコミット時にページの背景色を変更するように設定することで、JavaScriptを使用してonsubmitイベントを検出できます.formには、前述した各buttonタイプが含まれ、タイプ名がマークされています.

各ボタンをクリックして、次の操作を行います.
.submit-typeボタンフォームを送信し、背景色を変更します.
.button-type buttonも予想通りに動作しません.
.上のフォームにはフォーム入力がないため、resetボタンは機能しません.これも予想通りでした.
.no typeボタンでフォームと背景色が変更されます.これを予想していましたが、他の3つのボタンに比べて直感的ではないかもしれません.

なぜtype属性を明確にするのですか?

1) Clear definition of what the button does

buttonにtype属性がない場合、その使い方は明確ではありません.ボタン提出フォームは当然と思われるかもしれませんが、良い開発者はメンテナンス性と読み取り性を考慮する必要があります.typeプロパティを追加すると、ボタンの用途を迅速かつ簡単に決定できます.

2) Avoid bugs

「フォームに関係のないボタンをクリックするとsubmitになるのはなぜですか?」
👉 form dataをコミットまたはリセットしないすべてのボタンにbutton typeプロパティを付与します.
上記の方法でコードを改良すれば、同じ問題は二度と発生しない.buttonの基本動作がsubmitであることを知っていれば、上記の提案は全く必要ありません.しかし、私を含むすべての人はそうではありません.😅 だからボタンのタイプを明らかにする必要があるのではないでしょうか.
Inspired by wtfhtmlcss .