フォーム

フォームは、ユーザーからの入力を収集し、サーバーに送信して処理するための重要なツール。 さまざまなフォーム要素で構成されており、ユーザーがデータを入力できる。なお、本コースでは追加の知識が必要となるため、サーバーへのデータ送信は扱わない。

すべてのコード例には属性 onsubmit="return false" が付与されている。この属性により、フォームがデフォルトでサーバーにリクエストを送信しないようになる。

フォームの作成

<form> タグを使用してインタラクティブなフォームを作成。

<form>
  <!-- Form elements go here -->
</form>

フォーム要素

フォームにはラベルやさまざまな入力タイプ（テキスト、パスワード、メールなど）が含まれます。ラベルはテキストと入力欄を関連付け、アクセシビリティを向上させます。ラベルや入力タイプについては、次の章でさらに詳しく学びます。

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
</form>

フォーム送信

フォームは type="submit" のボタンで送信されます。

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Your username" />
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="********" />
  <button type="submit">Submit</button>
</form>

こちらが基本的なフォームの例です。