splitforms.com
Get free key
HTML · FORM CONTROL

HTML File Input — upload files from a form (live demo)

An <input type="file"> lets a user pick one or more files from their device to upload with the form. The form must use method="post" and enctype="multipart/form-data" so the file's bytes travel in the request body. Below is a working upload form that actually submits.

Updated June 2026 · The <input type="file"> element · 12 elements in the reference

Get free access key Try the live demo
preview · html file input (upload)sandboxed · no key
§ 01Copy-paste codeworking · submits to a free backend
file-input.html
<form action="https://splitforms.com/api/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="resume">Upload your resume (PDF)</label>
  <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>

  <input type="checkbox" name="botcheck" style="display:none">
  <button type="submit">Send application</button>
</form>

Replace YOUR_ACCESS_KEY with a key from your free splitforms dashboard. The form posts to one endpoint — submissions land in your inbox and dashboard with spam filtering built in.

§ 02<input type="file"> attributes
AttributeWhat it does
acceptRestricts the picker to file types, e.g. ".pdf", "image/*", "image/png, image/jpeg". It's a hint, not a security check.
multipleBoolean. Lets the user select more than one file at once.
captureOn mobile, hints to use the camera or microphone (e.g. capture="user").
nameThe key the file(s) are submitted under. Required for the upload to be sent.
requiredBoolean. Blocks submit until a file is chosen.
§ 03Common mistakes
⚠ gotcha

You need the right enctype

Without enctype="multipart/form-data" on the <form>, the browser sends the filename as text but drops the file contents. File uploads silently fail.

⚠ gotcha

Use POST, never GET

Files can only travel in a POST body. A GET form strips them entirely.

⚠ gotcha

accept is not validation

It filters the file picker, but users can override it. Validate the type and size again on the server before storing anything.

§ 04Questions
How do I upload a file in HTML?
Use <input type="file" name="resume"> inside a <form> with method="post" and enctype="multipart/form-data". The browser sends the file in the request body to the form's action URL.
What is the correct enctype for file upload?
multipart/form-data. It encodes the form fields and the file contents as separate parts of the request body, which is required for the file to arrive intact. application/x-www-form-urlencoded (the default) drops the file data.
How do I restrict file types in an upload?
Add an accept attribute, e.g. accept=".pdf" or accept="image/png, image/jpeg". This filters what the file picker shows, but it is a UX hint only — re-validate the type and size on the server.
How do I let users upload multiple files?
Add the multiple attribute to the input: <input type="file" name="photos" multiple>. The user selects more than one file, and they are submitted as an array under the same name.
Why is my file input not uploading?
The three usual causes: the <form> is missing enctype="multipart/form-data", the method is get instead of post, or the backend receiving the action URL doesn't accept multipart uploads. Check the request in the Network tab.

Make this form actually submit.

Point your form at splitforms. 500 free submissions/month, spam filtering, webhooks — no server.

Get free access key →All HTML elements