【HTML】input要素のtype属性を使い分ける方法｜フォームの作り方を解説

入力フォームを作るとき、文字を入れる欄も、チェックボックスも、日付の入力欄も、すべて <input> という1つのタグで作れます。その見た目や役割を切り替えているのが type 属性です。この記事では、text や email、checkbox といった代表的な type の使い分けを、実際に動くデモつきで解説します。HTML を学び始めた方が、フォーム部品をひと通り作れるようになることを目指します。

input 要素と type 属性の関係

<input> は、フォームでユーザーが値を入力するための部品を作るタグです。1行のテキスト欄、チェックボックス、ラジオボタン、ファイル選択など、見た目も役割もまったく違う部品が、すべてこの <input> から作られます。

その「どんな部品にするか」を決めるのが type 属性です。たとえば type="text" なら1行のテキスト欄、type="checkbox" ならチェックボックスになります。type を省略すると text として扱われますが、内容に合った type を指定することで、ブラウザが入力チェックやスマホ向けのキーボード切り替えを自動で行ってくれます。

基本の書き方は次のとおりです。<input> は閉じタグが不要な「空要素」である点に注意してください。

<!-- type でテキスト欄になる -->
<input type="text" name="username">

<!-- type でチェックボックスになる -->
<input type="checkbox" name="agree">

代表的な type 属性の一覧

まずは、よく使う type の値と用途を一覧で確認しましょう。email や tel などは、スマホで表示したときに入力内容に合ったキーボードが出る点もポイントです。

いろいろな type を並べて表示してみよう

言葉だけではイメージしづらいので、実際に並べてみましょう。下のデモには、ここまで紹介した type をひと通り並べています。プレビュー内で値を入力したり、チェックを付けたり、カラーピッカーを開いたりして、見た目や挙動の違いを確かめてみてください。

<form class="demo-form">
  <div class="field">
    <label for="name">お名前（text）</label>
    <input type="text" id="name" name="name" placeholder="山田 太郎">
  </div>

  <div class="field">
    <label for="email">メールアドレス（email）</label>
    <input type="email" id="email" name="email" placeholder="example@webool.net" required>
  </div>

  <div class="field">
    <label for="password">パスワード（password）</label>
    <input type="password" id="password" name="password" placeholder="••••••••">
  </div>

  <div class="field">
    <label for="age">年齢（number）</label>
    <input type="number" id="age" name="age" min="0" max="120" placeholder="20">
  </div>

  <div class="field">
    <label for="tel">電話番号（tel）</label>
    <input type="tel" id="tel" name="tel" placeholder="090-1234-5678">
  </div>

  <div class="field">
    <label for="site">ウェブサイト（url）</label>
    <input type="url" id="site" name="site" placeholder="https://webool.net">
  </div>

  <div class="field">
    <label for="birthday">生年月日（date）</label>
    <input type="date" id="birthday" name="birthday">
  </div>

  <div class="field">
    <label for="volume">音量（range）</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50">
  </div>

  <div class="field">
    <label for="theme">テーマカラー（color）</label>
    <input type="color" id="theme" name="theme" value="#4f46e5">
  </div>

  <div class="field">
    <label for="avatar">ファイル（file）</label>
    <input type="file" id="avatar" name="avatar">
  </div>

  <fieldset class="field">
    <legend>会員プラン（radio）</legend>
    <label><input type="radio" name="plan" value="free" checked> 無料</label>
    <label><input type="radio" name="plan" value="pro"> 有料</label>
  </fieldset>

  <div class="field check">
    <label><input type="checkbox" name="agree" value="yes"> 利用規約に同意する（checkbox）</label>
  </div>

  <button type="submit">送信</button>
</form>

body {
  margin: 0;
  font-family: sans-serif;
  color: #333;
  background: #f7f7fb;
}

.demo-form {
  max-width: 360px;
  margin: 0 auto;
  padding: 20px;
}

.field {
  margin-bottom: 16px;
}

.field > label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

input[type="range"],
input[type="color"] {
  width: 100%;
}

