iT邦幫忙

2019 iT 邦幫忙鐵人賽

0
自我挑戰組

程式設計師大冒險系列 第 57

[57/150]第九週學習總結之學習製作表單(一)

  • 分享至 

  • twitterImage
  •  

記得去更改資料拿完賽獎牌!記得去更改資料拿完賽獎牌!記得去更改資料拿完賽獎牌!

【大綱】

  • 時間分配
  • 表單製作規劃 -
    • HTML
    • CSS
    • JavaScript
  • 上週總結
  • 總結

【時間分配】

怕忘記細節,所以邊學習邊打鐵人文,所以寫文時間比實際更長。

項目 時間
表單規劃 1 hr 54 min
鐵人賽發文 0 hr 22 min

【表單製作規劃】

參考:胡立學習計畫
需求1:文字輸入框可以選擇必填或是非必填
需求2:送出表單時,必填的地方如果空白,要能夠把背景變紅色並且提示使用者
需求3:成功提交之後,把表單的資料輸出在console,並且用alert跳出提示即可

1.根據需求1如果是必填題目,會在題目旁加註星號。
2.按下送出紐用程式判斷必填是否填完?
否,然後改變背景色。
是,alert跳出"完成"。

不太明白console這個詞,根據搜尋結果Web Console應該是指IDE跑完後下面區塊。
下面我就做輸出區,顯示使用者資料。

【HTML】

參考:Create HTML Form

問券設計

  • 必填
    1.想當程式設計師嗎? * "YN問句
    2.當程式設機師理由? * "填空題
    3.請問在哪高就? "YN

【CSS】

https://ithelp.ithome.com.tw/upload/images/20181126/20091910rI3XbAvpQe.jpg

【JavaScript】

https://ithelp.ithome.com.tw/upload/images/20181126/20091910fqWKO9bU97.jpg

【上週總結】

  • 製作支援RWD網頁
  • 第一次獲得iT邦最佳解答
  • 製作線上計算機

【總結】

好期待寄來的鐵人練成獎牌,這陣子會常常翻信箱。
從發文到現在也快二個月,已經變成習慣。
記得去改資料,感謝撥冗閱讀。

2018.12.03修改語病


上一篇
[56/150]繼續學習前端
下一篇
[58/150]學習製作表單(二)
系列文
程式設計師大冒險115
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言