測試你的技能：基本控制元件

此技能測試的目的是評估您是否理解了我們的 基本原生表單控制元件 文章。

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

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

基本控制元件 1

此任務從簡單開始，要求您建立兩個 <input> 元素，用於使用者 ID 和密碼，以及一個提交按鈕。

  1. 為使用者 ID 和密碼建立適當的輸入。
  2. 您還應該將它們與它們的文字標籤語義化地關聯。
  3. 在剩餘的列表項中建立一個提交按鈕，按鈕文字為“登入”。

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

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

基本控制元件 2

下一項任務要求您根據提供的文字標籤建立工作複選框和單選按鈕集。

  1. 將第一個 <fieldset> 的內容變成一組單選按鈕 - 您一次只能選擇一個小馬角色。
  2. 使其在頁面載入時選中第一個單選按鈕。
  3. 將第二個 <fieldset> 的內容變成一組複選框。
  4. 新增您自己的幾個熱狗選擇。

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

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

基本控制元件 3

此組中的最後一項任務要求您建立檔案選擇器。

  1. 建立一個基本的的檔案選擇器。
  2. 允許使用者一次選擇多個檔案。
  3. 允許檔案選擇器僅接受 JPG 和 PNG 圖片。

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

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