スキルテスト: HTML5 のコントロール

最初に、いくつかの入力型を調べてみましょう。ユーザーが詳細を更新するために適切な入力を作成しましょう。

1. Email
2. Website
3. Phone number
4. Favorite color

下記のライブコードを更新して、完成例を再現してみてください。

次に、ユーザーがパーティーに招待する最大人数を選べるスライダーコントロールを実装していただきます。

1. 指定されたラベルに沿った基本的なスライダーコントロールを実装します。
2. 最小値 1、最大値 30、初期値 10、要素 id に max-invite を指定します。
3. スライダーの現在値を入れるために、対応する出力要素を作成します。この要素に invite-output というクラスを与え、意味づけします。これを正しく行えば、スライダーが移動されたときにページに記載されている JavaScript が自動的に出力値を更新します。

下記のライブコードを更新して、完成例を再現してみてください。