Test your skills: Basic controls

The aim of this skill test is to assess whether you've understood our Basic native form controls article.

Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Basic controls 1

This task starts you off nice and gently by asking you to create two <input> elements, for a user's ID and password, along with a submit button.

  1. Create appropriate inputs for user ID and password.
  2. You should also associate them with their text labels semantically.
  3. Create a submit button inside the remaining list item, with button text of "Log in".

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Basic controls 2

The next task requires you to create working sets of checkboxes and radio buttons, from the provided text labels.

  1. Turn the first <fieldset>'s contents into a set of radio buttons — you should only be able to select one pony character at once.
  2. Make it so that the first radio button is selected upon page load.
  3. Turn the second <fieldset>'s content into a set of checkboxes.
  4. Add a couple more hotdog choices of your own.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Basic controls 3

The final task in this set requires you to create a file picker.

  1. Create a basic file picker.
  2. Allow the user to pick multiple files at once.
  3. Allow the file picker to accept JPG and PNG images only.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.