HTMLのinputタグとは？type属性の種類・name・valueの書き方を初心者向けに解説

2026年8月24日2026年9月22日

HTMLで入力フォームを作り始めると、<input>に付けるtype・name・valueの違いが分からず、手が止まりやすいものです。入力欄は表示できても、「どの値が送られるのか」「idとnameは両方必要なのか」と迷う方も多いでしょう。

inputタグは、type属性で入力の種類を決め、name属性で送信データの項目名を付け、value属性で初期値または送信値を指定します。type・name・valueを分けて考えると、複雑に見えるフォームも読み解きやすくなります。

この記事では、HTMLの基本的なタグを書いたことがある方に向けて、22種類のtypeと属性の使い分けを整理します。最後に、1つのHTMLファイルで入力・選択と送信対象のデータを確認します。フォームの部品を表示するだけでなく、「どの項目名で、どの値を扱うか」まで説明できるようになりましょう。

この記事で分かること

inputタグの役割と基本構文
type属性22種類の違いと選び方
name・value・id・placeholderの役割
チェックボックスやラジオボタンが送る値
手元で試せる練習コードと、間違いを直す手掛かり

inputタグとは？入力・選択・送信の部品を作るHTMLタグ

<input>は、ユーザーからデータを受け取るフォーム部品を作るHTMLタグです。テキスト入力欄だけでなく、チェックボックス、日付選択、ファイル選択、送信ボタンなども作れます。MDNのinput要素リファレンスでは、type属性の値によって動作が大きく変わる要素として定義されています。

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

この例では、type="text"が1行の文字入力欄を作り、name="user_name"が送信時の項目名になります。HTMLタグそのものに慣れていない場合は、先にHTMLタグの基本と書き方を確認すると、開始タグと属性の関係を整理しやすくなります。

inputタグに終了タグはない

inputタグは、要素の中に文章や子要素を持たない空要素です。そのため、終了タグは書きません。

<!-- 正しい -->
<input type="email" name="email">

<!-- 書かない -->
<input type="email" name="email"></input>

type属性で同じinputタグの役割が変わる

同じ<input>でも、type属性を変えるとブラウザーに表示される部品や利用できる入力支援が変わります。まずは、文字入力・選択・操作という3つの役割に分けると全体像をつかみやすくなります。

たとえばemailはメールアドレス向け、radioは候補から1つ選ぶ用途、submitはフォームを送信する用途です。見た目だけを基準にせず、入力してほしいデータと操作の目的からtypeを決めます。

HOAI Point

inputは「何を入力するか」からtypeを選ぶのが基本です。適切なtypeを使うと、スマートフォンのキーボード、入力候補、ブラウザーの検証などを活用できます。

inputタグの基本的な書き方

実際のフォームでは、inputタグを単独で置くのではなく、入力項目の名前を示す<label>と組み合わせます。

<label for="user-name">お名前</label>
<input
  type="text"
  id="user-name"
  name="user_name"
  autocomplete="name"
  required
>

基本例に出てくる属性

属性	役割	この例での値
type	入力欄の種類を決める	text
id	ページ内でinputを識別する	user-name
name	送信データの項目名を付ける	user_name
autocomplete	自動入力の対象を伝える	name

表の4属性に加え、requiredはこの名前欄を必須入力にします。何も入力せず送信しようとすると、ブラウザーが入力を促します。autocomplete="name"は氏名の自動入力に使うヒントで、実際の候補表示はブラウザーや保存済み情報によって変わります。

labelのforとinputのidを同じ値にすると、ラベルをクリックしても入力欄へフォーカスできます。MDNのlabel要素リファレンスでも、ラベルとフォーム部品を明示的に関連付ける方法として案内されています。

idはページ内の関連付けに使い、nameは送信データに使います。似た文字列にしても構いませんが、役割は別です。

labelのforとinputのidをuser-nameで一致させると、お名前のラベルから入力欄へフォーカスできる

type属性の種類は22個｜目的別の選び方

inputタグのtype属性には22種類があります。すべてを一度に暗記する必要はありません。まず次の10種類から用途に合うものを探し、残りは必要になったときに確認しましょう。日付や時刻などの選択画面は、ブラウザーや端末によって見た目・対応状況が異なります。

type属性を省略した場合や、ブラウザーが認識できない値を指定した場合は、基本的にtextとして扱われます。省略時の既定値はtextですが、コードの意図を明確にするため、通常はtype="text"まで書きましょう。

よく使う10種類

