แอตทริบิวต์ name ของ <button>: ตั้งชื่อปุ่มสำหรับส่งค่าต่างกัน

แอตทริบิวต์ name ของ <button> คืออะไร?

แอตทริบิวต์ name ของแท็ก <button> ใช้สำหรับ ตั้งชื่อให้ปุ่ม เพื่อระบุตัวตนเมื่อส่งข้อมูลฟอร์ม ปุ่มหลายปุ่มสามารถมี name เหมือนกันได้ แต่ส่งค่า (value) ต่างกันไป

ไวยากรณ์ (Syntax)

<button name="button_name"></button>

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

<!DOCTYPE html>
<html>
<body>
  <form action="" method="get">
    ดูรายละเอียดพนักงาน:<br><br>
    <button name="details" type="submit" value="addr">ที่อยู่</button>
    <button name="details" type="submit" value="ph">โทรศัพท์</button>
    <button name="details" type="submit" value="appraisal">ประเมินผล %</button>
  </form>
</body>
</html>

ผลลัพธ์และการทำงาน

ปุ่มทั้ง 3 มี name="details" เหมือนกัน แต่เมื่อกดปุ่มใดปุ่มหนึ่ง จะส่งค่า value ที่ต่างกันไป:

• กด "ที่อยู่" → ส่ง details=addr
• กด "โทรศัพท์" → ส่ง details=ph
• กด "ประเมินผล %" → ส่ง details=appraisal

ประโยชน์

• ฝั่งเซิร์ฟเวอร์สามารถรู้ได้ว่าผู้ใช้กดปุ่มไหน จากค่า value
• ลดความซับซ้อนของการตั้งชื่อปุ่มแต่ละปุ่ม
• เหมาะสำหรับ UI ที่มีหลายการกระทำบนข้อมูลชุดเดียวกัน