私の入力とボタンをフォームに置くか?

これは、私が今週発見しようとしているのを見つけたものです.

集合
入力要素とボタンがあります.入力を入力し、ボタンを押すと、入力したものを使用してAPIからデータを取得します.さて、それは最終的に、今のところちょうどコンソールログの少しをします.
HTML

<input>
<button class="button">Submit</button>

js

const button = document.querySelector('.button')
button.addEventListener('click', function() {
  console.log('button clicked');
})

Test this code in CodePen

形式とは
フォームを使用してデータを送信します.したがって、例えば、会社があなたに連絡するように、ウェブサイトにあなたの名前と電子メールアドレスを記入してください.フォームが提出されると、それはどこかに行き、何かをします.
この例では、データをどこかで送信していません.また、送信されたことを確認するためのメッセージをユーザーに与えていません.ですから、フォームとボタンをフォームに置く必要はありません.なぜなら、これはフォームのことをしていないからです.

形式を使わない問題
私は私のEventListenerをテストしたかったので、私は何かを入力し、私はキーボード上のEnterキーを押すと、同じように任意のウェブサイト上で設定を見た場合、私はするでしょう.何も起こらなかった.私が実際にボタンをクリックしたとき、それは私にコンソールログを与えました.
これが意味をなす:イベントリスナーは、入力されたボタンがクリックされているのを聞いている.入力がフォーカスされたときに入力されたキーは押されない.
多分、あなたは自動的にちょうどボタンをクリックする人の種類です.しかし、あなたが入力を終えたとき、あなたが入力を押す人の種類であるならば、あなたはボタンをクリックするか、サイトが壊れていると仮定すると思いますか?

フォームソリューション
このあたりの方法があります-入力で押されたEnterキーを聞くことができますが、それは痛みです、それから、あなたは押されている特定のキーで何かをしなければなりません.また、ボタンをクリックして聞いてください.
解決策は、全体をフォームに入れて、代わりに提出されるフォームを聞きます.
HTML

<form class="form">
  <input>
  <button type="submit" class="button">Submit</button>
</form>

js

const form = document.querySelector('.form')
form.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log('button clicked');
})

Test this code in CodePen
入力ボックスにEnterキーを押すと、ボタンをクリックしたように動作します.
また、そこに余分な行を追加しました.

e.preventDefault();

これは、フォームがどこかに行きたいので、必要ですが、同じページに滞在したい.PreventDefault ()は、デフォルトのフォームアクションを行わないように指示します.

アクセシビリティ
読みやすさのために、私は入力要素にどんな特質も含めませんでした.ラベルも含めなかった.ラベルはアクセシビリティのための良いアイデアです