まさまさのガジェット発見ラボ

【第5回】フォーム入門｜type 属性を制するものは、フォームを制す

2026.03.05

まさまさ

前回、type="radio" とか色々出てきたけど、種類が多すぎてパニックだよ……。

サポちゃ

大丈夫。実はこの type 属性こそが、フォームの「命」なんだ。
「何をいれる場所か」を正しく指定するだけで、使い心地が劇的に変わるんだよ。

type 属性は「入力モード」の切り替えスイッチ

サポちゃ

サポちゃ

input タグは、例えるなら「魔法の箱」なんだ。
そのままではただの箱だけど、type という命令を入れることで、文字を入れる箱になったり、カレンダーになったり、ボタンになったり姿を変えるんだよ。

まさまさ

なるほど、中身（属性値）を変えるだけで変身するんだね！

これが基本の「型」です

まずはこの1行の形をセットとして覚えましょう。

<input type="属性の種類" id="名前" name="名前" required>

【保存版】type属性の書き換え・活用一覧表

一番左の「型」のコードをコピーして、必要に合わせて type や name の中身を書き換えて使ってください。

項目	実際に書くコード（このまま使えます）	調節・設定の意味（役割）	使うとどうなる？（メリット）
1行入力	`<input type="text" id="nm" name="user_name" required>`	`type="text"`：普通の文字モード	お名前や住所など、汎用的に使えます。
パスワード	`<input type="password" id="pw" name="pass" required>`	`type="password"`：隠し文字モード	入力中、文字が「●●●」と伏せ字になります。
メール	`<input type="email" id="ml" name="email" required>`	`type="email"`：メアド確認モード	「@」がないと送信時にエラーを出してくれます。
電話番号	`<input type="tel" id="tl" name="tel">`	`type="tel"`：電話番号モード	スマホで最初から数字キーボードが開きます。
数字のみ	`<input type="number" id="nb" name="count">`	`type="number"`：数値専用モード	数字以外打てなくなり、横に小さな上下ボタンが出ます。
日付選択	`<input type="date" id="dt" name="day">`	`type="date"`：カレンダーモード	日付をポチポチとカレンダーから選べるようになります。
チェック	`<input type="checkbox" id="ck" name="hobby">`	`type="checkbox"`：複数選択モード	四角い箱が出て、複数の項目にチェックを入れられます。
ラジオ	`<input type="radio" id="rd" name="gender">`	`type="radio"`：1つだけ選択モード	丸いボタンが出て、グループの中から1つだけ選べます。

スマホで体験！type を変えるとどうなる？

まさまさ

さっき表にあった「スマホで数字が出る」ってどういうこと？

サポちゃ

これが「親切なフォーム」の最大のコツだよ。
例えば、電話番号を入力したいのに、スマホで「あいうえお」のキーボードが出たら、数字に切り替えるのが面倒だよね？

type="tel" や type="number" を使うだけで、スマホ側が気を利かせて「はい、数字の入力ですね！」と専用のキーボードを出してくれるんだ。

まさまさ

たった数文字のコードで、ユーザーの「面倒くさい」を解決できるんだね。

今回の練習コード

前回のコードに、新しい type を追加してみましょう。

HTML

<div class="contact-wrapper">
  <form action="#" method="POST">
    <div class="field-group">
      <label for="pass">パスワード</label>
      <input type="password" id="pass" name="pass" placeholder="秘密の文字">
    </div>

    <div class="field-group">
      <label for="tel">電話番号</label>
      <input type="tel" id="tel" name="tel" placeholder="09012345678">
    </div>

    <div class="field-group">
      <h3>希望日</h3>
      <input type="date" id="date" name="date">
    </div>

    <button type="submit" class="btn-submit">送信する</button>
  </form>
</div>

まさまさ

おぉ！カレンダーまで出せるなんて、プロっぽくなってきた！

サポちゃ

「type 属性を制するものは、フォームを制す」。
これは、使う人の「入力しやすさ」をコントロールできるからなんだね。

まさまさ

でもサポちゃ、サイト乗っ取られたとか聞いたことあるけど、もし悪意のある人がこのフォームに攻撃コードを書き込んで送信したら、サイトが乗っ取られたりしない？怖いから、展示用のコードから type="submit" の部分を抜いちゃったよ……。

サポちゃ

その危機管理能力、満点だよ！でも安心して。HTMLはあくまで「見た目」だけ。例えるなら、「手紙を投函するポスト」を置いているだけなんだ。ポストに何を入れても、それを回収して処理する「郵便局（裏側のプログラム）」がなければ、何も起きないんだ。今のコードは「どこにも送らない設定（action="#"）」だから、爆弾を投げ込まれても爆発しないから大丈夫だよ。

まさまさ

そっか！「ポスト（HTML）」と「郵便局（プログラム）」は別物なんだね。