HTML File Input — Upload Field Reference and Patterns
An HTML file input is `<input type="file">`. The `accept` attribute filters the file picker; `multiple` allows multi-file selection. The form needs `enctype="multipart/form-data"` for files to actually upload — the #1 forgotten step.
The HTML file input is `<input type="file">`. Clicking it opens the OS file picker; selected files are attached to the form on submission. For the upload to actually work, the parent form must have `enctype="multipart/form-data"` — this is the most-forgotten step that silently breaks file uploads.
The `accept` attribute filters the file picker by MIME type or file extension. `accept="image/*"` shows only images; `accept=".pdf,.doc,.docx"` shows only those specific extensions. accept is advisory — it doesn't enforce types server-side. Always validate file types again on the backend.
The `multiple` attribute allows selecting multiple files in one upload. The submitted value becomes a `File[]`. The `capture` attribute (mobile only) tells the device to open the camera directly: `capture="environment"` for rear camera, `capture="user"` for selfie camera. Useful for receipt uploads where you want the camera, not the gallery.
splitforms accepts file uploads up to 10 MB per file, 5 files per submission, on every plan including free. Attachments arrive as email attachments AND downloadable files in the dashboard AND signed URLs in webhooks. No separate file-hosting setup required.
How to set this up
Set enctype=multipart/form-data on the form
The #1 forgotten step. Without it, files silently fail to upload.
Use accept to filter the picker
accept="image/*" or accept=".pdf,.doc,.docx". Advisory only — validate server-side too.
Add multiple for multi-file upload
multiple attribute allows selecting multiple files in one go. Submitted value becomes a File[].
Use capture="environment" for camera capture
Mobile only — opens the rear camera directly. Useful for receipt or document photos.
enctype=multipart/form-data on the form. The one rule that catches everyone.
Frequently asked questions
How do I add a file input in HTML?
<input type="file" name="x">. The form must have enctype="multipart/form-data" for the upload to work — this is the #1 forgotten step.
What does the accept attribute do?
Filters the file picker to specific types. accept="image/*" shows only images; accept=".pdf,.doc" shows only PDF and Word files. It's advisory — users can override it. Always validate file types server-side too.
How do I allow multiple file uploads?
Add the `multiple` attribute: <input type="file" multiple>. Users can select multiple files in one operation. The submitted value becomes a File[] on the backend.
How do I limit file size in HTML?
HTML has no built-in file-size limit attribute. Add a JS handler on the input that rejects files over your limit before submission. Server-side enforcement is also required — splitforms enforces 10 MB per file and rejects oversized uploads.
How do I trigger the camera from a file input on mobile?
Use the `capture` attribute: `capture="environment"` opens the rear camera, `capture="user"` opens the selfie camera. Combine with `accept="image/*"` for photo capture or `accept="video/*"` for video.
Related guides
Ship the form, not the backend.
Free for 1,000 submissions/month. Email delivery, AI spam filtering, signed webhooks, real dashboard — all on the free plan. No credit card.
Get a free access key →