formのsubmitが発生しないとき(button typeの違い)

最初に

なぜフォームを送信できないのですか？

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キーを押したんですが 全く動かなかったです。
エラーメッセージも表示しませんでした。

問題発見

まず一つで、私が見落としていたのは、ボタンのデフォルトタイプが「submit」だということでした。
そして、form要素内にbuttonが位置した時、タイプ指定がなければ
基本的にsubmit処理が行われるようになります。

ところが、最初にformが作動しなかった時から私が作成したformの内部にあるbuttonには
タイプがなく、念のためtypeを"submit"と指定したのにformは作動しませんでした。

ここで二番目に見落としていたのが、buttonのタイプである「button」は
それ自体では何のイベントも発生しませんが、clickイベントと繋げるろ
JavaScriptを有効にすることができるという点です。

buttonのタイプがsubmitだったのにformが作動しなかった理由は、
buttonにclickイベントをかけておきましたが、clickイベントはbuttonのタイプが"button"の時だけ発生するからです。
clickした時にイベントを発生させなければなりませんが、タイプは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"に変更したら、頂上的にformの作動がうまくなることを確認しました。

まとめ

buttonのデフォルトタイプは"submit"で、
form内部にボタンがあると、自動的に"submit"が設定されます。

クリックイベントを発生する時、buttonのタイプが"button"である必要があります。

form内部のbuttonタイプが「button」ではなく他のタイプであれば
クリックイベント文法で問題が発生するため、form自体が動作しません。