测试你的技能：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 将在滑块移动时自动更新输出值。

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

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