HTMLフォームとは？

HTML フォーム要素：プログラミング初心者でも分かる解説

目次

1. フォームとは？
2. フォーム要素の種類 2.1 <form> 要素 2.2 入力要素 2.2.1 テキスト入力：<input type="text"> 2.2.2 パスワード入力：<input type="password"> 2.2.3 チェックボックス：<input type="checkbox"> 2.2.4 ラジオボタン：<input type="radio"> 2.2.5 プルダウンメニュー：<select> 2.2.6 送信ボタン：<input type="submit"> 2.2.7 リセットボタン：<input type="reset">
3. フォームの送信方法 3.1 GET メソッド 3.2 POST メソッド
4. コード例
5. まとめ

フォームとは？

HTMLフォームは、ユーザーから情報を入力・送信するための領域です。アンケート、注文、ログインなど、様々な場面で使用されます。

フォーム要素の種類

フォームは、複数の要素で構成されます。主な要素は以下の通りです。

1 <form> 要素

フォーム全体の開始と終了を指定します。

<form action="送信先URL" method="送信方法">
  ... フォーム要素 ...
</form>

属性

• action: 送信先のURL
• method: 送信方法 (GET/POST)

2 入力要素

ユーザーが入力する情報の種類に応じて、様々な入力要素があります。

1 テキスト入力：<input type="text">

1行のテキスト入力を可能にします。

<input type="text" name="名前" placeholder="名前を入力">

属性

• name: 送信時に使用する名前
• placeholder: 入力欄に表示される説明文

2 パスワード入力：<input type="password">

パスワードなど、秘密の情報を隠して入力できるようにします。

<input type="password" name="パスワード" placeholder="パスワードを入力">

3 チェックボックス：<input type="checkbox">

複数選択可能な項目を表します。

<input type="checkbox" name="趣味" value="読書"> 読書
<input type="checkbox" name="趣味" value="映画鑑賞"> 映画鑑賞

属性

• value: 送信される値

4 ラジオボタン：<input type="radio">

複数選択項目から1つだけを選択できるようにします。

<input type="radio" name="性別" value="男性"> 男性
<input type="radio" name="性別" value="女性"> 女性

5 プルダウンメニュー：<select>

選択肢から1つを選択できるようにします。

<select name="国">
  <option value="日本">日本</option>
  <option value="アメリカ">アメリカ</option>
  <option value="中国">中国</option>
</select>

オプション要素

• <option>: 選択肢

6 送信ボタン：<input type="submit">

フォームを送信します。

<input type="submit" value="送信">

属性

• value: ボタンに表示される文字

7 リセットボタン：<input type="reset">

フォームに入力された内容をクリアします。

<input type="reset" value="リセット">

フォームの送信方法

フォーム送信には、GETとPOSTの2つの方法があります。

1 GET メソッド

URLにパラメータとして情報をエンコードして送信します。

<form action="送信先URL.php?param1=value1&param2=value2" method="get">
  ... フォーム要素 ...
</form>

HTML フォームサンプルコード集

<form action="送信先URL.php" method="post">
  <p>氏名:</p>
  <input type="text" name="氏名" placeholder="氏名を入力">
  <p>メールアドレス:</p>
  <input type="text" name="メールアドレス" placeholder="メールアドレスを入力">
  <p>お問い合わせ内容:</p>
  <textarea name="お問い合わせ内容" placeholder="お問い合わせ内容を入力"></textarea>
  <input type="submit" value="送信">
</form>

ログインフォーム

<form action="ログイン処理.php" method="post">
  <p>ユーザー名:</p>
  <input type="text" name="ユーザー名" placeholder="ユーザー名を入力">
  <p>パスワード:</p>
  <input type="password" name="パスワード" placeholder="パスワードを入力">
  <input type="submit" value="ログイン">
</form>

アンケートフォーム

<form action="アンケート結果.php" method="post">
  <p>あなたの性別は？</p>
  <input type="radio" name="性別" value="男性"> 男性
  <input type="radio" name="性別" value="女性"> 女性
  <p>趣味は何ですか？</p>
  <input type="checkbox" name="趣味[]" value="読書"> 読書
  <input type="checkbox" name="趣味[]" value="映画鑑賞"> 映画鑑賞
  <input type="checkbox" name="趣味[]" value="音楽鑑賞"> 音楽鑑賞
  <input type="submit" value="送信">
</form>

商品購入フォーム

<form action="購入処理.php" method="post">
  <p>商品名:</p>
  <select name="商品名">
    <option value="商品1">商品1</option>
    <option value="商品2">商品2</option>
    <option value="商品3">商品3</option>
  </select>
  <p>数量:</p>
  <input type="number" name="数量" value="1">
  <input type="submit" value="購入">
</form>

ファイルアップロードフォーム

<form action="アップロード処理.php" method="post" enctype="multipart/form-data">
  <p>ファイルを選択:</p>
  <input type="file" name="アップロードファイル">
  <input type="submit" value="アップロード">
</form>

これらのサンプルコードは、フォームの基本的な使い方を理解するのに役立ちます。必要に応じて、デザインや機能をカスタマイズすることができます。

フォーム送信のその他の方法

JavaScriptを使用して、AJAX通信でフォームを送信することができます。これは、ページ全体をリロードせずに、サーバーと通信できるため、ユーザーエクスペリエンスを向上させることができます。

PHPなどのサーバーサイド言語を使用して、フォームデータを処理することができます。

フレームを使用して、フォームを別のページに送信することができます。

画像の src 属性にフォームデータを含めることで、画像を介してフォームを送信することができます。

それぞれの方法のメリットとデメリット

フォーム送信方法を選択する際には、以下の点を考慮する必要があります。

• 送信したい情報量
• セキュリティ要件
• ユーザーエクスペリエンス
• 開発者のスキル

これらの点を考慮した上で、最も適切な方法を選択してください。