【HTML】フォームの基本を解説（フォームを作る基本タグ）

HTML(エイチティーエムエル)

2025.09.23

この記事は約6分で読めます。

Webサイトを作るとき、ユーザーから情報を入力してもらう仕組みとして欠かせないのが フォーム です。お問い合わせフォームや会員登録画面、検索ボックスなど、日常的に目にする機能はすべてフォームで作られています。この記事では、HTMLフォームの基本 を初心者向けに整理していきます。

フォームを作る基本タグ <form>
代表的な入力パーツ
送信ボタン
フォームの全体サンプル
まとめ

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

フォームは <form> タグを使って定義します。
ユーザーが入力した情報を送信する「枠」のような役割を持っています。

<form action="/submit" method="post">
  <!-- 入力パーツをここに書く -->
</form>

action … 入力データを送る先（サーバーのURL）
method … 送信方法（get または post）

代表的な入力パーツ

フォームの中には、さまざまな「入力フィールド」を配置できます。

1. テキスト入力

<label>名前: <input type="text" name="username"></label>

2. パスワード入力

<label>パスワード: <input type="password" name="password"></label>

3. ラジオボタン（1つだけ選択）

<p>性別:</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

性別:

男性女性

4. チェックボックス（複数選択可）

<p>好きな色:</p>
<label><input type="checkbox" name="color" value="red"> 赤</label>
<label><input type="checkbox" name="color" value="blue"> 青</label>
<label><input type="checkbox" name="color" value="green"> 緑</label>

好きな色:

赤青緑

5. セレクトボックス（プルダウン）

<label>出身地:
  <select name="prefecture">
    <option value="tokyo">東京</option>
    <option value="osaka">大阪</option>
    <option value="fukuoka">福岡</option>
  </select>
</label>

出身地:

6. 複数行入力（テキストエリア）

<label>ご意見:
  <textarea name="message" rows="4" cols="40"></textarea>
</label>

ご意見:

送信ボタン

フォームの最後には、送信ボタンを置きます。

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

フォームの全体サンプル

上で紹介した要素をまとめると、次のようなフォームになります。

<form action="/submit" method="post">
  <p><label>名前: <input type="text" name="username"></label></p>
  <p><label>パスワード: <input type="password" name="password"></label></p>

  <p>性別:
    <label><input type="radio" name="gender" value="male"> 男性</label>
    <label><input type="radio" name="gender" value="female"> 女性</label>
  </p>

  <p>好きな色:
    <label><input type="checkbox" name="color" value="red"> 赤</label>
    <label><input type="checkbox" name="color" value="blue"> 青</label>
    <label><input type="checkbox" name="color" value="green"> 緑</label>
  </p>

  <p><label>出身地:
    <select name="prefecture">
      <option value="tokyo">東京</option>
      <option value="osaka">大阪</option>
      <option value="fukuoka">福岡</option>
    </select>
  </label></p>

  <p><label>ご意見:<br>
    <textarea name="message" rows="4" cols="40"></textarea>
  </label></p>

  <p><input type="submit" value="送信"></p>
</form>