Thuộc tính accept trong HTML dùng cho <input> cũng như <form>. Tuy nhiên, HTML5 không hỗ trợ thuộc tính accept cho form, do đó chúng ta sẽ thảo luận về thuộc tính accept của <input>.
Nếu bạn muốn đặt bộ lọc cho loại tệp tin người dùng có thể chọn từ input type file, hãy dùng thuộc tính accept của <input>.
Cú pháp:
<input accept="extension|audio/*|video/*|image/*|media_type">
Ở trên, tham số:
- extension: Chỉ định phần mở rộng tệp (ví dụ: .gif, .jpg, .png, .doc) mà người dùng được chọn
- audio/*: Người dùng chọn tất cả file âm thanh
- video/*: Người dùng chọn tất cả file video
- image/*: Người dùng chọn tất cả file hình ảnh
- media_type: Loại media hợp lệ, bao gồm image/png, image/tiff, image/bmp, v.v.
Ví dụ
<!DOCTYPE html> <html> <body> <h2>Xếp hạng theo môn</h2> <form action=""> <label for="stinfo">Học sinh:</label> <input type="text" id ="stinfo"><br> <label for="sub">Môn học:</label> <input type="text"><br> <label for="rank">Xếp hạng:</label> <input type="number"><br> <label for="marks">Điểm:</label> <input type="number"><br><br> <label for="result">Tải lên bảng kết quả</label><br> <input type="file" name="img" accept="image/png"><br><br> <input type="submit"> </form> </body> </html>
Kết quả
Ở trên, khi nhấp "Chọn tệp" để tải lên bảng kết quả, bạn sẽ chỉ thấy loại tệp "png" vì chúng ta đã đặt "image/png":
