← カテゴリ一覧に戻る

テキスト入力

input label textarea

HTML の <input> 要素はtype 属性によって多様な入力コントロールに変化します。 HTML5 で多くの新しい type が追加され、モバイルキーボードの最適化やブラウザ標準バリデーションが利用できます。

各 input type のデモ

label と htmlFor による関連付け

readOnly 状態

disabled 状態

<label htmlFor="username">ユーザー名</label>
<input
  id="username"
  type="text"
  placeholder="例: yamada_taro"
  required
  minLength={3}
  maxLength={20}
  autoComplete="username"
/>

主要な属性

<input
  type="text"
  placeholder="例: yamada"
  required
  minLength={3}
  maxLength={20}
  pattern="[a-zA-Z0-9_]+"
  autoComplete="username"
  readOnly={false}
  disabled={false}
/>

textarea との比較

{/* 1行: input */}
<input type="text" placeholder="1行テキスト" />

{/* 複数行: textarea */}
<textarea rows={4} placeholder="複数行..." />

input type 比較表

type用途モバイルキーボードHTML5追加
text汎用テキスト通常キーボード
emailメールアドレス@ キー付き✓
number数値数字キーボード✓
tel電話番号電話用キーボード✓
urlURL/ と . が大きい✓
search検索検索ボタン付き✓
date日付日付ピッカー✓
time時刻時刻ピッカー✓
datetime-local日時（ローカル）日時ピッカー✓
week週週選択UI✓
month月月選択UI✓
color色選択カラーピッカー✓
rangeスライダースライダーUI✓

Tips

  • autocomplete 属性を適切に設定すると、パスワードマネージャーやブラウザの自動入力が正しく機能し UX が向上する
  • 正確な type を指定することでモバイルに最適なキーボードが表示される（例: type="email" → @ キー付き）
  • label の htmlFor と input の id を必ず対応させることでアクセシビリティが確保される
  • 複数行テキストには textarea を使う。input は常に1行のみ
  • readOnly（JSX）と disabled の違いに注意: readOnly はフォーム送信時に値が含まれるが、disabled は含まれない

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<input type="text">` の `placeholder` はラベルの代替として使えますか？アクセシビリティ上の問題を教えてください。
- `required`・`minLength`・`maxLength`・`pattern` を組み合わせた HTML5 バリデーションの実装例を教えてください。
- `autocomplete` 属性に正確な値（"name"・"email"・"username" など）を指定する利点と、パスワードマネージャーへの影響を教えてください。
- `<input>` の `readOnly` と `disabled` の違いを、フォーム送信時のデータ送信有無とともに教えてください。
- `<input>` と `<textarea>` の使い分けと、`textarea` の `rows`・`resize` CSS プロパティの使い方を教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo