HTML DOM Input Button value Property - คุณสมบัติ value ของปุ่ม

คุณสมบัติ value ของ HTMLInputElement (type=button/submit/reset) ใช้ **อ่านหรือเปลี่ยนข้อความที่แสดงบนปุ่ม** (button label) และค่าที่จะส่งไปกับฟอร์มเมื่อ submit

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

// อ่านค่า
const btnValue = buttonElement.value;

// ตั้งค่า
buttonElement.value = "ข้อความใหม่";

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

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM value 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: 80%; 
      max-width: 350px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(219,19,58,0.3); }
    .show-value { 
      font-weight: bold; 
      font-size: 1.2rem; 
      color: #ffc107; 
      margin: 1rem 0;
      min-height: 1.5em;
    }
  </style>
</head>
<body>
  <h1>value Property Example</h1>
  
  <input type="submit" 
         class="btn" 
         value="คลิกเพื่อเปลี่ยนข้อความของฉัน" 
         onclick="changeValue()">
  
  <div class="show-value" id="display"></div>
  
  <script>
    function changeValue() {
      const btn = document.querySelector('.btn');
      const display = document.getElementById('display');
      
      // แสดงค่าเดิม
      display.textContent = 'ค่า value เดิม: ' + btn.value;
      
      // เปลี่ยนค่า
      btn.value = 'ยินดีด้วย! คุณเปลี่ยน value เรียบร้อยแล้ว';
      
      // เปลี่ยนสไตล์ให้เห็นความแตกต่าง
      btn.style.background = '#4CAF50';
      btn.style.borderColor = '#4CAF50';
    }
  </script>
</body>
</html>

ความแตกต่าง value ในแต่ละ type

type	value attribute	พฤติกรรม
`submit`	ข้อความบนปุ่ม + ส่งค่าไป server	แสดงบนปุ่ม, ส่ง name=value
`button`	ข้อความบนปุ่ม	แสดงบนปุ่ม, ไม่ส่งอัตโนมัติ
`reset`	ข้อความบนปุ่ม	แสดงบนปุ่ม, รีเซ็ตฟอร์ม
`text/email/password`	ค่าเริ่มต้นในฟิลด์	แสดงในฟิลด์, ส่งค่าที่พิมพ์
`hidden`	ค่าที่ซ่อนอยู่	ไม่แสดง, ส่งไป server

button tag vs input button

<!-- input button - ใช้ value เป็น label -->
<input type="submit" value="Submit" name="action">

<!-- button tag - ใช้ innerHTML เป็น label (ยืดหยุ่นกว่า) -->
<button type="submit" name="action" value="submit">
  <span><svg>...</svg> Submit</span>
</button>

// ทั้งคู่มี .value property
document.querySelector('button').value; // "submit"
document.querySelector('input').value;  // "Submit"

การใช้งานไดนามิก

<script>
  const btn = document.querySelector('.btn');
  
  // Loading state
  btn.addEventListener('click', async () => {
    const originalValue = btn.value;
    btn.value = 'กำลังดำเนินการ...';
    btn.disabled = true;
    
    try {
      await submitForm();
      btn.value = 'สำเร็จ! ✓';
      btn.style.background = '#4CAF50';
    } catch (error) {
      btn.value = 'ล้มเหลว - ลองอีกครั้ง';
      btn.style.background = '#f44336';
    } finally {
      setTimeout(() => {
        btn.value = originalValue;
        btn.disabled = false;
        btn.style.background = '';
      }, 2000);
    }
  });
</script>

การเข้าถึง (Accessibility)

ค่า value ควรสื่อความหมายชัดเจน (ไม่ใช่แค่ "Click here")
สำหรับ <button> ให้ใช้ innerHTML แทน value สำหรับ label
ใช้ aria-label หาก label ไม่ชัดเจน