フォーム & 入力
フォーム & 入力に分類されるWeb表現技法16件。フローティングラベル、数量ステッパー、トグル設定パネル、入力ステート見本 など。ライブデモとコピーできるコード付き。
フローティングラベル
入力時にラベルが上へ縮小移動する定番のフォームUI。:placeholder-shown とトランジションだけで実現し、ログインや登録画面に使えます。
数量ステッパー
「−」「＋」ボタンで数量を増減できる入力欄。直接入力にも対応し、上限・下限に達するとボタンが自動的に無効化され、ECサイトのカート等で使えます。
トグル設定パネル
通知・ダークモード・自動保存などをON/OFFで切り替える設定パネル。切り替えるたびに説明文が変化し、状態がひと目でわかります。
入力ステート見本
default・focus・error・success・disabledの5状態を縦に並べた入力欄の見本。色とアイコン、ヘルプ文の違いを一覧で確認できます。
星評価入力
ホバーで星がプレビュー表示され、クリックで評価が確定する5段階の星評価入力。選択後は「満足」などの評価ラベルが表示されます。
セグメント選択
ラジオボタンをピル型のセグメントに置き換えたUI。選択に応じてインジケータが滑らかにスライドし、キーボード操作にも対応します。
リアルタイムバリデーション
入力のたびに正規表現で氏名・メール・電話を即時検証し、枠色とメッセージで結果を表示。全項目が有効になると送信ボタンが解放されます。
パスワード強度メーター
文字数・大小文字・数字・記号の条件を判定し、4段階のバーと色で強度を可視化。表示切替や条件チェックリスト付きで会員登録に最適です。
OTP（ワンタイムコード）入力
6桁の認証コードを1桁ずつ入力するUI。自動フォーカス移動・ペースト分配・Backspace戻り・照合とシェイク演出を備えた二段階認証向けです。
カスタムチェック / ラジオ
:has() を活用してチェックボックス・カードラジオ・トグルスイッチをCSSだけで装飾。アクセシブルな見た目のリッチな選択UIを構築できます。
ファイルドロップゾーン
ドラッグ＆ドロップとクリックでファイルを追加し、画像はサムネイル・他は拡張子バッジで一覧表示。個別削除やサイズ整形を備えたアップロードUIです。
吹き出し付きレンジスライダー
つまみの位置に金額の吹き出しが追従するレンジ入力。CSSカスタムプロパティで塗りと吹き出し位置を連動させ、価格や予算選択に使えます。
タグ入力フィールド
Enterやカンマでタグを追加し、Backspaceや×で削除できる複数入力UI。重複防止とチップ生成のアニメーション付きで、スキルやキーワード入力に便利です。
カスタムセレクト
ネイティブselectを装飾しなおしたドロップダウン。開閉アニメーションと選択反映に加え、矢印キーやEnterでの操作にも対応します。
マルチステップ・ウィザード
アカウント→プロフィール→確認の3ステップに分けた入力フォーム。上部の進捗インジケータと次へ/戻るボタンでスライド遷移し、最後に入力内容をまとめて確認できます。
オートコンプリート
入力に応じて候補を絞り込み一致部分をハイライト表示。矢印キー・Enter・Escのキーボード操作に対応したアクセシブルなコンボボックスです。