自從Google設計了Material Desgin後，除了按鈕的漣漪效果讓人驚豔外，表單label跟input的結合方試也跟著讓很多人「致敬」，好啦其實是模仿。
第一次看到的時候，原本想找個時間來寫label、input那個效果的，但就一直沒抽出時間。
最近想用Netflix追劇，在註冊的時候，就發現他們的表單就是用了一樣的效果，想想Google的設計連Netflix都在用了，看來是個好設計，就決定自己來寫一個。
寫的結果放在codepen上：
See the Pen material design form label effect by sean (@sean-su) on CodePen.
寫的時候有遇到一個問題，單純用css，無法判斷input是否為空，因此當input有值以後，要讓label維持在focus的狀態，就只能用js。
後來google了一下，也看了Materialize、Netflix，看是不是用css去處理，但看上去，一樣都是用js在判斷。
有興趣的人可以看一下原始碼，就開放給大家始用了：
https://codepen.io/sean-su/pen/wErBoJ
Summary
Article Name
Google Material Design 表單標籤效果
Description
自從Google設計了Material Desgin後，除了按鈕的漣漪效果讓人驚豔外，表單label跟input的結合方試也跟著讓很多人「致敬」。最近想用Netflix追劇，在註冊的時候，就發現他們的表單就是用了一樣的效果，想想Google的設計連Netflix都在用了，看來是個好設計，就決定自己來寫一個。
Augustus
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
