フォーム入力
フローティングラベル
フォーカスするとラベルが枠の上にスッと浮き上がる入力欄。省スペースで、いま何を入力中か直感的に分かる。
プレビュー
入力
操作実際に入力して試せます。
コード(コピーして使えます)
<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>