HTML DOM Input Button type Property - ตรวจสอบประเภทปุ่ม

คุณสมบัติ type ของ HTMLInputElement (เฉพาะ type button/submit/reset) ใช้ **อ่านประเภทของปุ่ม** เป็นค่า read-only ไม่สามารถเปลี่ยนได้ผ่าน JavaScript (ต้องเปลี่ยน attribute โดยตรง)

รูปแบบการใช้งาน

// อ่านค่าเท่านั้น (read-only)
const buttonType = inputElement.type;
// ผลลัพธ์: "submit" | "button" | "reset" | "image" | "file" | etc.

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM type Property</title>
  <style>
    body { text-align: center; font-family: sans-serif; padding: 2rem; }
    .btn { 
      display: block; 
      margin: 1rem auto; 
      background: #db133a; 
      color: #fff; 
      border: 1px solid #db133a; 
      padding: 0.75rem 2rem; 
      border-radius: 50px; 
      width: 40%; 
      max-width: 200px;
      font-size: 1rem;
      cursor: pointer;
    }
    .show-type { 
      font-weight: bold; 
      font-size: 1.4rem; 
      color: #ffc107; 
      margin: 1rem 0;
      font-family: monospace;
      background: #f5f5f5;
      padding: 0.5rem;
      border-radius: 4px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>type Property Example</h1>
  
  <input type="submit" 
         class="btn" 
         value="คลิกเพื่อดู type ของฉัน" 
         onclick="showType()">
  
  <div class="show-type" id="display"></div>
  
  <hr>
  
  <h3>ทดสอบประเภทต่างๆ</h3>
  <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 1rem 0;">
    <input type="button" value="Button" onclick="showType(this)">
    <input type="submit" value="Submit" onclick="showType(this)">
    <input type="reset" value="Reset" onclick="showType(this)">
    <input type="image" src="data:image/svg+xml,<svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/></svg>" onclick="showType(this)">
  </div>
  <div class="show-type" id="display2"></div>
  
  <script>
    function showType(btn) {
      const target = btn || document.querySelector('.btn');
      const display = btn ? document.getElementById('display2') : document.getElementById('display');
      display.textContent = 'type = "' + target.type + '"';
    }
  </script>
</body>
</html>

ค่าที่เป็นไปได้ของ type attribute

การตรวจสอบ type แบบ Dynamic

<script>
  // ตรวจสอบทุกปุ่มในฟอร์ม
  function auditFormButtons(form) {
    const buttons = form.querySelectorAll('input[type="button"], input[type="submit"], input[type="reset"], button');
    
    buttons.forEach(btn => {
      console.log({
        type: btn.type,
        tagName: btn.tagName,
        value: btn.value,
        name: btn.name,
        willSubmit: btn.type === 'submit' || (btn.tagName === 'BUTTON' && btn.type !== 'button')
      });
    });
  }
  
  // ใช้งาน
  document.querySelector('form').addEventListener('submit', (e) => {
    const submitter = e.submitter; // ปุ่มที่กด submit
    if (submitter) {
      console.log('Form submitted by:', submitter.type, submitter.name, submitter.value);
    }
  });
</script>

กรณีใช้งานจริง

• Form validation - ตรวจสอบว่าปุ่มที่กดคือ submit หรือ button
• Dynamic form generation - สร้างปุ่มตาม config ตรวจสอบ type
• Testing/Automation - ยืนยัน type ถูกต้อง
• Analytics - track ประเภทปุ่มที่ผู้ใช้โต้ตอบ

button element (แท็ก <button>)

<button> ก็มี .type property เช่นกัน ค่าเริ่มต้นคือ "submit":

<button type="button">Button</button>     // type = "button"
<button type="submit">Submit</button>   // type = "submit"  
<button type="reset">Reset</button>     // type = "reset"
<button>Default</button>                 // type = "submit" (default!)