HTMLのinputタグとは？属性・使い方・ブラウザー互換性と活用例
inputタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。type によって文字・メール・チェック・ファイルなどの入力欄になります。name は送信時の項目名です。
<input> は、type によって文字・メール・チェック・ファイルなどの入力欄になります。name は送信時の項目名です。この記事では「入力の種類と検証を指定する」場面を例に、HTMLの書き方、属性、対応状況、実装時の注意点を確認します。
inputタグの役割と選び方
どんな場面で使うか
属性はtypeごとに効く範囲が違います。acceptはファイルの安全性を保証しません。disabledの項目は通常送信されず、readonlyと同じ意味ではありません。
開始タグ・終了タグと配置
<input> は空要素です。終了タグ </input> や内側の本文は書きません。 HTMLの見た目を変えるときは、意味を持つタグの選択とCSSの指定を分けて考えます。
inputタグの属性
主に使う属性
type：要素ごとの種類。inputでは入力形式、buttonでは操作の種類、メディアではMIME型、scriptでは実行形式を指定します。name：項目や対象の名前。フォーム部品では送信時のキー、metaでは情報の種類、slotでは差し込み位置を指定します。value：入力や選択肢、測定値などの値。要素ごとに意味が異なり、liでは項目番号を指定します。placeholder：入力例などの短いヒント。入力欄の名前を伝えるlabelの代わりにはなりません。required：値の入力・選択を必須にする真偽属性。対応する入力形式で使います。disabled：操作を無効にする真偽属性。フォーム部品では通常送信対象にもなりません。readonly：対応する入力欄を読み取り専用にします。disabledと違い、通常は値が送信されます。autocomplete：自動入力に関する指定。name・emailなど目的を示すトークンやon・offを使います。min：最小値。数値や日付など、入力形式に合わせた書式を使います。max：最大値。progressでは完了時の値、入力欄では許容する上限です。step：数値や日時の有効な刻み幅。入力形式や基準値との組み合わせで検証されます。minlength：入力文字列の最小長。空欄を禁止するにはrequiredも検討します。maxlength：入力文字列の最大長。サーバー側でも長さを検証します。pattern：対応するテキスト入力の検証用正規表現。求める形式を文章でも説明します。checked：チェックボックスやラジオボタンの初期選択を表す真偽属性です。multiple：複数選択・複数入力を許可する真偽属性。要素と入力形式で効果が違います。accept：ファイル選択の種類を絞るヒント。安全な内容であることは保証しません。list：候補を用意するdatalistのidです。
共通属性と指定時の注意
id：文書内で一意な識別子。ラベル、ページ内リンク、JavaScriptからの参照に使います。class：CSSやJavaScriptで複数の要素をまとめて選びます。見た目の指定だけでは要素の意味は変わりません。lang：その内容の言語。日本語ならjaを指定します。data-*：アプリ独自の値を保持します。秘密情報を置く場所ではありません。
真偽属性は「あるか・ないか」で決まります。たとえば disabled="false" は無効化を解除する書き方ではありません。解除したいときは属性を取り除きます。
属性一覧は実用上の主要項目です。歴史的な属性や実験的な拡張まで採用を推奨するものではありません。詳細な定義は末尾の仕様とMDNを確認してください。
活用事例：入力の種類と検証を指定する
HTMLのコード例
<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" autocomplete="email" required>試す手順と確認する結果
HTML入門で作った index.html をコピーして練習用にします。文書設定の例は head、表示する内容の例は body の適切な位置に配置してください。表・フォーム・ルビなどの例は、必要な親要素ごと使います。 保存後に再読み込みし、「入力の種類と検証を指定する」という目的に合う構造になったかを開発者ツールのElementsで確認します。ソースとDOMが違う場合は、不正な入れ子によるブラウザーの補正がないか調べます。
例中の example.com は説明用のドメインです。外部ファイルや送信先がある例では、実在する自分のファイル・処理へ置き換えます。HTMLのタグを置くだけで、サーバー処理やファイルが自動生成されることはありません。
inputタグのブラウザー互換性
要素本体の対応開始バージョン
2026年9月21日確認のMDN Browser Compatibility Dataを基にした情報です。以下はデスクトップ版の要素本体の対応開始版で、属性・API・メディア形式まで含めて完全動作を保証する表ではありません。
- Chrome：1以降
- Edge：12以降
- Firefox：1以降・補足条件あり
- Safari：1以降
「補足条件あり」「部分対応」の場合は、出典の該当ブラウザーの注記を確認してください。iOS版Safari・Android版Chromeなどは別の実装・配信条件もあるため、下の互換性資料のモバイル欄を確認し、利用対象の実機でも試します。
属性ごとの対応差
要素が使えても、追加された属性は使えない場合があります。以下は今回扱う属性のうち、互換性データに独立した項目があるものです。省略された属性が非対応という意味ではありません。
name：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。placeholder：Chrome 3以降 ／ Edge 12以降 ／ Firefox 4以降 ／ Safari 4以降。required：Chrome 4以降 ／ Edge 12以降 ／ Firefox 4以降 ／ Safari 5以降。disabled：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。readonly：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。autocomplete：Chrome 14以降 ／ Edge 12以降 ／ Firefox 4以降 ／ Safari 6以降。min：Chrome 4以降 ／ Edge 12以降 ／ Firefox 16以降 ／ Safari 5以降。max：Chrome 4以降 ／ Edge 12以降 ／ Firefox 16以降 ／ Safari 5以降。step：Chrome 5以降 ／ Edge 12以降 ／ Firefox 16以降 ／ Safari 5以降。minlength：Chrome 40以降 ／ Edge 17以降 ／ Firefox 51以降 ／ Safari 10.1以降。maxlength：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。pattern：Chrome 4以降 ／ Edge 12以降 ／ Firefox 4以降 ／ Safari 5以降。checked：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。multiple：Chrome 2以降 ／ Edge 12以降 ／ Firefox 3.6以降 ／ Safari 4以降。accept：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。
実装前後のチェック
意味・操作・表示を確認する
- 目的が「入力の種類と検証を指定する」に合っているか、タグ名ではなく内容の意味から判断する。
- 属性は対象要素で定義されているものを使い、同名でも別の要素の意味を持ち込まない。
- リンクやフォームを含む場合は、Tab・Enter・Spaceなど標準の操作で利用できるか確認する。
- 320px程度の画面幅や文字拡大時にも、内容や操作部分が欠けないか確認する。
- 新しい属性やAPIを使う場合は、要素本体とは別に対応状況を確認する。
関連する要素と次の学習
<form>の使い方<label>の使い方<textarea>の使い方<button>の使い方<select>の使い方<option>の使い方- HTMLタグの全体一覧
- CSSプロパティの実例集
- 最初のHTMLを作る手順
参考資料と更新方針
互換性情報は確認時点の記録です。データはMDN Browser Compatibility Data（CC0-1.0）を参照しています。ブラウザーの更新や仕様変更があるため、新規導入時にはリンク先の最新情報も確認してください。