こんにちは！駆け出しエンジニアとして現在フロントエンドについて理解を深めている私ですが、先日Reactの勉強をしていた際にふと思ったことをまとめてみました。

詰まったところ

Reduxを使ってステート管理をしていたところ、ステートの更新に伴った再レンダリングが行われず、頭を抱えました。ほぼ同じ実装のコンポーネントはしっかりと動いていたのに。ステートって更新されたら基本再レンダリングじゃないの...？

React×Readuxの再レンダリングの仕組みをしっかりと理解できていないのかと思いましたが、まさかのformタグのname要素の付け忘れによるものでした。

そこで、そんなにname要素って重要なの？っていう疑問が湧いたので調べてみました！

tl;dr

HTMLでフォームを作成してデータをどこかに送信したいときは、ほぼ確実に必要と言えるでしょう！

本題

では、本題に入っていきます。

name属性なし

例えば以下のコードでフォームを実装したとします。

<form action="#" method="POST">
  <label for="name">名前: </label>
  <input type="text" id="name" required />

  <label for="email">メールアドレス: </label>
  <input type="email" id="email" required />

  <input type="submit" value="登録" />
</form>

inputタグにtypeを指定しています。一見よさそうに見えますが、inputタグで受けとったデータはどこに行ってしまうのでしょうか？

以下のようにリクエストのペイロードが生成されずに正常にデータが送信できていないことがわかります。

name属性あり

では、name属性を付与するとどうなるか見てみます。

<form action="#" method="POST">
  <label for="name">名前: </label>
  <input type="text" name="name" id="name" required />

  <label for="email">メールアドレス: </label>
  <input type="email" name="email" id="email" required />

  <input type="submit" value="登録" />
</form>

すると、先ほどは存在しなかったペイロードが生成されリクエストが無事に送信できていることがわかります。
POSTリクエストでデータを送信する際は特別な理由がない限り、name属性は必要であるということがわかりました！

結論

name属性あり	name属性なし
ペイロードが送信される	送信できない

ご覧いただきありがとうございました！！！

次回はGETメソッドについて同じような比較を行っていきたいと思いますっ！