แอตทริบิวท์ accept ใน HTML

แอตทริบิวท์ accept ใน HTML ใช้สำหรับ <input> และ <form> อย่างไรก็ตาม HTML5 ไม่รองรับ form accept attribute ดังนั้นเราจะพูดถึง <input> accept attribute

หากคุณต้องการตั้งค่าตัวกรองสำหรับประเภทไฟล์ที่ผู้ใช้สามารถเลือกได้จาก input type file ให้ใช้ <input> accept attribute

รูปแบบการใช้งานมีดังนี้:

<input accept="extension|audio/*|video/*|image/*|media_type">

พารามิเตอร์ข้างต้น:

extension: ระบุนามสกุลไฟล์ (เช่น .gif, .jpg, .png, .doc) ที่ผู้ใช้สามารถเลือกได้
audio/*: ผู้ใช้เลือกไฟล์เสียงทั้งหมด
video/*: ผู้ใช้เลือกไฟล์วิดีโอทั้งหมด
image/*: ผู้ใช้เลือกไฟล์ภาพทั้งหมด
media_type: ไทป์สื่อที่ถูกต้อง รวมถึง image/png, image/tiff, image/bmp ฯลฯ

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
  <h2>อันดับตามวิชา</h2>
  <form action="">
    <label for="stinfo">นักเรียน:</label> <input type="text" id="stinfo"><br>
    <label for="sub">วิชา:</label> <input type="text"><br>
    <label for="rank">อันดับ:</label> <input type="number"><br>
    <label for="marks">คะแนน:</label> <input type="number"><br><br>
    <label for="result">อัปโหลดใบผล</label><br>
    <input type="file" name="img" accept="image/png"><br><br>
    <input type="submit">
  </form>
</body>
</html>

ผลลัพธ์

แอตทริบิวท์ accept ใน HTML

ข้างต้น เมื่อคลิก Choose File เพื่ออัปโหลดใบผล คุณจะเห็นเฉพาะประเภทไฟล์ "png" เนื่องจากเราตั้งค่า "image/png" ข้างต้น:

แอตทริบิวท์ accept ใน HTML