HTMLでのフォームの作り方を完全解説！基本タグの種類からCSSでの整え方まで

はじめに

「サイトにお問い合わせフォームを作りたいけれど、どのタグを使えばいいのか分からない」「HTMLで入力画面を作る基本を知りたい」とお悩みではありませんか？Webサイトにおいて、ユーザーとの接点となるフォームは非常に重要な要素です。

本記事では、HTMLのformタグを中心に、inputやtextareaといった必須パーツの書き方を初心者向けに分かりやすく解説します。具体的なサンプルコードも用意しているので、コピー＆ペーストしてすぐに自分のサイトで試すことが可能です。正しいマークアップを学んで、ユーザーが使いやすい本格的なフォームを完成させましょう。

HTMLフォーム作成の基本｜formタグの役割と構成

Webサイトにおける「フォーム」とは、ユーザーが入力した情報をサーバーへ送信するための仕組みを指します。その土台となるのが <form>タグです。ここでは、フォームを構築する上で欠かせない基本的な構造について解説します。

フォームの土台を作るformタグ

HTMLでフォームを作成する際、すべての入力パーツは<form>と</form>の間に記述する必要があります。このタグには、入力されたデータを「どこへ」「どのように」送るかを指定する重要な属性があります。

• action属性：データの送信先となるURL（プログラムファイルなど）を指定します。
• method属性：データの送信方式を指定します。一般的には「GET」か「POST」のいずれかを使用します。

<form action="データの送信先となるURL" method="データの送信方式">
  <input type="text" name="user_name" />

  <button type="submit">送信</button>
</form>

お問い合わせフォームのように、名前やメールアドレスを扱う場合は、セキュリティの観点から必ず「POST」を選択してください。

入力項目をグループ化する

複数の入力項目がある場合、それらを意味のあるまとまりごとにグループ化することで、ユーザーにとってもプログラムにとっても分かりやすい構造になります。そこで活用するのが<fieldset>タグと<legend>タグです。

• <fieldset>：関連する入力項目を線で囲み、グループ化します。
• <legend>：<fieldset>の最初の子要素として記述し、そのグループの見出し（タイトル）を表示します。

これにより、スクリーンリーダーを利用する視覚障害者の方にも情報の区切りが正確に伝わるようになり、アクセシビリティが向上します。

よく使う入力パーツの種類と書き方

フォームを構成する部品は、ユーザーがどのような情報を入力するかによって適切に使い分ける必要があります。

inputタグのtype属性について

<input>タグは、type属性の値を変更するだけで、多様な入力形式を表現できます。主なtypeの種類と使い方は以下の通りです。

checkboxとradioの使い分け

初心者が一番ミスをしやすいポイントは、選択ボタンの使い分けです。

• チェックボックス（checkbox）：複数の選択肢から0個以上を選べる。「興味のある分野」など複数回答可の項目に使用します。
• ラジオボタン（radio）：複数の選択肢から必ず1つだけ選ぶ。「性別」「希望の連絡方法」など単一回答の項目に使用します。

同じグループのラジオボタンは、name属性に同じ値を設定することで1つしか選択できない動作になります。

長文入力に使うtextarea

1行では収まりきらない「お問い合わせ内容」や「備考欄」には、<textarea>タグを使用します。

• <textarea>：rows属性で縦の行数、cols属性で横の文字数を指定できます。

ドロップダウンリスト

• <select>と<option>：ドロップダウンリストを作成します。都道府県の選択など、限られた選択肢から選ばせる場合に最適です。

ユーザビリティを高めるlabelタグとplaceholder設定

ただ入力欄を並べるだけでは、使いやすいフォームとは言えません。利便性を高めるための工夫を施しましょう。

labelタグの正しい使い方

<label>タグは、入力項目が「何の項目なのか」を定義します。単にテキストを横に置くのではなく、タグ同士を関連付けることが重要です。

