วิธีล้างข้อมูลฟอร์ม (Reset Form) ใน HTML

ใช้ <input type="reset"> สร้างปุ่มล้างข้อมูลฟอร์ม คืนค่า input ทุกตัวเป็นค่าเริ่มต้น (initial value)

รูปแบบพื้นฐาน

<form>
  <input type="text" name="username" value="default">
  <input type="reset" value="Reset Form">
</form>

ตัวอย่างเต็ม

<!DOCTYPE html>
<html>
<body>
  <form>
    <label>Student Name:<br>
      <input type="text" name="sname" value="John">
    </label><br>
    <label>Student Subject:<br>
      <input type="text" name="ssubject" value="Math">
    </label><br>
    <input type="reset" value="Reset">
  </form>
</body>
</html>

พฤติกรรม

• คืนค่า value attribute เดิม (ไม่ใช่ค่าว่าง)
• checkbox/radio กลับสู่สถานะ checked attribute
• select กลับสู่ selected attribute
• ไม่ล้างค่าที่ป้อนใหม่หลังโหลดหน้า (ต้องใช้ JS)

การจัดสไตล์และ Accessibility

<button type="reset" class="btn btn-secondary">
  <svg>...</svg> Reset
</button>

• ใช้ <button type="reset"> แทน input (จัดสไตล์ง่ายกว่า รองรับ icon)
• วางไว้ที่ผู้ใช้คาดการณ์ได้ (มุมล่างซ้ายของฟอร์ม)
• พิจารณา disable หรือซ่อน หากฟอร์มสั้น (กันกดผิด)
• เพิ่ม aria-label="Reset form" หากไม่มีข้อความ

JavaScript Alternative

form.reset(); // native
form.elements.namedItem('field').value = ''; // clear specific field