テキストフィールド Text Field
ユーザーが文字列を入力するための基本的なフォーム要素。
ライブデモ
半角英数字で入力してください
ソースコード
<div class="demo-textfield">
<div class="demo-textfield-group">
<label class="demo-textfield-label" for="demo-name">名前</label>
<input class="demo-textfield-input" type="text" id="demo-name" placeholder="山田太郎" />
</div>
<div class="demo-textfield-group">
<label class="demo-textfield-label" for="demo-email">メールアドレス</label>
<input class="demo-textfield-input" type="email" id="demo-email" placeholder="example@mail.com" />
<span class="demo-textfield-hint">半角英数字で入力してください</span>
</div>
<div class="demo-textfield-group">
<label class="demo-textfield-label" for="demo-disabled">無効</label>
<input class="demo-textfield-input" type="text" id="demo-disabled" disabled value="編集不可" />
</div>
</div>.demo-textfield { display: flex; flex-direction: column; gap: 16px; max-width: 320px; }
.demo-textfield-group { display: flex; flex-direction: column; gap: 4px; }
.demo-textfield-label { font-size: 13px; font-weight: 600; color: #333; }
.demo-textfield-input {
padding: 10px 12px; border: 2px solid #d1d5db; border-radius: 8px;
font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.demo-textfield-input:focus {
border-color: var(--ui-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-textfield-input:disabled { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.demo-textfield-hint { font-size: 12px; color: #6b7280; }AIプロンプト
Basic
テキストフィールドをHTML/CSSで作ってください。ラベル付きの入力欄で、フォーカス時に枠線の色が変わります。
Custom
以下の仕様でテキストフィールドを実装してください。 - フローティングラベル（入力時にラベルが上に移動） - プライマリカラー: #2563eb - バリデーション表示（エラー時は赤枠 + エラーメッセージ） - 文字数カウンター表示 - クリアボタン（×アイコン） - 入力中のアニメーション
Advanced
完全バリデーション対応のテキストフィールドを実装してください。 - リアルタイムバリデーション（blur時 + 入力時） - カスタムバリデーションルール（正規表現、最小/最大文字数、必須） - aria-invalid, aria-describedby でエラーをスクリーンリーダーに通知 - autocomplete属性の適切な設定 - IME入力対応（compositionstart/end イベント） - debounce付きの入力ハンドラー - フォーム送信時のバリデーション集約