浮動的網頁表單欄位名稱（Floating Form Label）製作教學

這裡介紹製作浮動的網頁表單欄位名稱（Floating Form Label）的幾種方式，讓網頁上的表單看起來更美觀。

傳統網頁上的表單都是以靜態的方式呈現，而現在隨著網頁技術的發展與新的設計概念不斷演進，現在你可以使用一些工具讓網頁的表單看起來更漂亮，更具有設計感。

JVFloat.js

HTML5 中 input 的 placeholder 屬性是 input 這個網頁元素在使用者互動上最大的改變，它可以用於標示 input 所要輸入的資料說明，也可以作為 label 的替代品。

但是在一般的狀況下，當使用者在輸入文字時 placeholder 就會消失，所以如果 input 沒有使用 label 來標注的話，在文字輸入之後，使用者就會無法得知該 input 所要輸入的是什麼。

JVFloat.js 就是一個改善這個問題的 JavaScript 小工具，可以讓使用者在輸入文字時也同時顯示 placeholder。

JVFloat.js 這個工具包含 JavaScript 與 CSS 兩個部分，JavaScript 是負責文字輸入的偵測與 CSS class 的切換，而 CSS 則是負責網頁排版與動畫的部分，但是它所使用的 CSS 非常簡單，所以通常你會需要自己加上一些 CSS 設定，讓他的版面跟自己的網站可以整合在一起。

另外由於 JVFloat.js 使用到 CSS3 的 transform 功能，所以在使用時還需要配合一些瀏覽器偵測的工具（如 Modernizr），以免在一些不支援的瀏覽器中無法呈現應該有的效果。

JVFloat.js 在使用前要先引入 jQuery 函式庫，再從 GitHub 下載它的 JavaScript 與 CSS 檔案，並加入自己的網頁中。

<head>
  <!-- .... -->
  <link rel="stylesheet" href="css/jvfloat.css">
</head>
<body>
  <!-- .... -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
  <script src="js/jvfloat.min.js"></script>
</body>

接著再加上下面這段 JavaScript 以啟用 JVFloat.js：

<script>
  $('input.floatLabel').jvFloat();
</script>

這樣會將網頁中所有標注為 floatLabel 這個 CSS class 的 input 加上浮動欄位名稱功能。

接著撰寫自己的網頁上的表單，在撰寫時要把需要浮動欄位名稱的 input 加上 floatLabel 這個 CSS class。

<form>
<input class="floatLabel" placeholder="Username" type="text" />
<input class="floatLabel" placeholder="Email" required type="email" />
<input type="submit" />
</form>

最後還要修改一下它的 CSS 設定，讓 JVFloat.js 的版面可以跟自己的網頁整合在一起，請將上面加入的 jvfloat.css 這個檔案直接拿來修改，或是在網頁中複寫其中的設定。這個部分因為每個網站的設定都不一樣，要調的好就要靠自己的 CSS 功力了。

使用 JVFloat.js 配合調整過的 CSS 樣式，結果就會像這樣（請在這些欄位中輸入一些文字，就可以看到它的效果）：

FloatLabel.js

FloatLabel.js 的功能也跟 JVFloat.js 差不多，不過他是直接使用 label 來實作這樣的效果。

使用方法也是類似，引入 jQuery 後再加入 FloatLabel.js 的 JavaScript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="scripts/jquery.FloatLabel.js"></script>

然後加上 FloatLabel.js 的 CSS 設定檔：

<link rel="stylesheet" href="styles/jquery.FloatLabel.css">

然後在網頁中需要產生浮動欄位名稱效果的 input 部分，用 js-float-label-wrapper 這個 CSS class 包起來，而欄位名稱則使用 label 來指定。

<form>
<div class="js-float-label-wrapper">
  <label for="jsfloat-username">Username</label><input id="jsfloat-username" type="text">
</div>
<div class="js-float-label-wrapper">
  <label for="jsfloat-email">Email</label><input id="jsfloat-email" type="text">
</div>
<input type="submit" />
</form>

最後還是一樣要依據自己的網頁排版修改細部的 CSS 樣式設定，讓整個版面可以更協調，調整好的效果就會像這樣（請在這些欄位中輸入一些文字，就可以看到它的效果）：

Username

Label Better

Label Better 也是一個不錯的 JavaScript 工具，它可以指定的選項更更多，而且不用使用 CSS 就可以有動畫的效果（有好有壞）。

使用時首先引入 jQuery 與 Label Better 的 JavaScript 檔。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/jquery.label_better.js"></script>

加入啓動的 Label Better 的 JavaScript 程式碼：

<script>
$("input.label_better").label_better({
  position: "top",
  animationTime: 500,
  easing: "ease-in-out",
  offset: 20,
  hidePlaceholderOnFocus: true
});
</script>

你可以依照自己的需求調整上面這些參數，以下是各個參數的說明：

position：設定顯示欄位名稱的位置，可用的選項有 "top"、"bottom"、"left" 與 "right"，預設為 "top"
animationTime：設定動畫播放時間，單位為毫秒（milliseconds），預設為 500。
easing：設定 CSS easing，可以接受任何合法的 CSS easing 設定值，如 "linear" 與 "ease" 等，另外也可以指定為 "bounce"，預設為 "ease-in-out"。
offset：設定 input 與欄位名稱之間的距離，單位為 px，預設為 20。
hidePlaceholderOnFocus：設定預設的 placeholder 文字在使用者輸入時是否要隱藏，預設為 true。

接著在網頁中將需要產生浮動欄位名稱效果的 input 加上 label_better 這個 CSS class 設定。

<form>
<input class="label_better" placeholder="Username" type="text" data-position="top" />
<input class="label_better" placeholder="Email" required type="email" data-position="right" />
<input type="submit" />
</form>

最後在自己調整一下 CSS 的排版，效果就像這樣：

這裡我們為了示範，將第一個欄位名稱顯示在上方，而第二個顯示在右方，當然在實際的應用上顯示的位置如果統一應該會比較美觀。以上是各種浮動的網頁表單欄位名稱的實作方式，如果你還想看看其他別的實作，可以在 CodePen 中搜尋「floating label」，你會發現有兩百多個實作範例可以參考，不過大致上所使用的技術應該都不會差太多。

浮動的網頁表單欄位名稱（Floating Form Label）製作教學

JVFloat.js

FloatLabel.js

Label Better

沒有留言:

張貼留言

熱門文章