HTML入門：ユーザーの入力を受け取ろう！ウェブフォームの基本

ウェブフォームは、ウェブサイトでユーザーから情報を収集するための重要なツールです。この記事では、フォームを作成する<form>タグと、情報をサーバーに送信するためのGETとPOSTメソッドの基本について説明します。

ウェブフォームって何？

ウェブフォームは、ウェブサイト上でユーザーから情報を受け取るための便利な方法です。例えば、お問い合わせフォームや、サインアップフォームなどがあります。

フォームを作る：<form>タグ

フォームを作成するには、<form>タグを使います。このタグで囲まれた範囲が、フォームの領域となります。

基本構造

<form action="データを送信するURL" method="GETまたはPOST">
  <!-- フォーム要素（入力フィールドなど） -->
</form>

• action：フォームのデータを送信する先のURLを指定します。
• method：データの送信方法（GETかPOST）を指定します。

データの送信方法：GET vs POST

GETメソッド

• データがURLの一部として送信されます（例：example.com/form?name=太郎&age=20）。
• 短いデータ送信や、データを暗号化する必要がない検索などに適しています。
• URLにデータが表示されるため、パスワードなどの機密情報の送信には向きません。

POSTメソッド

• データがHTTPリクエストのボディに含まれて送信されます。
• 大量のデータ送信や、機密情報を送信する場合に適しています。
• データはURLに表示されず、より安全にデータを送信できます。

例：お問い合わせフォーム

<form action="/submit_form" method="POST">
  <label for="name">名前：</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="送信">
</form>

この例では、ユーザーが名前とメールアドレスを入力できるシンプルなお問い合わせフォームを作成しています。POSTメソッドを使ってデータを安全に送信します。

まとめ

<form>タグを使ってフォームを作り、GETかPOSTメソッドでデータを送信する方法を学びました。これで、あなたもウェブサイトにフォームを追加して、ユーザーからの情報を受け取ることができますよ！