Problem Statement
Which input type is used for file uploads?
Explanation
The input type equals file is used for file uploads in HTML forms. It displays a button that opens the file browser when clicked, allowing users to select files from their device. The file input can accept various file types controlled by the accept attribute. For example, accept equals image slash star accepts only images, accept equals dot pdf accepts only PDF files. You can allow multiple file selection using the multiple attribute. When handling file uploads, the form must use method equals POST and include enctype equals multipart slash form-data attribute. This encoding type is required for sending files to the server. File inputs are commonly used for profile pictures, document submissions, resume uploads, or any situation where users need to upload files.
Code Solution
SolutionRead Only
<!-- Basic file upload -->
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" id="file" name="document">
<button type="submit">Upload</button>
</form>
<!-- Image upload with accept -->
<form action="/upload-avatar" method="POST" enctype="multipart/form-data">
<label for="avatar">Profile Picture:</label>
<input type="file"
id="avatar"
name="avatar"
accept="image/*"
required>
<button type="submit">Upload Photo</button>
</form>
<!-- Multiple file upload -->
<form action="/upload-documents" method="POST" enctype="multipart/form-data">
<label for="files">Upload Documents:</label>
<input type="file"
id="files"
name="documents"
accept=".pdf,.doc,.docx"
multiple>
<button type="submit">Upload Files</button>
</form>
<!-- Resume upload -->
<form action="/submit-application" method="POST" enctype="multipart/form-data">
<label for="resume">Resume:</label>
<input type="file"
id="resume"
name="resume"
accept=".pdf,.doc,.docx"
required>
<button type="submit">Submit Application</button>
</form>