Webサイトでユーザーから情報を送信してもらうために使われるのが
フォーム（form） です。

ログイン画面、会員登録、アンケート、検索フォーム……
どれもすべて フォーム の仕組みで作られています。

この記事では、HTMLフォームの基本構造から
実際に使う入力欄（input）、チェックボックス、送信ボタンまで
わかりやすく解説していきます。

フォーム（form）の基本構造

HTML のフォームは <form>タグ を使って囲みます。

<form action="/send" method="post">
  <!-- 入力欄など -->
</form>

属性	説明
action	送信先のURL
method	送信方法（GET / POST）

初心者は深く考えすぎなくてOK！
今は「フォームから送った情報が action 先へ届く」と覚えれば十分です。

テキスト入力欄（input type=”text”）

最もよく使う入力欄です。

<label>名前：</label>
<input type="text" name="username">

表示例

名前：＿＿＿＿＿＿＿＿＿＿

name属性は必須！

<input type="text" name="username">

この name が実際の「データ名」 になります。
サーバー側はこの name を使って送られた値を取得します。

パスワード入力欄（input type=”password”）

入力した文字が「●●●」になるタイプ。

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

ログインフォームに必須。

チェックボックス（input type=”checkbox”）

複数選択を許可したいときに便利。

<label>
  <input type="checkbox" name="lang" value="Java">
  Java
</label>

<label>
  <input type="checkbox" name="lang" value="HTML">
  HTML
</label>

複数選んだ場合、サーバー側には 配列のように複数の値 が送信されます。

配列とは、複数のデータを順番に並べて格納したデータ構造のこと。
[“リンゴ”,”みかん”,”なし”,”ブドウ”]みたいな感じで格納されています。

今はふーんそんなのがあるのかぐらいでOKです！

ラジオボタン（input type=”radio”）

複数選択ではなく「1つだけ選んでほしい」場合はこちら。

<label>
  <input type="radio" name="gender" value="male">
  男性
</label>

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

name を同じにするのがルール

同じ name の選択肢は 1つだけ選べるグループ になります。

セレクトボックス（select）

「プルダウンメニュー」のこと。
クリックすると下に項目がざーっっとでてくるあれのことです。

<label>職業：</label>
<select name="job">
  <option value="engineer">エンジニア</option>
  <option value="designer">デザイナー</option>
  <option value="teacher">先生</option>
</select>

▶ 表示例

職業：[ エンジニア ▼ ]

テキストエリア（textarea）

複数行の入力欄を作りたいときに使います。

<label>自己紹介：</label>
<textarea name="profile" rows="4" cols="40"></textarea>

ブログのコメント、問い合わせフォームなどでよく使います。

送信ボタン（input type=”submit” / button）

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

またはボタンタグでもOK：

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

これをクリックすることでデータがサーバ側に送信されます。

<button>や<input>要素の中に書いてあるtype属性はさまざまで、
「submit」「password」「text」「date」「email」などなど。
記載する内容によって入力欄が変化するので、是非お試しください！

実際によくあるフォームを丸ごと作ってみる

ここまでの要素を集めて、
よくあるプロフィール登録フォーム を例として作ります。

<form action="/register" method="post">
  <label>名前：</label>
  <input type="text" name="username"><br><br>

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

  <label>好きな言語：</label><br>
  <label><input type="checkbox" name="lang" value="Java"> Java</label><br>
  <label><input type="checkbox" name="lang" value="HTML"> HTML</label><br>
  <label><input type="checkbox" name="lang" value="Python"> Python</label><br><br>

  <label>性別：</label><br>
  <label><input type="radio" name="gender" value="male"> 男性</label><br>
  <label><input type="radio" name="gender" value="female"> 女性</label><br><br>

  <label>職業：</label>
  <select name="job">
    <option value="engineer">エンジニア</option>
    <option value="designer">デザイナー</option>
    <option value="teacher">先生</option>
  </select><br><br>

  <label>自己紹介：</label><br>
  <textarea name="profile" rows="4" cols="40"></textarea><br><br>

  <button type="submit">登録する</button>
</form>

ちなみに今ののままでは、フォームの画面は出ますが入力してボタンを押しても登録できません。

こういった登録やデータを扱うためには、「HTMLやCSS」などのデザインを作っていく言語に対して、フォームの入力項目をきちんとデータベースに登録したりと、裏で行われている作業。バックエンド側の言語「Java」や「SQL」などの知識が必要になります。

フォームを書くときのコツ

最後に、現場でも役立つポイントを紹介します。

labelタグは必ず使う（クリックで入力欄がフォーカスされる）

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

アクセシビリティ（使いやすさ）が大幅に上がります。

name 属性はサーバー側に届く「変数名」

Java/Spring や PHP, Python のフォーム処理を書くと
name の重要性が実感できます。

初心者がよくやるミス：

✗ name を付けていない
✗ name がバラバラ
→ サーバーで値を受け取れない

CSS でフォームを整えると一気に“プロっぽい”見た目になる

このHTML/CSS入門シリーズでは、フォームをかっこよくする方法も紹介します。

CSSがあるのとないのとではぐっと雰囲気が変わるので、今すぐにでも！という方は

「登録フォーム　デザイン　かっこいい」などで検索けんさくぅ！！

まとめ

この記事では以下のフォーム要素を解説しました。

• テキスト・パスワード入力
• チェックボックス
• ラジオボタン
• セレクトボックス
• テキストエリア
• 送信ボタン
• form タグの仕組み

フォームが理解できると、
Webアプリの「入力画面」や「検索画面」を作る力が一気につきます。

ではでは！次回！：HTML/CSS入門⑥　セマンティックタグとは？正しいページ構造の作り方