ออบเจ็กต์ Button ใน HTML DOM

ออบเจ็กต์ Button (Button Object)

ออบเจ็กต์ Button ใน HTML DOM เกี่ยวข้องกับอิลิเมนต์ <button> ให้คุณสมบัติและเมธอดสำหรับจัดการปุ่มต่างๆ

คุณสมบัติ (Properties)

คุณสมบัติ	คำอธิบาย
`autofocus`	ตั้งค่าหรือคืนค่าว่าปุ่มโฟกัสอัตโนมัติเมื่อโหลดหน้า
`disabled`	ตั้งค่าหรือคืนค่าว่าปุ่มถูกปิดใช้งานหรือไม่
`form`	คืน reference ของฟอร์มที่มีปุ่มนี้
`formAction`	ตั้งค่าหรือคืนค่า formAction attribute (override form action)
`formEnctype`	ตั้งค่าหรือคืนค่า formEnctype attribute (override form enctype)
`formMethod`	ตั้งค่าหรือคืนค่า formMethod attribute (override form method)
`formNoValidate`	ตั้งค่าหรือคืนค่าว่าตรวจสอบฟอร์มหรือไม่เมื่อส่ง
`formTarget`	ตั้งค่าหรือคืนค่า formTarget attribute (override form target)
`name`	ตั้งค่าหรือคืนค่า name attribute
`type`	ตั้งค่าหรือคืนค่าประเภทปุ่ม (submit, button, reset)
`value`	ตั้งค่าหรือคืนค่าค่าของปุ่ม (ส่งไปกับฟอร์ม)

ไวยากรณ์ (Syntax)

การสร้าง button object

var x = document.createElement("BUTTON");

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

ตัวอย่างด้านล่างแสดงการสร้าง <button> แบบไดนามิก

<!DOCTYPE html>
<html>
<body>
    <p>Click on the below button to create a BUTTON element</p>
    <button onclick="buttonCreate()">CREATE</button>
    <br><br>
    <script>
        function buttonCreate() {
            var x = document.createElement("BUTTON");
            var t = document.createTextNode("NEW BUTTON");
            x.appendChild(t);
            document.body.appendChild(x);
        }
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: แสดงปุ่ม CREATE

คลิก CREATE: สร้างปุ่มใหม่ข้อความ "NEW BUTTON" เพิ่มท้าย body

คำอธิบายโค้ด

ปุ่ม CREATE: เรียก buttonCreate()

ฟังก์ชัน buttonCreate():

function buttonCreate() {
    var x = document.createElement("BUTTON");
    var t = document.createTextNode("NEW BUTTON");
    x.appendChild(t);
    document.body.appendChild(x);
}

คำอธิบายเพิ่มเติม

<button> แตกต่างจาก <input type="button"> - button สามารถมี HTML content ได้ (รูปภาพ, icon, formatted text)
คุณสมบัติ form* (formAction, formMethod, etc.) ใช้ override ค่าของฟอร์มพาเรนท์ (สำหรับ type="submit")
value ส่งไปกับ form data เฉพาะเมื่อปุ่มถูกใช้ submit (ไม่ใช่ทุกปุ่มในฟอร์ม)
disabled ทำให้ปุ่มไม่สามารถโต้ตอบได้ และมักแสดงสีจาง (grayed out)
autofocus ทำให้ปุ่มได้ focus อัตโนมัติเมื่อโหลดหน้า (มีได้ 1 ต่อหน้า)