测试你的技能：基本控件

此技能测试的目的是评估您是否理解了我们的 基本原生表单控件 文章。

注意：您可以在此页面上的交互式编辑器或在线编辑器（如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

如果您遇到困难，可以在我们的 沟通渠道 中联系我们。

基本控件 1

此任务从简单开始，要求您创建两个 <input> 元素，用于用户 ID 和密码，以及一个提交按钮。

  1. 为用户 ID 和密码创建适当的输入。
  2. 您还应该将它们与它们的文本标签语义化地关联。
  3. 在剩余的列表项中创建一个提交按钮，按钮文本为“登录”。

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。

基本控件 2

下一项任务要求您根据提供的文本标签创建工作复选框和单选按钮集。

  1. 将第一个 <fieldset> 的内容变成一组单选按钮 - 您一次只能选择一个小马角色。
  2. 使其在页面加载时选中第一个单选按钮。
  3. 将第二个 <fieldset> 的内容变成一组复选框。
  4. 添加您自己的几个热狗选择。

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。

基本控件 3

此组中的最后一项任务要求您创建文件选择器。

  1. 创建一个基本的的文件选择器。
  2. 允许用户一次选择多个文件。
  3. 允许文件选择器仅接受 JPG 和 PNG 图片。

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。