【フロントエンド入門3】フォーム要素の基本｜ユーザー入力を受け取るHTMLフォームの使い方

2025.02.08

Webページでユーザーから情報を受け取るために使われるのがHTMLのフォーム要素です。登録フォームや検索フォームなど、あらゆるサイトで使われる基本的な技術です。この記事では、フォーム要素の基本構造から使い方までを解説していきます。

HTMLフォームの基本構造

基本的な構造例

フォームは<form>要素を使用して実装します。基本的な構造例を下記に示します。

<form action="submit_form.php" method="post">
    <label for="username">ユーザー名：</label>
    <input type="text" id="username" name="username" required>

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

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

定義法のポイント

  • <form>：フォーム全体を包む要素で、フォームの処理先をaction属性に記述します。また、method属性には「GET」か「POST」を指定し、情報送信の方法を記事します。GETはURLにパラメータを上位表示し、POSTは上位に表示せず背景で送信します。
  • <label>：フォーム要素に関連ずけるラベルを指定します。このラベルをクリックすると、連動する入力要素にキーボードフォーカスが移動します。
  • <input>：ユーザーから情報を受け取るフィールド要素です。type属性によってテキストボックスやパスワードフィールドなどを指定します。
  • <input required>：必須入力を指定することで、フォームを送信する前にフィールドが空白でないようにします。

主要なフォーム入力要素

テキストボックス (<input type="text">)

テキストボックスは、ユーザーから単一行の文字を受け取るために使われます。たとえば、名前やユーザー名を入力させたいときに便利です。

例

<label for="name">名前：</label>
<input type="text" id="name" name="name" placeholder="名前をご記入ください" required>
  • placeholder属性：フィールドに要求される入力値のヒントを指示します。

パスワードボックス (<input type="password">)

パスワードを入力させるために使われ、入力した文字がマスク・シンボルで表示されます。この要素はログインフォームに必須です。

例

<label for="password">パスワード：</label>
<input type="password" id="password" name="password" minlength="8" placeholder="8文字以上のパスワード" required>
  • minlength属性：入力されるテキストの最小文字数を指定します。

メールボックス (<input type="email">)

メールアドレスを入力するフィールドです。この要素は、ブラウザー自身によるバリデーションを持ち、正しいメール形式かどうかを確認します。

例

<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email" placeholder="example@example.com" required>

ラジオボタン (単選挙ボタン) (<input type="radio">)

ラジオボタンは、一些の選択肢の中からどれか一つだけを選択させたいときに使用します。たとえば性別の選択などが主な例です。

例

<p>性別：</p>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">女</label>
  • グループ化：複数の選択肢がある場合は、同じname値を付与して、一回のみ選択可能にします。

チェックボックス (<input type="checkbox">)

複数選択肢からいくつかを選択できる場合に使用します。たとえば興味がある分野や、親愛のジャンルを選ぶ場面で便利です。

例

<p>興味がある分野：</p>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">プログラミング</label>
<input type="checkbox" id="design" name="interest" value="design">
<label for="design">デザイン</label>

テキストエリア (<textarea>)

複数行のテキストを入力させたい場合に使います。たとえばコメントや評価を取得したい場面で便利です。

例

<label for="message">メッセージ：</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="ご意見をご記入ください"></textarea>
  • rows と cols：テキストエリアのサイズを行と列で指定します。

セレクトボックス (<select>)

複数の選択肢の中から一つを選ぶ際に使われます。プルダウンメニュー形式で表示されるため、フォームをスッキリとまとめることができます。

例

<label for="options">選択肢：</label>
<select id="options" name="options">
    <option value="option1">選択肢1</option>
    <option value="option2">選択肢2</option>
    <option value="option3">選択肢3</option>
</select>
  • <option>要素：セレクトボックス内の各選択肢を指定します。

ファイル入力フィールド (<input type="file">)

ユーザーにファイルを選択させ、サーバーにアップロードするための入力フィールドです。

例

<label for="file">ファイルを選択：</label>
<input type="file" id="file" name="file">
  • ファイル選択：画像やドキュメントなどのファイルアップロードが可能です。

送信ボタン (<input type="submit">)

フォームの入力情報をサーバーに送信するために使われます。

例

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

リセットボタン (<input type="reset">)

フォームの入力内容を初期状態にリセットするボタンです。

例

<input type="reset" value="リセット">

隠しフィールド (<input type="hidden">)

ユーザーには見えない情報をフォームに含めて送信するために使われます。たとえば、セッション情報やトークンなどに利用されます。

例

<input type="hidden" name="token" value="123456">

結論

HTMLフォームは、Webページのユーザーインタラクションにおいて重要な要素です。ここで解説した基本タグを理解し、実際にフォームを構築することで、ユーザーから有用な情報を安全に受け取ることが可能になります。これらの知識を応用し、より複雑なフォームを構築してみましょう。