ちいつる

フォーム入力

フローティングラベル

フォーカスするとラベルが枠の上にスッと浮き上がる入力欄。省スペースで、いま何を入力中か直感的に分かる。

ENGLISH

Floating Label

  • JS
72フォーム入力 の一覧 →

プレビュー

入力

操作実際に入力して試せます。

コード(コピーして使えます)

<div class="form-wrap">
  <div class="field">
    <input id="fl-name" class="field-input" type="text" />
    <label for="fl-name" class="field-label">お名前</label>
  </div>
  <div class="field">
    <input id="fl-email" class="field-input" type="email" />
    <label for="fl-email" class="field-label">メールアドレス</label>
  </div>
</div>

タグ

関連パーツ