File Uploads and Specialist Input Types

You have learned all the core input types that make up most forms on the internet. But HTML has a few more input types that solve very specific problems really elegantly. By the end of this lesson your toolkit is going to feel a lot more complete.

Let us go through them one by one.

File Upload

Sometimes you do not just want text from the user. You want an actual file. A profile photo. A CV. A document. The type="file" input handles all of that.

When the user clicks this, their operating system's file picker opens up. They browse to the file they want, select it, and it gets attached to the form ready to be submitted.

Accepting Only Certain File Types

By default the file input accepts any file at all. If you only want images, or only PDFs, or only certain formats, you can use the accept attribute to restrict what shows up in the file picker.

The value image/* means any image format at all. You can also be specific with things like accept=".jpg, .png" if you only want those exact formats.

Allowing Multiple Files at Once

If you want the user to be able to select more than one file in a single click, add the multiple attribute.

Now the user can hold Ctrl or Cmd while selecting files and pick several at once.

One Important Thing About File Uploads

When your form includes a file upload, you need to add one extra attribute to the <form> tag itself.

That enctype attribute tells the browser to package the form data in a special way that can actually carry file contents. Without it, the file does not get sent properly. Just text fields alone do not need it, but the moment you add a file input, you need this on your form tag.

Date Input

Asking users to type a date into a plain text field is a recipe for chaos. Some people write 01/03/2025. Others write March 1st 2025. Others write 2025-03-01. You end up with completely inconsistent data that is a nightmare to work with.

The type="date" input solves this perfectly.

The browser renders a proper date picker. The user clicks it, a calendar pops up, they pick a date, and it gets recorded in a consistent format every single time. No ambiguity, no messy text to clean up.

You can also combine it with min and max to restrict which dates are selectable.

The dates in min and max must be written in the format YYYY-MM-DD. Any date outside that range will be greyed out and unselectable in the calendar.

Time Input

Similar to date, type="time" gives the user a proper time picker instead of a free text field.

The user gets a clean hour and minute selector. No more trying to parse whether someone meant 3pm or 15:00.

Color Picker

This one is genuinely fun. type="color" opens up a full color picker right in the browser.

The value sets the default color that the picker starts on. It has to be written as a hex color code, which is that six character code starting with a hash that represents a color. #ff0000 is red. #0000ff is blue. #000000 is black. #ffffff is white.

When the user picks a color and submits the form, the value that gets sent is the hex code of whatever they chose. This is useful for things like profile customization, theme builders, or any situation where you want the user to pick a color.

Range Slider

A range input gives the user a draggable slider to pick a number within a range. It is perfect for things like volume controls, ratings, price filters, or any situation where picking an exact number matters less than picking roughly how much.

min and max set the two ends of the slider. value sets where the handle starts. The user drags it left or right and the number between min and max gets recorded.

Hidden Input

This one is invisible to the user completely. They never see it, they cannot interact with it, but it gets included in the form submission just like any other field.

You might wonder why you would ever want an invisible input. Here is a real example. Say you have the same contact form on multiple pages of your website. When someone submits it you want to know which page they were on when they did it. You can put a hidden input on each version of the form with the page name as the value. The user never sees it, but when the form data arrives at your server you can see exactly where it came from.

Hidden inputs are also commonly used for security tokens and tracking IDs behind the scenes.

Password Input

You have probably already seen this one in the wild but here it is properly explained. type="password" works exactly like a text input except every character the user types gets replaced with a dot or asterisk on screen. This prevents anyone nearby from reading the password over the user's shoulder.

The actual value still gets sent with the form, the masking is purely visual. And as you learned in the method lesson, you should always use method="post" on any form containing a password input so it does not end up visible in the URL.

A Full Example Bringing It All Together

Here is a profile setup form that uses several of these new input types together.

Notice the enctype on the form tag because of the file input. Notice the hidden input at the bottom that the user never sees. Notice each fieldset grouping related things together. Every pattern from the last few lessons is showing up here working together naturally.