typeの値	主な用途	入力・表示の例
text	名前、件名など1行の文字	山田太郎
email	メールアドレス	name@example.com
password	画面上で伏せる文字列	●●●●●●
tel	電話番号	090-1234-5678
number	個数、年齢など増減できる数量	3
date	年月日	2026-08-24
checkbox	0個以上を選ぶ項目、同意	□ メールを受け取る
radio	同じグループから1つ選ぶ項目	○ メール
file	ファイルを選ぶ	画像を選択
submit	フォームを送信する	送信する

入力したいデータからtypeを選ぶ

迷ったときは、受け取りたいデータを「文字」「数量」「日時」「選択」「操作」に分け、上の表と照らし合わせます。

同じ数字に見えても、個数のように増減する数量ならnumber、電話番号ならtel、会員番号のような識別用文字列ならtextが適します。日付にはdate、複数候補から1つだけ選ぶ場合はradioを使います。

必要に応じて使う12種類

typeの値	主な用途	覚えておく点
search	サイト内検索など	検索用の1行入力
url	URL	URL形式の検証対象になる
time	時刻	時刻選択UIを利用できる
month	年と月	日を含めず月まで選ぶ
week	年と週	週単位で選ぶ
datetime-local	現地の日時	タイムゾーン情報を含まない
range	範囲内の概算値	スライダーで選ぶ
color	色	カラーピッカーを開く
hidden	画面に出さない固定値	秘密情報の保存には使わない
button	任意の処理を起動	JavaScriptなどと組み合わせる
reset	初期状態へ戻す	誤操作を招くため用途を慎重に選ぶ
image	画像の送信ボタン	画像URLと代替テキストが必要

電話番号にnumberを使わない

電話番号は数字だけに見えますが、計算する数量ではありません。ハイフン、国番号の+、先頭の0を扱うため、type="tel"を使います。telはスマートフォンで電話番号向けキーボードを出しやすい一方、世界共通の電話番号形式を自動検証するわけではありません。

HOAI Point

電話番号は数値ではなく文字列として扱うのが安全です。numberは個数や金額など、増減や大小比較をする数量に使います。

name属性とは？送信データの項目名を決める

name属性は、フォームを送信するときの「項目名」です。入力された値は、基本的にname=valueの組み合わせとして送られます。

<input type="text" name="user_name" value="Taro">

初期値のTaroを変更せず送信した場合、項目名と値の組は次の形です。ここでいうname=valueの右側は、送信時点で入力欄に入っている値を指します。

user_name=Taro

ブラウザーはフォーム内の送信対象を集め、サーバーへ渡します。詳しい流れはMDNのフォームデータの送信でも、名前と値の組として説明されています。

nameがないと値を受け取れない

<!-- 画面には表示されるが、通常のフォームデータに項目名がない -->
<input type="email" id="email">

idだけでは送信用の項目名になりません。nameがない入力値は通常のフォーム送信に含まれません。サーバーで受け取りたいinputには、用途が分かるnameを付けます。

<input type="email" id="email" name="email">

value属性とは？初期値と送信値を指定する

value属性の役割は、typeによって変わります。文字入力では初期値、チェックボックスやラジオボタンでは選択時に送る値、送信ボタンではボタンに表示する文字になります。

typeのグループ	valueの役割	例
text・email・telなど	最初に入力欄へ入れておく値	`value="Taro"`
checkbox・radio	選択されたときに送る値	`value="email"`
submit・button	ボタンに表示する文字	`value="送信する"`
hidden	画面に出さず送る固定値	`value="contact"`

文字入力のvalueは初期値

<input type="text" name="user_name" value="Taro">

最初はTaroが入っています。入力欄をHanakoへ書き換えて送信すると、送信対象はuser_name=Hanakoになります。文字入力では、HTMLに書いたvalue="Taro"は初期値です。入力欄を書き換えても、保存したHTMLファイルのvalue属性がHanakoへ書き戻されるわけではありません。

文字入力の初期値TaroをHanakoへ変更すると、nameのuser_nameと現在の値Hanakoが送信対象になる

checkboxとradioのvalueは選択肢の識別値

<fieldset>
  <legend>連絡方法</legend>

  <label>
    <input type="radio" name="contact_method" value="email" checked>
    メール
  </label>

  <label>
    <input type="radio" name="contact_method" value="phone">
    電話
  </label>
</fieldset>

同じnameを持つradioは1つのグループになり、選ばれた1項目のvalueが送られます。この例で「電話」を選ぶと、contact_method=phoneです。radioグループの仕様はMDNのradioリファレンスで確認できます。

checkboxも、チェックされたときにvalueを送ります。

<label>
  <input type="checkbox" name="newsletter" value="yes">
  お知らせメールを受け取る
</label>

