入力フィールド (Inputs)

ユーザーからの情報入力を受け付ける、アクセシブルで使いやすい入力フィールドです。

基本的な入力フィールド

Code:

<input class=“input input-md” type=“text” placeholder=“テキストを入力してください” />
<input class=“input input-md” type=“email” placeholder=“メールアドレスを入力” />
<input class=“input input-md” type=“password” placeholder=“パスワードを入力” />

サイズ

Code:

<input class=“input input-sm” type=“text” placeholder=“小さいサイズ” />
<input class=“input input-md” type=“text” placeholder=“標準サイズ” />
<input class=“input input-lg” type=“text” placeholder=“大きいサイズ” />

状態

Code:

<input class=“input input-md” type=“text” placeholder=“通常状態” />
<input class=“input input-md input-error” type=“text” placeholder=“エラー状態” />
<input class=“input input-md” type=“text” placeholder=“無効状態” disabled />

フォームフィールド

ラベル、入力フィールド、ヘルプテキスト、エラーメッセージを組み合わせた実用的なフォームフィールドです。

フルネームでご入力ください

ログイン時に使用します

パスワードは8文字以上で入力してください

Code:

<label class=“label” for=“name”>お名前</label>
<input class=“input input-md” type=“text” id=“name” />
<p class=“help-text”>ヘルプテキスト</p>

ボタンとの組み合わせ

入力フィールドとボタンを組み合わせた実用的なフォームパターンです。

Code:

<form class=“space-y-4”>
<label class=“label label-required”>メールアドレス</label>
<input class=“input input-md” type=“email” />
<button class=“btn btn-primary btn-md” type=“button”>ログイン</button>
</form>

アクセシビリティ

  • • ラベルと入力フィールドが適切に関連付けられています（forとid）
  • • キーボードフォーカスが明確に表示されます
  • • エラー状態はaria-invalidとaria-describedbyで適切に通知されます
  • • 必須フィールドは視覚的（*）とプログラム的（required）に示されます
  • • プレースホルダーは補助情報として使用し、ラベルの代替にはしません
  • • 十分なコントラスト比を確保しています

Tabキーでフォーカスを移動し、スクリーンリーダーでの読み上げを確認してください