Dates, times, ranges and colours
The date picker shows your local format, but .value is always yyyy-mm-dd. A value in any other format is thrown away and the box becomes empty.
Special input types give you date and time pickers, sliders, colour pickers and file choosers for free, type="hidden" carries values the person doesn't edit, and <textarea> takes text over many lines.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a booking section with a date (only from 2025-01-01), a time, and a guests slider from 1 to 8 that starts at 2.
Write a job application form that uploads one PDF résumé and has a multi-line cover letter box.
Explain it without notes
What format does a date input's value use, and why is that useful?
What three things must be true for a form to upload a file's contents?
Why must a server never trust a hidden input?
How is <textarea> different from <input type="text">?
Preview
Console
Nothing logged yet.Expected console output
date value: 2024-01-15
as a Date: 2024-01-15T00:00:00.000Z
time: 10:30 | datetime-local: 2024-01-15T10:30
range with no value starts at: 5
7 with step 5 snaps to: 5
colour: #ff8800 | default: #000000
wrong format is rejected: ""