測試你的技能：HTML5 控制元件

此技能測試的目的是評估你是否理解了我們的 HTML5 輸入型別 文章。

注意： 你可以在此頁面上的互動式編輯器或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以透過我們的溝通渠道聯絡我們。

HTML 控制元件 1

首先，讓我們探索一些輸入型別。建立適當的輸入，以便使用者更新其以下資訊：

  1. 電子郵件
  2. 網站
  3. 電話號碼
  4. 喜歡的顏色

嘗試更新下面的即時程式碼，以重新建立完成的示例。

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行操作。

HTML 控制元件 2

接下來，我們希望您實現一個滑塊控制元件，允許使用者選擇邀請到派對的人數上限。

  1. 實現一個基本的滑塊控制元件，與提供的標籤配合使用。
  2. 將其最小值設定為 1，最大值設定為 30，初始值設定為 10，元素 id 為 max-invite。
  3. 建立一個相應的輸出元素，將滑塊的當前值放入其中。將其類設定為 invite-output，並與輸入元素進行語義關聯。如果您正確執行此操作，頁面中包含的 JavaScript 將在滑塊移動時自動更新輸出值。

嘗試更新下面的即時程式碼，以重新建立完成的示例。

下載此任務的起點，以便在您自己的編輯器或線上編輯器中進行操作。