第5課 課程目標
認識各種常見的輸入欄位
能夠用表單送出資料
第5課 課程內容
用jsfiddle來練習：
這次要寫HTML區塊
請閱讀這份教材：
不習慣看英文，可以改看這裡：
把教學裡面的HTML貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。
讀完、練習完這份教學裡面的程式碼，就算是學會 HTML 表單的用法，可以用表單來讓使用者輸入、選擇，接著送出各種資料了
第5課 作業
這次作業的情境如下：
你決定網路創業、開始網拍生意、線上賣衣服，並且自己設計購物網站
在後台管理面板中，需要有地方讓你新增商品項目
請利用本週學到的表單，將這個新增商品項目的表單做出來。
這個表單至少要能輸入以下欄位，（括號內代表建議的欄位類型）：
- 商品名稱 (text)
- 價格 (text)
- 是否免運費 (checkbox)
- 性別 男/女 (radio)
- 類別：上衣類 外套類 下身類 配件類 (select)
- 商品備註 (textarea)
請讓這個表單用 POST 的方式將資料送出到 ‘/add-product’
（注意：網址’/add-product’並不存在，所以表單資料無法真的送過去。本週課程只談論表單製作。伺服器程式接收、處理表單資料，不在本週課程範圍）
完成這些，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
交作業~
https://jsfiddle.net/j437437/Lobvgfqk/412/
看起來很簡單的表單
做起來卻完全不簡單QQ "眉角"好多
交第5個作業囉，麻煩站長檢查，覺得自己進步好多，謝謝站長的資源
https://jsfiddle.net/johnny890118/3wqms9xt/239/
交作業~感覺做出來有點陽春...
CSS要再多看看了!!再麻煩站長檢查了~
https://jsfiddle.net/0ds63gyn/4/
交作業，再麻煩站長了，謝謝~
https://glitch.com/edit/#!/product-forms
Link: https://glitch.com/edit/#!/fast-prism-hawthorn
表格 CSS 也是滿多有趣的東西可以玩的～
之後有機會會想幫他加入「必填」這種紅色提醒效果
再請站長看看有沒有什麼問題或是建議的，謝謝！
https://jsfiddle.net/tsaii/5jvk4x0d/150/
哇，真的要花不少時間呢🥲
交作業啦 ~
https://codepen.io/ChloeTseng1026/pen/NWoZpEa
發現表單不如表面上的看起來簡單，如果要考慮到驗證、資料回傳等後續的話，其實沒有這麼容易。
2024.02.06 繳作業 https://jsfiddle.net/1dyeofvc/
<br />
覺得表單排版用table處理應該會比較好操作，尤其是處理輸入欄的小標對齊。不過作業我還是用div給予指定寬度，然後每個div裡面的lable和input再給予指定尺寸來分配處理對齊。另外，我還改了radio和checkbox的樣式，瀏覽器預設的CSS好難改，多虧有google大神的協助
中途遇到了架構理解錯誤導致無法順利使用FLEX的功能
雖然有想表達的方式但是目前光靠CSS應該是無法做到
先繳交目前的進度 謝謝!
https://jsfiddle.net/etai200/4poyumL6/245/
20240701交作業，有偷看其他其他學員交的作業，好多都做的好精美啊！要好好向他們學習>"<
https://swanky-clear-fox.glitch.me/
https://jsfiddle.net/an8Lrd24/
原本嘗試要用表格排版
但是 寫類別：上衣類 外套類 下身類 配件類 (select)
就一直失敗