Google Material Design 表單標籤效果

/

自從 Google 設計了 Material Desgin 後,除了按鈕的漣漪效果讓人驚豔外,表單 labelinput 的結合方式也跟著讓很多人「致敬」,好啦其實是模仿。

第一次看到的時候,原本想找個時間來寫 labelinput 那個效果的,但就一直沒抽出時間。

最近想用 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 了一下,也看了 MaterializeNetflix,看是不是用 CSS 去處理,但看上去,一樣都是用 JS 在判斷。

有興趣的人可以看一下原始碼,就開放給大家始用了:

https://codepen.io/letswrite/pen/wErBoJ

Summary
Google Material Design 表單標籤效果
Article Name
Google Material Design 表單標籤效果
Description
自從 Google 設計了 Material Desgin 後,表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,連 Netflix 都在用了,看來是個好設計,就決定自己來寫一個。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Others

Google Optimize A/B Testing 使用筆記

Front-End

TestCafe 學習筆記 – 2:常用設定及功能

Front-End

OSM + Leaflet 學習筆記2:移動中心點、抓目前地點

Front-End

拿 Trello 當資料庫 建一個店家清單 – 上篇:Trello 基本使用

Vue

D3.js、Vue 畫一個台灣地圖

Front-End

File API 客製上傳檔案按鈕 / input file

WordPress

如何用 MAMP 在本機安裝 WordPress

Vue

用 VuePress 製作說明文件頁面 – 4:佈景主題、外掛

Front-End Vue

用 Vue.js 製作圖片版 EDM 生成器

PWA

PWA 學習筆記 – 4:manifest.json

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。