PHASE 4Intermediate ~20 min· topic 5 of 8

Topic 4.5

Dates, Ranges, Colours, Files and More

In one line

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.

Think of it like this

A toolbox. You could hammer in a screw, but a screwdriver is faster and safer. A date picker is the right tool for dates, a slider for "roughly how much", a colour picker for colours, a file chooser for photos. Each special type is a ready-made tool the browser hands you, already working with the mouse, keyboard, touch and screen readers.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Date picker: A small calendar the browser shows so you can click a date instead of typing it.
ISO 8601: A world standard for writing dates and times, such as 2024-01-15 and 10:30. Forms always send this format.
Slider: A handle you drag along a line to choose a value. Made with type="range".
Hex colour: A colour written as # plus six digits/letters, like #ff8800: two each for red, green and blue.
MIME type: A label for a kind of file, like image/png or application/pdf.
enctype: The form attribute that says how data is packed. File uploads need multipart/form-data.
Hidden input: An input that isn't shown but is sent with the form.
textarea: A box for typing several lines of text.

Step by step

01A date with limits

The browser draws the calendar. min greys out earlier days. Whatever the person sees, the value is yyyy-mm-dd.

index.htmlwhole filehtml

<label for="day">Delivery date</label>
<input id="day" name="day" type="date" min="2024-01-01" max="2024-12-31">

02A slider that shows its value

A slider on its own doesn't show its number. The <output> element is made for showing a result; a line of JavaScript keeps it in sync. (You'll learn events in the JavaScript course.)

index.htmlwhole filehtml

<label for="vol">Volume</label>
<input id="vol" name="vol" type="range" min="0" max="10" value="4"
       oninput="shown.value = this.value">
<output id="shown" for="vol">4</output>

03Uploading files

Three things must be right: type="file", method="post", and enctype="multipart/form-data". With multipart, each field travels as its own part of the body, which is how binary data like photos can be sent.

index.htmlwhole filehtml

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="pics">Photos</label>
  <input id="pics" name="photos" type="file" accept="image/*" multiple>
  <button>Upload</button>
</form>

Uploading filesdiagram

Rendering diagram…

04Passing values along with hidden

A product page might send which product the review is about. The person doesn't need to see or type it, but the server needs it.

index.htmlwhole filehtml

<form action="/reviews" method="post">
  <input type="hidden" name="productId" value="1234">
  <label for="review">Your review</label>
  <textarea id="review" name="review" rows="5"></textarea>
  <button>Post review</button>
</form>

05Textarea rules

Text between <textarea> and </textarea> is the starting value, kept exactly, spaces and line breaks included. That's why you usually write the closing tag right after the opening one for an empty box: any spaces or newlines in between become part of the value.

index.htmlwhole filehtml

<textarea name="msg" rows="4" cols="40" maxlength="500" placeholder="Write your message"></textarea>

Try it yourself

1
Change the step
In the first example, change the rating's step to 2. Predict what 7 snaps to, then run it. (Valid values are 0, 2, 4, 6, 8, 10; 6 and 8 are equally close, and the spec picks the larger: 8.)
2
See your local date format
Look at the date box in the preview: it shows your computer's format. Then check the console: still 2024-01-15. The display and the value are separate.
3
Choose real files
In the second example's preview, choose two images. Then add this line to the JS and run it after choosing again: photos.addEventListener("change", () => console.log([...photos.files].map(f => f.name + " " + f.size + " bytes")));

Code & diagrams

Dates, times, ranges and colours New tab

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.

Preview

Press Run to see the page.

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: ""

Files, hidden fields and a textarea New tab

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.

Preview

Press Run to see the page.

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' ]

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Upload without multipart

Remove enctype="multipart/form-data" from a real upload form and submit it with a file chosen.

terminal

$ Request body on the server

── what you'll see ──

userId=42&photos=holiday.jpg&msg=Hello...

Break #2

Trust a hidden price

Put <input type="hidden" name="price" value="999"> in a checkout form and charge whatever the server receives.

terminal

$ DevTools → Elements

── what you'll see ──

anyone can edit value="999" to value="1" before pressing Pay

Break #3