• 関連付けの方法：<label>のfor属性と、<input>のid属性に同じ値を指定します。

これにより、ラベルのテキストをクリックした際にも入力欄にフォーカスが当たるようになり、操作性が格段に向上します。

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

入力を補助するplaceholder属性

placeholder属性は、入力欄の中に薄いグレーの文字で表示されるヒントテキストです。

<input type="text" placeholder="例：山田 太郎" />

ユーザーにどのような形式で入力してほしいかを直感的に伝えることができます。ただし、入力が始まると消えてしまうため、補足説明は別途テキストで記述するのが親切な設計です。

お問い合わせフォームのHTMLサンプルコード

これまで解説した要素を組み合わせた、実践的なコードを紹介します。

標準的なお問い合わせフォームの記述例

以下のコードは、実務で頻繁に使用される構成を再現したものです。

<form action="confirm.php" method="post">
  <fieldset>
    <legend>お問い合わせ入力</legend>
    <div>
      <label for="user_name">お名前：</label>
      <input type="text" id="user_name" name="user_name" required />
    </div>
    <div>
      <label for="user_email">メールアドレス：</label>
      <input type="email" id="user_email" name="user_email" required />
    </div>
    <div>
      <label for="contact_type">お問い合わせ項目：</label>
      <select id="contact_type" name="contact_type">
        <option value="service">サービスについて</option>
        <option value="recruit">採用について</option>
        <option value="other">その他</option>
      </select>
    </div>
    <div>
      <label for="message">内容：</label>
      <textarea id="message" name="message" rows="5"></textarea>
    </div>
    <button type="submit">送信する</button>
  </fieldset>
</form>

必須入力やメール形式チェックを行うHTML5バリデーション

JavaScriptを使わなくても、HTML5の標準機能だけで「入力チェック（バリデーション）」が可能です。

主なバリデーション属性は以下の通りです。

• required：入力必須の項目に設定します。未入力のまま送信しようとするとブラウザがエラーを表示します。
• type="email"：メール形式（@を含む形式）以外の入力があった場合に警告を表示します。
• minlength / maxlength：入力文字数の最小値・最大値を指定できます。

これらを活用することで、ユーザーの誤入力をその場で防ぎ、サーバー側の負担も軽減できます。

フォームをきれいに整えるCSSデザインのポイント

HTMLで構造を作った後は、CSSで視認性を向上させましょう。

各入力パーツの幅や余白の調整

デフォルトの入力欄は小さく、押しにくい場合があります。以下のポイントを意識しましょう。

• display: flex;：ラベルと入力欄を綺麗に並べることで、スマートフォンでも見やすくなります。
• padding：入力欄の中に余白を持たせることで、文字が詰まって見えるのを防ぎます。
• box-sizing: border-box;：パディングを含めたサイズ計算に設定し、レイアウト崩れを防ぎます。

スマホへの対応（レスポンシブ）

現代のWebサイトでは、スマートフォン対応が必須です。

• width：スマホでは入力欄の幅を画面いっぱいに広げることで、押しやすさを確保します。
• font-size：iOS端末では、フォントサイズが16px未満だとフォーカス時に自動ズームが発生します。これを防ぐために、最低16px以上を確保するのがセオリーです。

まとめ

本記事では、HTMLを用いたフォーム作成の基本から、実践的なサンプルコード、そしてデザインのポイントまでを網羅的に解説しました。フォームはユーザーとのコミュニケーションを支える重要なパーツです。適切なタグ選びやアクセシビリティへの配慮が、最終的なコンバージョン率（成約率） に大きく影響します。

まずは基本となるform、input、labelの役割を正しく理解し、ユーザーにとってストレスのないフォーム構築を目指しましょう。

さらに、実践的なWeb制作スキルを体系的に学べるWEBMASTERSの活用もおすすめです。基礎を一から学び、誰もが使いやすいフォームを作りましょう。