基本知識

【HTML基礎講座 第7回】入力フォームの基本：ユーザーとデータをやり取りする仕組み

HTML基礎講座 全10回（第7回）

入力フォームの基本：ユーザーとデータをやり取りする仕組み

第7回では、問い合わせやユーザー登録に必須となる「入力フォーム」の作り方を基礎から学習します。form要素の目的、input、textarea、labelの記述法を整理しましょう。

📌 講座ロードマップ一覧（クリックで移動）

1. formタグの役割：何のために囲むのか？

ユーザーが入力したデータ（テキスト、チェック状態など）をサーバーへまとめて送信するためには、フォームを構成するすべての部品を form要素で囲む必要があります。

formタグには、送信先を指定する `action` 属性と、送信方法（GET/POSTなど）を指定する `method` 属性を設定するのが一般的です。

HTMLコード 
<form action="send.php" method="POST">
    <!-- ここに様々な入力部品を配置します -->
</form>

2. inputタグと主要なtype属性の種類

最も頻繁に用いられるのが input要素 です。これも終了タグのない「空要素」で、`type` 属性の値を変更するだけで、全く異なる入力部品へと変化します。

⌨️ 主要な input type 属性一覧

  • type=”text”: 1行の自由テキスト入力欄（名前、住所など）。
  • type=”email”: メールアドレス専用入力欄。簡易な形式エラーチェックが自動で効きます。
  • type=”password”: パスワード入力欄。入力された文字が「●」などで非表示になります。
  • type=”radio”: ラジオボタン。複数の中から「1つだけ」を選択させます。※共通の `name` 属性を指定してグループ化する必要があります。
  • type=”checkbox”: チェックボックス。複数の中から「複数選択」を許可します。
  • type=”submit”: 送信ボタン。クリックするとformに設定されたデータを送信します。

3. 使いやすさを決める label タグの役割と紐付け方法

入力欄の横にある「お名前」や「同意する」といったテキストは、必ず label要素 を使って入力部品と紐付けます。

紐付けには、inputタグに付与した `id` と、labelタグの `for` 属性の値を一致させる方法が最も標準的です。

HTMLコード 
<!-- id と for 属性を一致させて紐付ける -->
<label for="user-name">お名前：</label>
<input type="text" id="user-name" name="username">

💡 なぜlabelで紐づけるのか？

・クリック領域の拡大: ラジオボタンやチェックボックスは非常に小さくクリックしづらいですが、labelで紐づけることで、横にある説明テキスト（文字）をクリックしてもボタンを選択できるようになり、操作性が劇的に向上します。
・音声読み上げへの配慮: スクリーンリーダー等の音声読み上げソフトが、現在入力しているフォームエリアが何の項目であるかを正しく読み上げられるようになります。

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

テキスト入力、メールアドレス、複数行入力（textarea）、チェックボックス、および送信ボタンを備えた実用的なフォームです。

form-sample.html 
<form action="post.php" method="POST">
    <div>
        <label for="name">お名前：</label>
        <input type="text" id="name" name="username">
    </div>

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

    <div>
        <label for="msg">お問い合わせ内容：</label>
        <!-- 複数行テキストエリアは textarea タグを使用します -->
        <textarea id="msg" name="message" rows="5"></textarea>
    </div>

    <button type="submit">送信する</button>
</form>
✍️ 第7回 理解度チェック（問題）

1つの質問に対して「複数の選択肢から1つだけ選ばせたい」場合、inputタグのtype属性値として最も適切なものはどれでしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

入力フォームの基本部品と構造化の方法を学びました。適切なtype属性の選択と、labelによる親切なコーディングを心がけましょう。

次回（第8回）は、「検索エンジンやブラウザに論理構造を伝える セマンティックHTMLと基本レイアウト」をテーマに、最新のHTML5マークアップを体系的に学習します！

📖 HTMLの基礎を全10回でマスターする

🔑 第7回 理解度チェックの解答と解説

【解説】

正解は `radio` (ラジオボタン) です。なお、グループ内で1つだけしか選択できないようにするために、各項目に対して共通の `name` 属性（例: `name=”gender”` など）を指定する必要があります。複数選択をさせたい場合は `checkbox` を使用します。

関連記事