自從 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 的狀態，就只能用 JavaScript。
後來 Google 了一下，也看了 Materialize、Netflix，看是不是用 CSS 去處理，但看上去，一樣都是用 JS 在判斷。
有興趣的人可以看一下原始碼，就開放給大家始用了：
https://codepen.io/letswrite/pen/wErBoJ
Summary
Article Name
Google Material Design 表單標籤效果
Description
自從 Google 設計了 Material Desgin 後，表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇，在註冊的時候，就發現他們的表單就是用了一樣的效果，連 Netflix 都在用了，看來是個好設計，就決定自己來寫一個。
Augustus
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
以下是留言，但關於留言的部份必需先讓你們知道：
本站的文章都是 August 因為覺得有趣，才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，
Sorry~ 除非那修改是 August 也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外，公開信箱是為了讓金流驗證用，
因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。
因此決定不再回覆信件，有疑問就利用留言功能囉。