formのsubmitが発生しない場合(サブタイトル:button typeの違い)

なぜformを転送できないのですか?
todo listを最適化した.
新しい記事をinputに追加するkeyupイベントの関数を実行します.
formを飛ばすことで改善してみましょう.

        <footer>
            <form action="" class="new-form">
                <input type="text" class="footer--input">
                <button class="footer--button">
                    <i class="fa fa-solid fa-pen"></i>
                </button>
            </form>
        </footer>

成功すると思い、Enterキーを強く押しました.
全く物音もなく、エラーメッセージもありません.
最初はサーバーに問題があると思っていたが、サーバーの電源が切れて電源が入ったが、少しも消息がなかった.
何か間違いを感じたが、何が間違っているのかは感じなかった.
「formイベント発生」「formsubmitイベント」「formイベント存在しない」など...
form要素の問題だと思っていました.
form要素内にボタンのタイプが指定されていないためかもしれません.
ボタンタイプは「submit」で指定されていますが、変更はありません.
もう少し範囲を広げて、「formとbutton」でグーグルに来てみましょう
buttonラベルの仕事に関するまとめ記事を見つけました.

問題を発見!
まず私が無視したのは
buttonのデフォルトタイプは「submit」です.
またbuttonがform要素内にある場合にタイプ宣言がない場合、
基本的にsubmit処理が発生します.
ただし、最初のformが起動していないときから
私が作成したフォーム内のボタンにはタイプがありません.
typeはsubmitと名付けられていますが、フォームは実行されません.
ここで2回目に無視したのは.
buttonのタイプ「button」自体ではイベントは発生しません.
JavaScriptは、clickイベントに関連付けてアクティブにできます.
buttonのタイプはsubmitですが、フォームが機能しない理由は
buttonでclickイベントを掛けました.
clickイベントはbuttonのタイプがbuttonの場合にのみ発生するためです.
クリックするとイベントを励起する必要がありますが、タイプはsubmitです.
これはもちろん正常に働かない原因です.

<footer>
            <form action="" class="new-form">
                <input type="text" class="footer--input">
                <button class="footer--button" type="button">
                    <i class="fa fa-solid fa-pen"></i>
                </button>
            </form>
        </footer>

ボタンタイプをbuttonに変更し、フォームが正常に動作していることを確認します.
私はずっとこの話題を討論しています.私はいつも感じることができますが.
正解を知っていると空っぽになるので、基本功が一番です.
整理すると、

buttonのデフォルトタイプは「submit」です.
フォーム内にボタンがある場合は、自動的にsubmitが設定されます.

clickイベントが発生した場合、buttonのタイプは「button」でなければなりません.

form内部のbuttonタイプが「button」でない場合、
イベント構文をクリックして問題が発生し、フォーム自体が動作しません.