HTML Living Standard/input

input 要素

<input> 要素は、ユーザーがデータを入力するための多用途なフォームコントロールを提供します。入力の種類は type 属性によって決定され、多様な機能を持つ単一の要素として利用されます。

カテゴリ

• フローコンテンツ
• フレージングコンテンツ
• リスト化可能（<datalist> を参照）

使用される文脈

• フローコンテンツまたはフレージングコンテンツが期待される場所

コンテンツモデル

• 空（開始タグと終了タグの間にコンテンツを持たない）

タグの省略

• 開始タグは必須。終了タグは省略されます。

属性

<input> 要素には以下の属性が使用できます：

• グローバル属性
• type — 入力の種類を指定（デフォルトは text）
• name — フォーム内で入力データの名前を指定
• value — 初期値を指定
• placeholder — 入力例を示すプレースホルダー
• required — 必須フィールドとしてマーク
• readonly — 読み取り専用にする
• disabled — 無効化する
• maxlength — 入力可能な最大文字数を指定
• min および max — 入力値の範囲を指定（例: 日付、数値）
• step — 数値や範囲の入力ステップを指定
• autocomplete — 自動補完の設定（on または off）
• pattern — 入力値に正規表現パターンを適用
• multiple — 複数の値を許可（例: ファイル、メール）
• list — 入力補助のリスト（<datalist> と連携）

type 属性

type 属性で指定できる主な値とその機能は以下の通りです：

• text — 単一行のテキスト入力
• password — パスワード入力（入力内容を隠す）
• email — メールアドレス入力（バリデーションあり）
• url — URL入力（バリデーションあり）
• number — 数値入力
• range — 範囲スライダー
• date — 日付選択
• time — 時刻選択
• datetime-local — 日付と時刻の入力（ローカルタイムゾーン）
• month — 月選択
• week — 週選択
• file — ファイル選択
• checkbox — チェックボックス
• radio — ラジオボタン
• button — ボタン
• submit — フォーム送信ボタン
• reset — フォームリセットボタン
• color — カラーピッカー
• hidden — 非表示の入力フィールド

使用例

テキスト入力

<label for="name">名前:</label>
<input type="text" id="name" name="name" placeholder="名前を入力してください" required>

メールアドレス入力

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>

チェックボックス

<label>
  <input type="checkbox" name="agree" required> 利用規約に同意します
</label>

ラジオボタン

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

ファイル選択

<label for="file">アップロード:</label>
<input type="file" id="file" name="file" multiple>

範囲スライダー

<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">

カラーピッカー

<label for="color">背景色:</label>
<input type="color" id="color" name="color" value="#ff0000">

注意事項

• バリデーションはクライアント側で行われますが、セキュリティのため必ずサーバー側でも検証を行う必要があります。
• 一部の type 属性（例: date, color）はブラウザの実装状況に依存します。
• required 属性を使用することで、必須入力フィールドを簡単に作成できます。

関連仕様

• HTML Living Standard - input
• MDN Web Docs - input