Skip to content

Form Field Exploration Challenge

HTML has many useful input types beyond just text boxes and checkboxes, like sliders, color pickers, and date selectors. In this challenge, you’ll discover and experiment with 4 lesser-known input types and reflect on how they can improve user experience.

Instructions

1. Explore at Least 5 New Input Types

Choose four from this list (or ask if you’d like to try something not listed):

  • number
  • tel
  • url
  • search
  • date
  • time
  • month
  • week
  • range
  • color
  • file
  • hidden
  • image (used as a submit button)

2. Build a Mini Demo Form

Create a simple HTML form that includes your 4 selected input types. Add simple styles to the form so it is usable and easy to read. Save the HTML and CSS to a folder named FormFieldChallenge.

  • Use proper <label> elements for each field
  • Include a <fieldset> and <legend> to group your form content
  • Add a submit button that goes to the green Echo screen like in Project 3.

3. Reflect on What You Learned

In a separate file or in comments in your HTML, answer these questions:

For each input type:

  • What does it do?
  • Where would this be useful in a real-world form?
  • Was anything unexpected, confusing, or tricky about using it?

Rules & Academic Integrity

  • Your code and writing must be your own work
  • Do not use AI tools to generate the answers or code
  • Focus on trying, testing, and explaining what you discover

How to Submit

Upload your zipped form FormFieldChallenge folder and your reflection document (if separate) to Brighspace under Challenges > Form Field Exploration.