<input>: INPUT 要素
最終更新：2026-10-13
<input>INPUT 要素
<input> 要素は最も一般的なフォーム部品で、さまざまな入力欄を作成します。type 属性でテキスト・パスワード・チェックボックス・ラジオ・日付選択などを切り替えます。空要素です。
| カテゴリ | フォーム |
|---|---|
| コンテンツモデル | なし（空要素） |
| 許可される親要素 | フレージングコンテンツを受け入れる要素（通常は <form> 内） |
| 閉じタグ | 自己完結 — 閉じタグ不要 |
| ステータス | 標準 |
📝 構文
<input type="text" name="フィールド名" placeholder="ヒントテキスト">⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
type | Keyword | The type of the input, determines the control's form.
|
name | Text | The field name submitted with the form; groups radio buttons. |
value | Text | The current or default value. |
placeholder | Text | Hint text shown when the field is empty. |
required | Boolean | Marks the field as required. |
disabled | Boolean | Disables the field; not submitted. |
readonly | Boolean | Read-only; visible but not editable. |
maxlength | Number | Maximum number of characters. |
checked | Boolean | Default checked state for checkbox/radio. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <input> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： 必ず name 属性を設定しましょう。設定しないとフィールドの値が送信されません。
❓ よくある質問
Qinput にはどんな type がありますか？
Aテキスト系：
text、password、email、url、tel、search。選択系：checkbox、radio、file。数値系：number、range。日付系：date、time、datetime-local。このほか hidden、color、submit などがあります。適切な type を選ぶと、スマホで対応キーボードが出てネイティブ検証も得られます。Qinput は空要素ですか？
A空要素（void element）です。終了タグがなく内容も持てず、すべての設定は属性で行います（value、placeholder、required など）。
<textarea> とはここが違います。textarea には終了タグがあり、初期値はタグの間に書きます。Qinput の placeholder は label の代わりになりますか？
Aなりません。placeholder は入力を始めると消え、スクリーンリーダーの対応も完全ではありません。placeholder だけに頼るとアクセシビリティが損なわれます。正式な入力の説明は
<label> が担当し、placeholder にはヒントや書式例だけを置きましょう。🏷️ 関連タグ
💡 関連ケース
📚 関連チュートリアル