fieldset.field {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
}

fieldset.field legend {
  font-size: 14px;
  font-weight: bold;
  padding: 0 4px;
}

fieldset.field label,
.check label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
  margin-right: 12px;
  font-size: 14px;
}

button[type="submit"] {
  width: 100%;
  padding: 10px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

label と input を紐付ける

フォームを作るときは、入力欄が何の項目なのかを示す <label> をセットで用意します。<label> の for 属性に、対応する <input> の id と同じ値を指定すると、両者が紐付きます。

<!-- for と id を同じ値にする -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

紐付けておくと、ラベルの文字をクリックしただけで入力欄にフォーカスが移ります。チェックボックスやラジオボタンでは、ラベルをクリックしてオン/オフを切り替えられるようになるため、操作がぐっと楽になります。スクリーンリーダーが項目名を読み上げられるようにもなるので、アクセシビリティの面でも重要です。<label><input ...> メール</label> のように <input> をラベルで囲む書き方でも紐付けできます。

checkbox と radio は name と value がポイント

テキスト系の type と違い、checkbox と radio は name と value の付け方でつまずきやすい部品です。ここは少し丁寧に押さえておきましょう。

radio は同じ name でグループにする

radio は「複数の選択肢から1つだけ選ぶ」ための部品です。1つだけ選べるようにするには、選択肢どうしを同じ name でまとめる必要があります。name が同じものが1つのグループとして扱われ、その中では常に1つしか選べなくなります。逆に name がバラバラだと、それぞれが独立してしまい、複数選べてしまうので注意してください。

<!-- name を "plan" でそろえて1つのグループにする -->
<label><input type="radio" name="plan" value="free"> 無料</label>
<label><input type="radio" name="plan" value="pro"> 有料</label>

value で「どれを選んだか」を送る

checkbox や radio は、画面に表示される文字ではなく、value に書いた値がサーバーへ送られます。上の例で「有料」を選んで送信すると、サーバーには plan=pro という形で届きます。value を書き忘れると、選んでいてもサーバー側で内容を判別できないため、それぞれに分かりやすい value を必ず指定しましょう。最初からオンにしておきたい項目には、checked を付けておきます。

type を取り違えるとモバイルで使いにくくなる

どの type でも文字は入力できるため、すべて text で済ませてしまうこともできます。しかし、内容に合った type を選ばないと、特にスマホでの使い勝手が大きく下がります。

たとえばメールアドレスの欄を type="text" にすると、スマホでは通常の文字キーボードが開き、@ を探して入力する手間がかかります。type="email" にしておけば @ がすぐ押せるキーボードが表示されます。同じく電話番号を type="tel"、数値を type="number" にすると、数字向けのキーボードが出て入力がスムーズになります。見た目はあまり変わらなくても、モバイルでの入力体験に差が出るため、入力する内容に合った type を選ぶことを意識しましょう。

required や placeholder でひと工夫

type とあわせて覚えておきたい属性に、required と placeholder があります。どちらも多くの type で共通して使えます。

required を付けると「入力必須」になり、未入力のまま送信しようとするとブラウザが警告を出して送信を止めてくれます。placeholder は入力欄に薄い文字で表示される入力例で、placeholder="example@webool.net" のように書きます。ただし placeholder は入力を始めると消えてしまうため、項目名の代わりにはなりません。項目名は必ず <label> で示し、placeholder はあくまで補助として使うのがおすすめです。

まとめ

<input> は type 属性を変えるだけで、テキスト欄からチェックボックス、日付ピッカーまで、さまざまなフォーム部品を作れます。

• 入力する内容に合った type を選ぶ（モバイルのキーボードや入力チェックが変わる）
• <label> の for と <input> の id を合わせて紐付ける
• checkbox / radio は name でグループ化し、value で値を送る

まずは身近なフォームを思い浮かべ、それぞれの欄にどの type がふさわしいかを考えてみると、使い分けが身につきやすくなります。

参考リンク

• <input>: 入力欄（フォーム入力）要素 – MDN
• <label>: ラベル要素 – MDN