HTML学習 第7回：フォーム基礎と入力しやすいレイアウト

1. フォームの基本構造

フォームは、基本的に次のようなタグで構成されています。

• <form>：フォーム全体を囲むタグ
• <label>：入力欄の「見出し」になるラベル
• <input>：1行の入力欄やチェックボックスなど
• <textarea>：複数行の入力欄
• <select>：プルダウンメニュー
• <button>：送信ボタン など

このページでは、「問い合わせフォーム」をイメージしたサンプルを作ってみます。

2. 問い合わせフォームのサンプル

下に、よくある問い合わせフォームの例を用意しました。
送信ボタンを押しても、実際にはどこにも送信されない「学習用サンプル」です。

実際にメールを送信したり、データを保存したりするには、PHP などのサーバーサイドの仕組みが必要になります。
このページでは、まずは「フォームの見た目と構造」を理解することを目標にしましょう。

3. 入力しやすいフォームレイアウトのポイント

1つの行に「ラベル → 入力欄」をまとめる

<label> を使って、何を入力する欄なのかを分かりやすく表示します。

スマホでは、ラベルと入力欄を縦に並べることで、読みやすく・タップしやすくなります。

必須項目を分かりやすく表示する

このサンプルでは、「※必須」という表示を <span class="required"> で付けています。

入力のヒントを small で補足する

入力欄の下に <small> で例や注意を書いておくと、ユーザーに親切です。

4. 広告枠の例

フォームのページにも、関連するアフィリエイト広告を配置することができます。

入力フォームより目立ちすぎない位置やデザインに調整することも大切です。