上一篇我們列出了要做的元件後，今天就趕快開始執行吧！

表單

1. 最常見的 <input> ，做完的效果如下圖，label 一開始不會直接呈現在頁面上，而是使用 css 的 focus 將 placeholder 做動態效果顯示。

接下來以此類推...

2. 製作 select，用在未來店家選擇產業別時之呈現。
3. 製作 radio，用在列表頁、顧客預約表單頁選擇日期時段等之呈現。
4. 製作 switch，用在店家選擇是否將服務項目開放之呈現。
5. 製作 select，用在店家新增服務項目之日期時段的下拉選單。
6. 製作 button，將表單的送出、取消或更新等按鈕模組化，並先行設定於正常、不可點擊、滑鼠經過與點擊等客製化視覺效果。
7. 製作表單專用的分隔標題，清楚劃分填寫區域。

其他共用元件

1. 連結文字：總不會希望小小的連結破壞整體頁面美感吧！所以就微調一下，並留意點擊過的顯示效果。
2. 頁面標題
3. 單圖按鈕：幾乎每頁都會用到，希望用簡單的 icon 顯示。會用在上一頁、功能選單、搜尋按鈕等處。

待完成

1. 圖片外框：個人習慣將圖片放在一個 div 裡，並將 <img> 放入 div，於外層設置大小會讓圖片顯示更加完美。
2. 進度條：使用在預約表單之進度顯示。

小結

一開始組元件的時期，是讓我個人覺得最耗心思的環節，但這次實作專案前有先繪製線稿，確實更有方向，另外也需要確認網站的主色系與元件的配色問題，還有將元件的屬性值使用參數傳入方式的問題，希望明後天可以做完預期進度，並開始組裝頁面！