尤 川豪   ·  3月前
Exp. 1,209  ·  152 貼文  ·  114 留言

自學網頁の嬰兒教材:第5課 ── 用力送出表單

第5課 課程目標

認識各種常見的輸入欄位

能夠用表單送出資料

第5課 課程內容

用jsfiddle來練習:

https://jsfiddle.net

這次要寫HTML區塊

請閱讀這份教材:

HTML Forms

不習慣看英文,可以改看這裡:

HTML 表单和输入

把教學裡面的HTML貼到 jsfiddle 裡面做練習,貼好之後按上面的 RUN 按鈕,就會在右下角的 Result 看到結果了。

讀完、練習完這份教學裡面的程式碼,就算是學會 HTML 表單的用法,可以用表單來讓使用者輸入、選擇,接著送出各種資料了

第5課 作業

這次作業的情境如下:

你決定網路創業、開始網拍生意、線上賣衣服,並且自己設計購物網站

在後台管理面板中,需要有地方讓你新增商品項目

請利用本週學到的表單,將這個新增商品項目的表單做出來。

這個表單至少要能輸入以下欄位,(括號內代表建議的欄位類型):

  • 商品名稱 (text)
  • 價格 (text)
  • 是否免運費 (checkbox)
  • 性別 男/女 (radio)
  • 類別:上衣類 外套類 下身類 配件類 (select)
  • 商品備註 (textarea)

請讓這個表單用 POST 的方式將資料送出到 ‘/add-product’

(注意:網址’/add-product’並不存在,所以表單資料無法真的送過去。本週課程只談論表單製作。伺服器程式接收、處理表單資料,不在本週課程範圍)

完成這些,你就完成這次的課程目標了!

  分享   共 597 次點閱
共有 4 則留言
   ·  1月前
Exp. 62  ·  0 貼文  ·  7 留言

嗨嗨~~~新年快樂 這個好像用google製作問卷表單的感覺,但是是完全靠自己一個一個類別寫出來的,覺得很好玩!但POST還有‘/add-product’那邊有點"矇",不知道有沒有做錯? 作業:https://jsfiddle.net/KitHuang/fdtwy3b9/34/

 
尤 川豪   ·  1月前
Exp. 1,209  ·  152 貼文  ·  114 留言

您好~新年快樂

沒錯~各種網站上,給人輸入資料的地方,幾乎就是用這些元素做成的

POST 相關的地方,跟瀏覽器傳輸資料到伺服器的方式有關,超出本教材範圍,所以有點矇是正常~沒關係

你的作業寫得非常好~沒有做錯

繼續加油摟~期待看到你的下一份作業摟~

 
feifeitzu   ·  4天前
Exp. 45  ·  0 貼文  ·  8 留言

版主你好~這是這次的作業:https://jsfiddle.net/f48brxe9/ 謝謝你~

 
尤 川豪   ·  3天前
Exp. 1,209  ·  152 貼文  ·  114 留言

嗨嗨~我看到你的作業囉

甚至還有加上樣式跟排版,弄得很漂亮~

寫得非常好~本課目標順利完成~!

您的留言