概要

<form> は、ユーザーからデータを入力させ、そのデータをサーバーや他のプログラムに送信するための フォームのコンテナです。 入力欄やボタンなど、フォーム要素をまとめる役割を持っています。

基本的な使い方

See the Pen <span>タグについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="送信">
</form>

上記例では、action 属性で送信先URLを指定し、method 属性で送信方法（GETまたはPOST）を設定しています。

出力される内容の例

<form action="/submit" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="送信">
</form>

役割とメリット（定義リスト形式）

データ送信の枠組み

ユーザーが入力したデータをまとめ、指定先に送信できます。

入力要素の管理

複数の入力欄やボタンを論理的にまとめて扱うことができます。

送信方法の選択

GET または POST により、用途に応じた送信方法を設定できます。

拡張性

JavaScriptやCSSと組み合わせて、バリデーションやデザイン調整が柔軟に行えます。

注意点

• action 属性の指定がない場合、現在のページにデータが送信されます。
• method="get" の場合、データがURLに表示されるため、機密情報の送信には適しません。
• <form> 内のIDやname属性は一意にし、管理しやすくしましょう。

まとめ

<form> は、ユーザー入力を集めて送信するための必須タグです。 用途に応じて method や action を適切に設定し、JavaScriptやCSSと連携させることで、 機能的で使いやすいフォームを作成できます。