Menu
Coddy logo textTech

Recap - Forms #2

Part of the Fundamentals section of Coddy's HTML journey — lesson 47 of 60.

challenge icon

Challenge

Easy

Let's build a simple registration form just like the one in the picture below!

Here’s what to include:

  1. A <form> tag to wrap everything together.
  2. A Username field with a label and a text input. The label should say "Username:" and use for="username". The input should have id="username", name="username", type="text", and placeholder "Enter your username".
  3. An Email field with a label and an email input. The label should say "Email:" and use for="email". The input should have id="email", name="email", type="email", and placeholder "Enter your email".
  4. A Password field with a label and a password input. The label should say "Password:" and use for="userpassword". The input should have id="userpassword", name="userpassword", type="password", and placeholder "Enter your password".
  5. A group of radio buttons to let users select their type: "Student" or "Teacher". Add a paragraph or heading that says "User Type:" above the radio buttons. The "Student" radio button should have id="student", name="usertype", value="student", and a label that says "Student". The "Teacher" radio button should have id="teacher", name="usertype", value="teacher", and a label that says "Teacher". Remember: both radio buttons must have the same name attribute ("usertype") so only one can be selected at a time.
  6. A group of checkboxes to let users choose their interests: "Sports", "Music", and "Technology". Add a paragraph or heading that says "Interests:" above the checkboxes. The "Sports" checkbox should have id="sports", name="interests", value="sports", and a label that says "Sports". The "Music" checkbox should have id="music", name="interests", value="music", and a label that says "Music". The "Technology" checkbox should have id="technology", name="interests", value="technology", and a label that says "Technology". Remember: all checkboxes should have the same name attribute ("interests") since they're in the same group.
  7. A Sign Up button and a Clear button at the end of the form. The Sign Up button should have type="submit" and the Clear button should have type="reset". The Sign Up button should display the text "Sign Up" and the Clear button should display the text “Clear”.

Make sure to include proper labels and titles for a user-friendly experience!

Remember, the inputs should include these important attributes: type, id, name, and value.

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <!-- Write code here -->
    </body>
</html>

All lessons in Fundamentals