Form Input Types - Part 2

Form Input Types: Part 2

More input types for dates, colors, files, and sliders!

Dates and times

• date: a calendar picker.
• time: a time picker.
• datetime-local: date AND time without timezone.
• month: pick a month.
• week: pick a week.

<input type="date" name="birthday">
<input type="time" name="alarm">
<input type="datetime-local" name="meeting">
<input type="month" name="month">
<input type="week" name="week">

color

A color picker. The value is a hex color like #ff0000.

<input type="color" name="favorite" value="#ff0000">

range

A slider. Great for volumes or ratings. Uses min, max, step, and a default value.

<input type="range" name="volume" min="0" max="100" value="50">

file

A "choose file" picker.

<input type="file" name="photo" accept="image/png, image/jpeg">

• accept: which file types are allowed.
• multiple: let the visitor pick more than one file.

TL;DR

• Date/time types: date, time, datetime-local, month, week.
• color = color picker, range = slider.
• file = file picker with accept and multiple.
• Browsers build the pickers for you: you just pick the type!