跳到主要內容
Cypher's Practical Coding
HTML 表單與 DOM 互動

結業考試

15 題,每題 5 分,滿分 75 分。 可先執行查看結果再交卷。

已作答 0 / 15
表單

1. 建立會員註冊表單:姓名(必填)、Email(必填+格式驗證)、密碼(必填+至少8字元)、送出按鈕

表單

2. 做一個訂購表單,包含商品下拉選單(3 個選項)、數量(number, 1-99)、備註(textarea)、送出按鈕

表單驗證

3. 建立含驗證的聯絡表單:姓名(2-20字)、手機(09開頭10碼 pattern)、訊息(必填),加上 :valid/:invalid 的顏色提示

表單驗證

4. 做活動報名表,日期欄位限制在今天到年底,人數 1-10,Email 必填,全部加上驗證

DOM

5. 做一個「主題切換器」:點按鈕把整個頁面背景改成深色、文字改成白色

DOM

6. 建立一個待辦清單:輸入框 + 新增按鈕,每次點擊新增一個 <li> 到清單中

事件

7. 做點擊計數器:顯示數字,「+1」按鈕增加,「-1」按鈕減少(最低0),「歸零」按鈕重設

事件

8. 建立即時搜尋篩選:一個輸入框和一個有 5 個項目的清單,打字時自動隱藏不符合的項目

事件

9. 做一個表單,送出時攔截預設行為,把所有欄位值組合成一段文字顯示在頁面上

互動元件

10. 實作 FAQ 手風琴:至少 3 個問答,點擊問題展開答案,再點收合

互動元件

11. 實作 Tab 分頁:3 個分頁按鈕,點擊顯示對應內容並隱藏其他,active 按鈕有底線樣式

互動元件

12. 做即時字數統計的留言框:textarea + 字數顯示,上限 200 字,超過 160 字文字變紅色警示

DOM

13. 做一個動態表格:輸入框填入品名和價格,點按鈕新增一行到 table 中

事件

14. 做圖片輪播:3 張圖片,「上一張」和「下一張」按鈕切換顯示

表單

15. 做星級評分元件:5 個星星符號,點擊某個星星後,它和前面的星星變成實心,後面變空心

確認作答完畢後,點擊交卷