Indent the textarea's closing tag

Write <textarea name="msg"> on one line and </textarea> on the next, indented with spaces.

terminal

$ the page shows

── what you'll see ──

the box starts with invisible spaces, and the placeholder doesn't appear

Myth vs fact

Myth

The accept attribute stops people uploading the wrong files.

Fact

It only filters what the picker shows first; people can switch to "All files". The server must check the file type and size.

Myth

A hidden input is a safe place for secret or trusted data.

Fact

It is in the page source and can be changed by anyone before submitting.

Myth

The date value follows the format the person sees.

Fact

The value is always yyyy-mm-dd (ISO 8601); only the display is localised.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
valueAsDate reads a date input as midnight UTC, so formatting it in a time zone west of UTC shows the previous day. For date-only values, keep the yyyy-mm-dd string or use UTC getters.
▸
month and week types also exist, but desktop Firefox and Safari show them as plain text boxes, so check support before relying on them. datetime-local gives no time zone; send the zone separately if it matters.
▸
On phones, accept="image/*" plus the capture attribute (capture="environment" for the back camera) can open the camera directly.
▸
Form submission normalises textarea line breaks to CRLF (\r\n), so a 200-character limit in the browser can arrive as more bytes on the server. wrap="hard" (with cols) even inserts line breaks where the text visually wraps.

Remember this

1
Dates and times. type="date" shows a calendar, type="time" a clock, and type="datetime-local" both ("local" because there's no time zone). The picker shows the date in the person's own format (15/01/2024 in India, 1/15/2024 in the US), but the value is always the same machine format: 2024-01-15 for a date, 10:30 for a time, 2024-01-15T10:30 for both. That's the ISO 8601 standard, so your server never has to guess. min and max limit the range (Topic 4.7).
2
Range. type="range" is a slider for when the exact number matters less than the feeling: volume, brightness. It needs min and max (default 0 and 100) and has a step. With no value, it starts halfway. Because it's hard to pick an exact number with a slider, show the current value next to it, or use type="number" when precision matters.
3
Colour. type="color" opens the system colour picker. Its value is always a lowercase hex colour like #ff8800 (red, green, blue as two hex digits each); the default is #000000 (black).
4
Files. type="file" lets the person choose files from their device (or take a photo on a phone). accept lists the file types to offer, as MIME types (image/png, image/*) or extensions (.pdf); it is a hint for the picker, not a security check. multiple allows several files. To actually upload the file contents, the form needs method="post" and enctype="multipart/form-data"; otherwise only the file name is sent. For safety, a page can't set a file input's value from code; only the person can pick a file.
5
Hidden. type="hidden" is never shown but is sent with the form, for values the page needs to pass along, such as an order id or a security token. Hidden is not secret: anyone can see it in the page source and change it with DevTools before submitting, so the server must never trust it for things like prices.
6
Textarea. <textarea> is a box for many lines of text: messages, comments, addresses. Unlike <input>, it has a closing tag, and its starting text goes between the tags, not in a value attribute. rows and cols set its size in lines and characters (CSS can do it too), and maxlength, placeholder, required, readonly and disabled work like on inputs. It keeps line breaks; one newline right after the opening tag is ignored.

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">?

Practice

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.

Trade-offs

↔
Native date pickers are free, accessible and localised but look different in every browser and are hard to style; a custom JavaScript picker matches your design but costs code, size and a lot of accessibility work.
↔
A slider is quick for rough values but slow and imprecise for exact ones; pair it with a visible value or use a number input.

Done when you can

I can use date, time and datetime-local inputs and know their value formats.
I can build a range slider with min, max and step.
I can use a colour input and know its value format.
I can build a working file upload form with accept and multiple.
I know hidden inputs are visible to anyone and can be changed.
I can use a textarea correctly, including its starting text.

Command Palette

Words you'll meet

Step by step

01A date with limits

02A slider that shows its value

03Uploading files

04Passing values along with hidden

05Textarea rules

Try it yourself

Change the step

See your local date format

Choose real files

Code & diagrams

Break it on purpose

Upload without multipart

Trust a hidden price

Indent the textarea's closing tag

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can