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

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


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

JVFloat.js

HTML5 中 inputplaceholder 屬性是 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 樣式設定,讓整個版面可以更協調,調整好的效果就會像這樣(請在這些欄位中輸入一些文字,就可以看到它的效果):




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」,你會發現有兩百多個實作範例可以參考,不過大致上所使用的技術應該都不會差太多。
本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站