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 属性を使用することで、必須入力フィールドを簡単に作成できます。

附録

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Input Elements Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>HTML Input Elements</h1>
    
    <form>
        <!-- Button -->
        <label for="button">Button:</label>
        <input type="button" value="Click Me">
        <br><br>

        <!-- Checkbox -->
        <label for="checkbox">Checkbox:</label>
        <input type="checkbox" id="checkbox">
        <br><br>

        <!-- Color -->
        <label for="color">Color Picker:</label>
        <input type="color" id="color">
        <br><br>

        <!-- Date -->
        <label for="date">Date:</label>
        <input type="date" id="date">
        <br><br>

        <!-- DateTime Local -->
        <label for="datetime-local">DateTime Local:</label>
        <input type="datetime-local" id="datetime-local">
        <br><br>

        <!-- Email -->
        <label for="email">Email:</label>
        <input type="email" id="email">
        <br><br>

        <!-- File -->
        <label for="file">File:</label>
        <input type="file" id="file">
        <br><br>

        <!-- Hidden -->
        <input type="hidden" id="hidden" value="hidden-value">

        <!-- Image -->
        <label for="image">Image Button:</label>
        <input type="image" src="https://via.placeholder.com/50" alt="Submit">
        <br><br>

        <!-- Month -->
        <label for="month">Month:</label>
        <input type="month" id="month">
        <br><br>

        <!-- Number -->
        <label for="number">Number:</label>
        <input type="number" id="number" min="1" max="10">
        <br><br>

        <!-- Password -->
        <label for="password">Password:</label>
        <input type="password" id="password">
        <br><br>

        <!-- Radio -->
        <label>Radio Buttons:</label>
        <input type="radio" name="radio-group" id="radio1" value="Option 1"> Option 1
        <input type="radio" name="radio-group" id="radio2" value="Option 2"> Option 2
        <br><br>

        <!-- Range -->
        <label for="range">Range:</label>
        <input type="range" id="range" min="0" max="100">
        <br><br>

        <!-- Reset -->
        <input type="reset" value="Reset Form">
        <br><br>

        <!-- Search -->
        <label for="search">Search:</label>
        <input type="search" id="search">
        <br><br>

        <!-- Submit -->
        <input type="submit" value="Submit Form">
        <br><br>

        <!-- Telephone -->
        <label for="tel">Telephone:</label>
        <input type="tel" id="tel">
        <br><br>

        <!-- Text -->
        <label for="text">Text:</label>
        <input type="text" id="text">
        <br><br>

        <!-- Time -->
        <label for="time">Time:</label>
        <input type="time" id="time">
        <br><br>

        <!-- URL -->
        <label for="url">URL:</label>
        <input type="url" id="url">
        <br><br>

        <!-- Week -->
        <label for="week">Week:</label>
        <input type="week" id="week">
        <br><br>
    </form>
</body>
</html>

input 要素

カテゴリ

使用される文脈

コンテンツモデル

タグの省略

属性

type 属性

使用例

テキスト入力

メールアドレス入力

チェックボックス

ラジオボタン

ファイル選択

範囲スライダー

カラーピッカー

注意事項

附録

関連仕様