ユーザーフレンドリーなフォーム改善テクニック「フローティングラベル」を使ってみよう！（CSS3＋jQuery）

HTML・CSS 最終更新日：2020/06/19 公開日：2017/03/30

世界中のどこを探しても完璧なフォームというものは見つかっていませんが、少しでもユーザーが入力しやすいようなフォームの研究や改良が進んでいます。それはブラウザレベルで行われるような改善もありますし Web デザイナーをはじめ Web 制作に携わる人たちのレベルでも改善が進んでいます。

そんなフォームですが、最近人気が高まってきているのが「フローティングラベル」という手法です。

イメージは以下の図をご覧頂ければわかりやすいと思います。

出典元：Dribbble

入力欄にラベルが入力してあるパターンかと思いきや、入力してみると、それがラベルとして表示されるという動きをするフォームです。

このフォームのメリットは、スマートフォンサイトの場合では特に顕著ですが、ラベルを常に表示しておくと縦に長くなってしまう問題点があります。しかしそれをフローティングラベルにすることで、縦幅が大幅に縮小されるのです。とってもユーザーフレンドリーですよね。

今回はそのフローティングラベルを一から作るのが面倒という方のために、 jQuery を使った簡単なフローティングラベルをご紹介いたします。

1 簡単なフローティングラベルの実装方法
- 1.1 HTML
- 1.2 CSS＋JavaScript
  - 1.2.1 CSS
  - 1.2.2 JavaScript
2 他にも様々なフローティングラベルをご紹介！
3 まとめ

簡単なフローティングラベルの実装方法

今回ご紹介するフローティングラベルですが、デモページを作りましたので、動きはデモからご確認ください。

【デモページ】フローティングラベル

HTML

<div class="field">
	<label class="field__label" for="input-email">メールアドレス（フロート後）</label>
	<input class="field__input one-column-form__input--text" id="input-email" type="email" placeholder="メールアドレス">
</div>

※今回はjQueryを利用しますので、HTML内にjQueryも記述してください

HTML は非常にシンプルですが、一応気をつける点として入力前に表示されている文字と入力後にラベルとなる文字の入力欄が違うというところです。

それから今回はメールアドレスを想定していますのでtype="email"と記載していますが、名前や電話番号など項目に合わせ最適なtypeを指定して下さい。

CSS＋JavaScript

CSS

.field {
  width: 300px;
}

.field__label {
  color: #999;
  font-size: 12px;
  opacity: 0;
  padding: 4px 10px;
  pointer-events: none;
  position: absolute;
  text-overflow: ellipsis;
  text-align: left;
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.field--not-empty .field__label {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.field__input {
  background-color: #f5f5f5;
  border: 2px solid #e9e9e9;
  color: #333;
  font-size: 22px;
  padding: 10px;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  width: 100%;
}

.field--not-empty .field__input {
  padding-bottom: 2px;
  padding-top: 18px;
}

JavaScript

$('.field__input').on('input', function() {
  var $field = $(this).closest('.field');
  if (this.value) {
    $field.addClass('field--not-empty');
  } else {
    $field.removeClass('field--not-empty');
  }
});

CSS と JavaScript はユーザーにリッチな体験をしてもらうため、CSS3アニメーションであるtransformやtransitionを利用し、それをJavaScriptでCSSクラスを追加したり削除したりすることで、動きを表現しています。