Files, hidden fields and a textarea
The newline straight after <textarea> was dropped; the others were kept (\n is a line break). Choose a picture with the file button, then add console.log(photos.files[0].name) to see it.
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
enctype: multipart/form-data
accept: image/png, image/jpeg, .webp | multiple: true | files chosen: 0
hidden userId: 42
textarea value: "Hello,\n this keeps its line breaks."
Fields sent: [ 'userId', 'photos', 'msg' ]