A file input submits a selected file as part of a multipart form request when the form uses the matching encoding.
Make this comfortable
HTML file upload forms: declare multipart encoding and bound the server
Use it for a real task
A receipt reviewer may attach a supporting document. The form states multipart/form-data and gives the file control a name. accept hints which files to show in the picker; it does not prove the bytes are a PDF, enforce size, or make the file safe to store.
<form action="/receipts/evidence" method="post" enctype="multipart/form-data">
<label for="receipt-code">Receipt ID</label>
<input id="receipt-code" name="receipt_id" value="R-47" required>
<label for="evidence-file">Supporting document</label>
<input id="evidence-file" name="evidence" type="file"
accept="application/pdf" required>
<button type="submit">Upload evidence</button>
</form>What the markup guarantees
The endpoint must limit request and file bytes, validate content, assign its own storage name, and authorize attachment to the chosen receipt. A browser-supplied filename is display metadata, not a safe path.
Cost and limits
Uploads can dominate bandwidth, disk, and parsing time. Put size and processing limits at the server boundary before expensive decoding or downstream work.
Common Mistakes
- accept is a picker hint, not content validation.
- Do not trust receipt_id or the filename from the form.
- Without multipart encoding the file data will not arrive as intended.
Connected lessons
- HTML forms: choose GET for retrieval and POST for a state change
- HTML constraint validation: improve feedback without trusting the browser
- Python Flask multipart uploads: bound the body, part count and accepted file
Related: HTML file accept: guide the picker, validate the upload on the server.
Continue with HTML multiple file input: accept several files without inventing a limit.
Continue with HTML file capture: suggest a camera without treating it as permission.
Related CSS decisions
html
forms