チェック時はnewsletter=yesですが、チェックされていない項目は送信されません。また、checkboxでvalueを省略してチェックすると、既定値のonが送られます。受信側で意味を判断しやすくするため、通常はvalue="yes"のように明示します。詳しくはMDNのcheckboxリファレンスを参照してください。

表示名と送信用の値は分けて考える

画面に見えるラベル、送信用のname、選択肢に指定したvalueは、それぞれ役割が違います。ラジオボタンの横の「電話」を別の表示名にしても、value="phone"なら選択時の値はphoneです。

画面上の「連絡方法」という文言を変更しても、nameとvalueを変更しない限り送信データは変わりません。反対に、受信処理がcontact_methodを前提としているのにnameだけ変更すると、データを正しく受け取れなくなります。

HOAI Point

選択肢ではnameが質問、valueが回答と考えると整理できます。radioは同じnameから1つ、checkboxは設計によって同じnameから複数のvalueを送れます。

name・value・id・placeholderの違い

4つの属性は、表示、関連付け、送信で担当が分かれています。とくにidとname、valueとplaceholderを混同しないことが重要です。

属性	主な役割	送信データとの関係
id	label・CSS・JavaScriptから要素を識別	id自体は項目名にならない
name	送信データの項目名	`name=value`の左側になる
value	初期値または選択時の送信値	文字入力では現在の入力値、選択肢では指定した値が右側になる
placeholder	入力例や短いヒントを表示	入力値として送られない

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

placeholderは入力を始めると消えるため、項目名を覚えておく手掛かりにはなりません。placeholderはlabelの代わりにしません。「メールアドレス」のような項目名はlabelで常に表示し、placeholderは入力形式の補助に限定します。

inputタグでよく使う属性

type・name・value以外にも、入力支援や制約を伝える属性があります。目的に合うものだけを追加してください。

属性	役割	使用例
required	未入力のまま送信できないようにする	required
autocomplete	自動入力するデータの種類を伝える	`autocomplete="email"`
minlength・maxlength	文字数の下限・上限を指定	`maxlength="100"`
min・max・step	数量・日付などの範囲と刻みを指定	`min="1" max="10"`
pattern	入力値が満たすパターンを指定	`pattern="[0-9]{4}"`
checked	checkbox・radioを初期選択する	checked
readonly	値を編集不可にし、送信対象には残す	readonly
disabled	操作不可にし、送信対象から外す	disabled
accept	fileで選べるファイル種別のヒント	`accept="image/png,image/jpeg"`
multiple	複数の値やファイルを許可	multiple

readonlyとdisabledは送信対象になるかが違う

readonlyを付けた文字入力欄は編集できませんが、nameがあれば送信対象に残ります。disabledは入力欄を無効にし、送信対象から外します。readonlyはtext・email・numberなどで使えますが、checkbox・radio・fileには適用されません。詳しい対応範囲はMDNのreadonly属性で確認できます。

required・checked・disabledなどは、属性があるかどうかで有効・無効を決める真偽値属性です。たとえばdisabled="false"でも無効になります。有効に戻すときはdisabled属性そのものを削除します。

requiredやpatternだけに安全性を任せない

requiredやpatternは、入力漏れや形式違いをブラウザー上で早く知らせるために役立ちます。しかし、開発者ツールや直接のHTTPリクエストなどで回避できるため、セキュリティ対策の代わりにはなりません。MDNの制約検証ガイドでも、クライアント側の検証はサーバー側の検証を置き換えないと説明されています。

HOAI Point

ブラウザーの検証だけで安全性は完成しないと覚えてください。使いやすさのためにHTMLで検証し、信頼できるデータかどうかはサーバー側でも必ず検証します。

入力・選択したデータを手元で確認する練習

ここでは入力欄と送信対象のデータを見比べます。末尾のJavaScriptは、外部への送信を止めて結果を画面へ出す確認用の補助処理です。仕組みを今すべて覚える必要はありません。実際のメール送信やサーバー側の受信処理は行いません。

1．HTMLファイルを保存して開く

