- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete


- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete




- 1Accessibility in HTML
- 2Alt Text for Images
- 3ARIA Roles in HTML
- 4Semantic HTML for Accessibility
- 5Keyboard Navigation in HTML
- 6Screen Reader Accessibility in HTML
- 7HTML Best Practices for SEO
- 8HTML Meta Tags
- 9HTML Headings Best Practices
- 10Title and Meta Description Tags in HTML
- 11HTML Linking Structure
- 12HTML Clean Code Standards

File Upload in HTML Forms
input type='file' with Multiple and Accept Attributes
File Upload in HTML Forms: Let Users Send Their Files
Whether it’s uploading a resume, a photo of a cherry, or a PDF recipe, HTML's <input type="file">
makes it possible. This control allows users to select one or more files from their device and send them through a form.
Basic Syntax for File Upload
The simplest file input accepts a single file of any type:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">Upload a file:</label><br>
<input type="file" id="file" name="fruitFile"><br><br>
<input type="submit" value="Upload">
</form>
Upload a file: [Choose File] No file chosen
[Upload]
Important: Always use enctype="multipart/form-data"
in the form tag when uploading files. This tells the browser to send binary data correctly.
Accepting Specific File Types
To limit what users can upload, use the accept
attribute with file extensions or MIME types.
Images only:
<input type="file" name="fruitImage" accept="image/*">
PDFs only:
<input type="file" name="doc" accept=".pdf">
CSV or Text files:
<input type="file" name="dataFile" accept=".csv, .txt">
Choose File: Only matching types are selectable
This prevents accidental uploads of unsupported file types and streamlines user choices.
Uploading Multiple Files
To allow users to select more than one file, add the multiple
attribute:
<input type="file" name="fruitPhotos" accept="image/*" multiple>
Choose File: (you can select multiple images)
All selected files will be submitted under the same input name.
Real-World Example: Upload Fruit Photos
<form action="/submit-fruit-gallery" method="post" enctype="multipart/form-data">
<label for="applePic">Upload an apple photo:</label><br>
<input type="file" id="applePic" name="applePic" accept="image/*"><br><br>
<label for="bananaFiles">Upload multiple banana images:</label><br>
<input type="file" id="bananaFiles" name="bananaPhotos" accept="image/*" multiple><br><br>
<label for="cherryPDF">Upload cherry info (PDF only):</label><br>
<input type="file" id="cherryPDF" name="cherryDoc" accept=".pdf"><br><br>
<input type="submit" value="Submit Gallery">
</form>
[Choose File] Apple photo
[Choose Files] Banana images
[Choose File] Cherry PDF
[Submit Gallery]
Best Practices
- Always use
enctype="multipart/form-data"
on the form - Use
accept
to limit file types and prevent user confusion - Apply
multiple
only when needed to avoid clutter - Label clearly so users know what file they’re uploading
Browser Support
All major modern browsers support file input fields. If unsupported, users may see a basic text field — but this is rare today.
Summary
HTML file inputs make it easy for users to send images, documents, and more. You’ve now learned how to:
- Use
<input type="file">
- Restrict file types using
accept
- Enable multiple file uploads
- Structure forms for file transmission
What’s Next?
Next, let’s discover how Datalist inputs offer flexible suggestions without limiting user freedom — the perfect blend of control and creativity.
QUIZ
Question 1:Which HTML input type allows users to upload files from their device?
Question 2:Using the multiple
attribute in a file input allows users to select more than one file at a time.
Question 3:Which of the following are valid ways to restrict uploads to specific file types in HTML?
Question 4:What does the following code do?
<input type="file" name="assignment" accept=".pdf">
<input type="file" name="assignment" accept=".pdf">