Text and choice controls
File inputs
Accept files with the native file control, restrict suggested formats, and understand that server-side checks remain essential.
8 minute lesson
Use type="file" to let a visitor choose a local file. The browser does not send the file until the form is submitted.
<form action="/profile/photo" method="post" enctype="multipart/form-data">
<label for="photo">Profile photo</label>
<input id="photo" name="photo" type="file" accept="image/png,image/jpeg">
<button type="submit">Upload photo</button>
</form>
The name identifies the file part. multipart/form-data lets the request carry binary file bytes alongside ordinary text fields.
accept guides the file picker. It can reduce mistakes, but it is not a security boundary. A custom client can upload any bytes with any filename and declared media type.
The server must set a request-size limit, check that a file exists, inspect its actual type, and decide whether the format is allowed. It should generate its own storage name rather than using the original filename as a path.
Add multiple only when the endpoint and interface support several files. The request then contains repeated file parts under the same name, and every file needs its own validation.
Do not automatically display a chosen filename as trusted HTML. Treat filenames as user input.
Try submitting the form with no file, a valid image, and a renamed non-image file. The browser may guide the first two cases. Only the server can make the final decision.
Lesson completed