パソコンのテキストエディターで新しいファイルを作り、次のコードをすべて貼り付けます。文字コードをUTF-8、ファイル名をinput-practice.htmlにして保存し、ChromeやEdgeなどのブラウザーで開いてください。拡張子が.html.txtになっていないことも確認します。名前欄にTaro、メールのラジオボタンに選択マークが表示されれば準備完了です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>inputの練習</title>
</head>
<body>
  <h1>inputの練習</h1>
  <form id="practice-form">
    <p>
      <label for="user-name">お名前（必須）</label>
      <input type="text" id="user-name" name="user_name"
        value="Taro" required>
    </p>
    <p>
      <label for="email">メールアドレス（必須）</label>
      <input type="email" id="email" name="email" required>
    </p>
    <fieldset>
      <legend>連絡方法</legend>
      <label>
        <input type="radio" name="contact_method" value="email" checked>
        メール
      </label>
      <label>
        <input type="radio" name="contact_method" value="phone">
        電話
      </label>
    </fieldset>
    <p>
      <label>
        <input type="checkbox" name="newsletter" value="yes">
        お知らせメールを受け取る
      </label>
    </p>
    <button type="submit">送信対象を確認する</button>
  </form>
  <h2>送信対象のデータ</h2>
  <pre id="result" aria-live="polite">まだ確認していません。</pre>

  <script>
    // 確認用の補助処理。外部への送信を止めて、画面に表示します。
    const form = document.getElementById("practice-form");
    form.addEventListener("submit", (event) => {
      event.preventDefault();
      const lines = [];
      for (const [name, value] of new FormData(form)) {
        lines.push(name + "=" + value);
      }
      document.getElementById("result").textContent = lines.join("\n");
    });
  </script>
</body>
</html>

2．値を変えて結果を確かめる

名前をHanako、メールアドレスをname@example.comにし、連絡方法を「電話」に変更します。「お知らせメールを受け取る」にチェックを入れて「送信対象を確認する」を押すと、下に次の4行が表示されます。練習にはこの架空の値を使ってください。

user_name=Hanako
email=name@example.com
contact_method=phone
newsletter=yes

次に、お知らせのチェックを外してもう一度押します。newsletter=yesの行がなくなれば、未チェックのcheckboxが送信対象に入らないことを確認できています。メール欄を空にして押すと必須入力の案内が出て、結果は更新されません。前回の結果が残る点にも注意してください。

3．属性を1つずつ変えて比べる

HTMLファイルの名前欄からname="user_name"を外して保存し、ブラウザーを再読み込みします。同じ入力をして確認すると、名前欄は表示されたままでも結果からuser_nameの行が消えます。nameを戻した後は、同じ欄にreadonlyとdisabledを1つずつ付けて試すと、編集できるか・送信対象になるかの違いも確かめられます。変更するたびに保存と再読み込みを行ってください。

この補助処理はFormDataでフォームの現在の値を集めています。実際のお問い合わせフォームとして公開する場合は、formのaction・methodと受信処理の役割も確認し、入力値の検証や送信先を別途用意します。

inputタグでよくある間違いと直し方

nameを付けず、idだけで送信できると思う

idはlabelやCSS、JavaScriptから要素を指すための識別子です。フォーム送信の項目名はnameなので、受け取りたいinputにはnameを付けます。

checkbox・radioのvalueを省略する

選択された意味を受信側へ正確に伝えるには、value="email"やvalue="yes"のように値を明示します。ラベルの表示文字は、そのまま送信値になるわけではありません。

placeholderだけで項目名を示す

placeholderは入力中に消え、値が入った後は項目名を確認できません。labelを用意し、placeholderは形式例などの短い補助にします。

見た目だけでtypeを選ぶ

電話番号へnumber、複数行の文章へtextを使うなど、データの意味とtypeがずれると入力しにくくなります。複数行の文章にはtextarea、選択肢の一覧にはselectも検討します。

`</input>`を書く

inputは空要素なので終了タグを持ちません。<input ...>だけを書きます。

requiredだけで不正な値を防げると思う

HTMLの検証は操作中の案内として有用ですが、サーバー側でも必須・形式・長さ・許可値を検証します。送信値をそのまま画面やデータベースへ使わないことも重要です。

原因が分からない場合は、表示・操作・送信対象を分けて確認します。部品の種類が違うならtype、ラベルを押しても反応しないならforとid、結果に項目がないならname・disabled・チェック状態を見直してください。

inputタグに関するよくある質問

labelの中にinputを入れる場合も、forとidが必要ですか？: inputをlabelの中に入れると、forとidを使わずに関連付けることもできます。この記事のradioとcheckboxの例がこの形です。labelとinputを別々に置く場合は、forとidを一致させます。明示的な関連付けは幅広い支援技術への対応にも役立ちます。
type="email"なら、実在するメールアドレスか確認できますか？: 確認できるのは主にメールアドレスとしての形式です。受信できるか、本人のアドレスかまでは分かりません。実際のサービスでは確認メールなど別の仕組みが必要です。また、空欄を禁止するにはrequiredも指定します。
resetボタンを押すと、すべて空欄になりますか？: フォームに設定した初期状態へ戻ります。たとえばvalue="Taro"がある名前欄はTaroへ、checkedがある選択肢は初期の選択状態へ戻ります。必ず空欄になるわけではありません。入力内容を意図せず戻してしまうため、練習例にはresetボタンを置いていません。