コピペでOK！HTML入力フォームの基本タグ10選

「Webサイトに入力フォームを作りたい！」

そう思って、HTMLのコードを前に立ちすくんでしまったことはありませんか？
<form>、<input>、<label>…見慣れないタグがたくさん並んでいて、何が何だか分からない。そんな気持ち、よく分かります。

でも、安心してください。入力フォームは、いくつかの基本的なHTMLタグを組み合わせるだけで作ることができます。料理でいえば、包丁やまな板、鍋といった基本調理器具を覚えるようなものです。

この記事では、フォーム作成に必須のタグを10個に厳選し、それぞれの役割と使い方を初心者にもわかるように解説します。コードはすべてコピペで使えるようにしているので、読み進めながら実際に手を動かしてみてください。

この記事を読み終える頃には、あなたも自信を持って、オリジナルフォームの外側を作れるようになっているはずです。

さあ、一緒にフォーム作りの第一歩を踏み出しましょう！

フォームの土台となるタグ：<form>

まず、フォームを作る上で最も重要なのが<form>タグです。これは、入力フォーム全体の「箱」であり、ここに入力欄やボタンなどのパーツをすべて入れていきます。

<form>
</form>

この<form>タグには、フォームを機能させるために欠かせない2つの重要な属性があります。

action属性：データをどこに送るか
action属性には、ユーザーがフォームに入力したデータを送信する先のURLを指定します。通常は、サーバー側でデータを受け取って処理するプログラムのファイル名（例: send.php）を指定します。

<form action="send.php">
</form>

method属性：データをどう送るか
method属性には、データを送信する方法を指定します。主に「GET」と「POST」の2種類があります。

GET: データをURLの末尾に付加して送信します。簡単な検索フォームなどには使えますが、パスワードなどの機密情報がURLに表示されてしまうため、セキュリティ上の問題があります。
POST: データを非公開で送信します。個人情報やパスワードなど、機密情報を扱うフォームでは必ずmethod="post"を指定します。

特別な理由がない限り、method="post"を使うのが一般的だと覚えておけばOKです。

<form action="send.php" method="post">
</form>

フォームの主役！<input>タグとその仲間たち

<input>タグは、フォームの中で最も汎用性が高いタグです。type属性を使い分けることで、テキスト入力欄からチェックボックスまで、さまざまな形に変化します。

1. 1行のテキスト入力：<input type="text">
氏名やタイトルなど、短いテキストを入力させる際に使います。

<label for="name">お名前</label>
<input type="text" id="name" name="name">

2. メールアドレス：<input type="email">
メールアドレス専用の入力欄です。ブラウザが自動的に「@」が含まれているかなどをチェックしてくれるので、入力ミスを防ぐのに役立ちます。

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

3. パスワード：<input type="password">
入力した文字が「●」や「*」で表示されるため、画面をのぞき見されても内容がバレません。ログインフォームなどで必須のタグです。

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

4. 送信ボタン：<input type="submit">
フォームの送信を実行するボタンです。これをクリックすると、<form>タグのaction属性で指定された場所にデータが送信されます。

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

value属性でボタンに表示されるテキストを指定できます。

その他の主要な入力パーツ

<input>タグ以外にも、ユーザーの入力・選択を助ける便利なタグがたくさんあります。

5. 複数行のテキスト入力：<textarea>
問い合わせ内容やメッセージなど、長い文章を入力させたいときに使います。<input>タグとは違い、終了タグ</textarea>が必要です。

<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message"></textarea>

6. プルダウンメニュー：<select>と<option>
都道府県や年齢など、あらかじめ用意された選択肢の中から1つ選んでもらうときに使います。

<select>タグがメニュー全体のコンテナで、その中に<option>タグで選択肢を記述します。

<label for="prefecture">都道府県</label>
<select id="prefecture" name="prefecture">
  <option value="">選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="fukuoka">福岡県</option>
</select>

value属性には、選択されたときにサーバーに送る値を指定します。

7. ラジオボタン：<input type="radio">
複数の選択肢の中から、必ず1つだけを選ばせたいときに使います。

同じ選択肢グループの<input>タグには、すべて同じname属性を指定する必要があります。これにより、どれか1つを選ぶと、他の選択が自動的に解除されるようになります。

<p>性別</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>

8. チェックボックス：<input type="checkbox">
複数の選択肢の中から、複数選択できるようにしたいときに使います。

<p>興味のあること</p>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">スポーツ</label>

<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音楽</label>

フォームを使いやすくするタグ：<label>

ここまでのコードで、入力欄の横に「お名前」や「メールアドレス」といったテキストを添えていました。これは<label>タグで囲むことで、単なるテキストではなく、入力欄と関連付けられた見出しとして機能します。

<label>タグのfor属性の値と、入力欄のid属性の値を同じにすることで、次のようなメリットが生まれます。

