splitforms.com
guide · html elements

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.

html
<form action="https://splitforms.com/api/submit"
      method="POST"
      enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <!-- Single file, restricted to images -->
  <label>
    Profile photo
    <input name="photo" type="file" accept="image/*" required />
  </label>

  <!-- Multiple files, restricted to PDF/Word -->
  <label>
    Supporting documents (PDF or Word)
    <input name="docs" type="file" accept=".pdf,.doc,.docx" multiple />
  </label>

  <!-- Capture from device camera (mobile) -->
  <label>
    Receipt photo
    <input name="receipt" type="file" accept="image/*" capture="environment" />
  </label>

  <button type="submit">Upload</button>
</form>

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

Step 01

Set enctype=multipart/form-data on the form

The #1 forgotten step. Without it, files silently fail to upload.

Step 02

Use accept to filter the picker

accept="image/*" or accept=".pdf,.doc,.docx". Advisory only — validate server-side too.

Step 03

Add multiple for multi-file upload

multiple attribute allows selecting multiple files in one go. Submitted value becomes a File[].

Step 04

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

HTML forms

HTML Form — How to Build and Submit Forms in HTML

HTML forms

HTML Form Action — What It Does and How to Use It

Form types

Job Application Form in HTML (with File Upload for Resume)

Form types

Warranty Form in HTML — Working Code Template

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 →