File Upload (single, multiple, drag-and-drop)

<!-- Single image only -->
<input type="file" name="avatar" accept="image/*">

<!-- Multiple specific extensions -->
<input type="file" name="docs" accept=".pdf,.doc,.docx" multiple>

<!-- Mobile: open the camera directly instead of the file picker -->
<input type="file" name="photo" accept="image/*" capture="environment">

<!-- Custom-styled drop zone — wrap the (hidden) input in a label -->
<label class="dropzone">
    <input type="file" name="upload" accept="image/*" hidden>
    <span class="dz-icon">📤</span>
    <span class="dz-text">Click or drag a file here</span>
    <span class="dz-hint">JPG / PNG / GIF · up to 5 MB</span>
</label>

<style>
.dropzone {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 28px; border: 2px dashed #cbd5e1;
    border-radius: 10px; cursor: pointer; transition: border-color .15s;
}
.dropzone:hover { border-color: #3b82f6; }
.dz-icon { font-size: 1.5rem; }
.dz-text { font-weight: 600; }
.dz-hint { font-size: 0.8rem; color: #6b7280; }
</style>