テキストをクリックすると入力欄がアクティブになる
「お名前」という文字をクリックするだけで、対応する入力欄にカーソルが移動し、入力が始めやすくなります。
アクセシビリティの向上
スクリーンリーダー（画面読み上げソフト）を利用している方が、どの入力欄が何を意味するのかを正確に理解できるようになります。

<label>タグは、見落としがちですが、フォームの使いやすさを大きく左右する重要なタグです。ぜひ活用してください。

実践！コピペでOKなHTML入力フォーム

ここまでのタグをすべて組み合わせると、次のようなシンプルな入力フォームが完成します。

このコードをコピー＆ペーストして、拡張子.htmlで保存すれば、すぐにブラウザで確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>入力フォーム</title>
  <style>
    /* この部分は、フォームを少し見やすくするためのCSSです。 */
    /* コピペで一緒に使ってください。 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f4f7f6;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }
    .form-container {
      background-color: #ffffff;
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 500px;
    }
    h2 {
      text-align: center;
      color: #333;
      margin-bottom: 25px;
    }
    .form-group {
      margin-bottom: 20px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #555;
    }
    input[type="text"],
    input[type="email"],
    textarea,
    select {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      box-sizing: border-box;
      font-size: 16px;
    }
    textarea {
      resize: vertical;
      min-height: 120px;
    }
    .radio-group,
    .checkbox-group {
      margin-top: 10px;
    }
    .radio-group label,
    .checkbox-group label {
      display: inline-block;
      font-weight: normal;
      margin-right: 20px;
    }
    input[type="radio"],
    input[type="checkbox"] {
      margin-right: 5px;
    }
    .submit-btn {
      width: 100%;
      padding: 15px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .submit-btn:hover {
      background-color: #0056b3;
    }
    .privacy-policy {
      font-size: 14px;
      color: #777;
    }
  </style>
</head>
<body>

  <div class="form-container">
    <form action="send.php" method="post">
      <h2>お問い合わせフォーム</h2>

      <div class="form-group">
        <label for="name">お名前 <span style="color: red;">*</span></label>
        <input type="text" id="name" name="name" required>
      </div>

      <div class="form-group">
        <label for="email">メールアドレス <span style="color: red;">*</span></label>
        <input type="email" id="email" name="email" required>
      </div>

      <div class="form-group">
        <label for="subject">件名</label>
        <input type="text" id="subject" name="subject">
      </div>

      <div class="form-group">
        <label for="message">お問い合わせ内容 <span style="color: red;">*</span></label>
        <textarea id="message" name="message" required></textarea>
      </div>

      <div class="form-group">
        <label>性別</label>
        <div class="radio-group">
          <input type="radio" id="male" name="gender" value="male">
          <label for="male">男性</label>
          <input type="radio" id="female" name="gender" value="female">
          <label for="female">女性</label>
          <input type="radio" id="other" name="gender" value="other">
          <label for="other">その他</label>
        </div>
      </div>

      <div class="form-group">
        <label class="privacy-policy">
          <input type="checkbox" id="privacy" name="privacy_consent" value="agreed" required>
          プライバシーポリシーに同意する <span style="color: red;">*</span>
        </label>
      </div>

      <button type="submit" class="submit-btn">送信する</button>

    </form>
  </div>

</body>
</html>

送信されたデータ、どう受け取ればいいの？

さて、お疲れ様でした！これであなたは、HTMLを使って立派なフォームを作成できるようになりました。

でも、ここで一つの疑問が浮かんでくるかもしれません。

「このフォーム、送信ボタンを押したら、データはどこに行くの？」

実は、HTMLはフォームの「骨組み」を作ることはできますが、送信されたデータを受け取って処理する機能はありません。そのためには、サーバー側でPHPなどのプログラムを書いて、データをメールで自分宛てに送ったり、データベースに保存したりするバックエンドの知識が必要になります。

「せっかくフォームは作れたのに、それはちょっとハードルが高いな…」と感じた方も多いのではないでしょうか。

そんなときに便利なのが、フォームメーラーというサービスです。

■フォームメーラーを使えば、バックエンドの知識は不要！
フォームメーラーとは、HTMLやCSS、PHP、サーバーといった専門知識がなくても、誰でも簡単に入力フォームを作成・設置できる便利なツールです。

フォームメーラーは、直感的な操作ができる編集画面を提供しており、必要な項目をマウスで選んでいくだけで、プログラミング不要でフォームが完成します。

さらに、フォームメーラーには以下のような便利な機能が満載です。

サンクスメールの自動返信機能
フォームを送信してくれたユーザーに、自動的に完了メールを送ることができます。
回答率を上げるための入力補助機能
リアルタイムでの入力チェックや、入力フォームの離脱を防止する機能などが搭載。
回答の管理・集計
送信された回答は、管理画面で一覧表示されたり、CSVファイルでダウンロードできたりするため、データの管理や集計がとても簡単になります。

HTMLの基本を覚えながらフォームを作成するのも良いですが、短時間でフォームを作りたい場合には、フォームメーラーを使うのがおすすめです。

▼フォームメーラー
https://www.form-mailer.jp/