スキルテスト: 基本的なコントロール

このスキルテストの目的は、あなたが基本的なネイティブフォームコントロールの記事を理解したかどうかを評価することです。

メモ: このページのインタラクティブエディターや、CodePenJSFiddleGlitchなどのオンラインエディターで解決策を試すことができます。

もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。

基本的なコントロール 1

この課題は、ユーザー ID とパスワードのための 2 つの <input> 要素と送信ボタンを作成するという、簡単なところから始めましょう。

  1. ユーザー ID とパスワードの適切な入力フィールドを作成します。
  2. また、これらのテキストラベルを意味づけしてください。
  3. 残りのリストアイテムの中に、"Log in" というボタンテキストで送信ボタンを作成します。

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

この課題の開始点をダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。

基本的なコントロール 2

次の課題では、指定されたテキストラベルから、チェックボックスとラジオボタンの動作セットを作成していただきます。

  1. 最初の <fieldset> のコンテンツをラジオボタンの設定にしてください。一度に 1 頭のポニーしか選択できないようにしてください。
  2. ページを読み込んだときに最初のラジオボタンが選択されるようにします。
  3. 2 つ目の <fieldset> のコンテンツをチェックボックスの設定にします。
  4. 自分自身でホットドッグの選択肢を追加します。

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

この課題の開始点をダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。

基本的なコントロール 3

一連の最後の課題として、ファイルピッカーを作成していただきます。

  1. 基本的なファイルピッカーを作成します。
  2. ユーザーが一度に複数のファイルを選択できるようにします。
  3. ファイルピッカーは JPG と PNG 画像のみ受け入れられるようにします。

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

この課題の開始点をダウンロードすると、自分のエディターやオンラインエディターで取り組むことができます。