ออบเจ็กต์ปุ่มอินพุต HTML DOM ทำหน้าที่เป็นองค์ประกอบ HTML อินพุตที่มีแอตทริบิวต์ประเภทเป็น "ปุ่ม"
ให้เราดูวิธีการสร้างวัตถุปุ่มอินพุต -
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
var newButton = document.createElement(“INPUT”); newButton.setAttribute(“type”,”value”);
ที่นี่ค่าสามารถเป็น “ปุ่ม”, “ส่ง” &“รีเซ็ต”.
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของวัตถุปุ่มอินพุต -
ทรัพย์สิน | คำอธิบาย |
---|---|
ออโต้โฟกัส | คุณสมบัตินี้ส่งคืนและแก้ไขค่าแอตทริบิวต์ออโต้โฟกัสของปุ่มอินพุตในรูปแบบ HTML |
ค่าดีฟอลต์ | ส่งกลับและแก้ไขค่าเริ่มต้นของปุ่มอินพุตใน HTML |
ปิดการใช้งาน | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ที่ปิดใช้งานของปุ่มอินพุตใน HTML |
ฟอร์ม | ส่งกลับการอ้างอิงของแบบฟอร์มที่ล้อมรอบปุ่มป้อนข้อมูล |
ชื่อ | ส่งกลับและแก้ไขค่าของแอตทริบิวต์ชื่อของปุ่มอินพุตในรูปแบบ HTML |
พิมพ์ | คุณสมบัตินี้ส่งคืนประเภทของปุ่มอินพุต เช่น ไม่ว่าจะเป็นประเภท "ปุ่ม" ประเภท "ส่ง" หรือประเภท "รีเซ็ต" |
ค่า | ส่งกลับและแก้ไขเนื้อหาของแอตทริบิวต์ค่าของปุ่มอินพุต |
ตัวอย่าง
ให้เราดูตัวอย่างของวัตถุปุ่มอินพุต DOM -
<!DOCTYPE html> <html> <head> <title>HTML DOM Input Button Object</title> <style> body{ text-align:center; } .btn{ display:block; margin:1rem auto; background-color:#db133a; color:#fff; border:1px solid #db133a; padding:0.5rem; border-radius:50px; width:60%; font-weight:bold; } .show-msg{ font-weight:bold; font-size:1.4rem; color:#ffc107; } </style> </head> <body> <h1>Input Button Object Example</h1> <input type="button" onclick="createReplica()" class="btn" value="Click to replicate me"> <div class="show-msg"></div> <script> function createReplica() { var newButton = document.createElement("INPUT"); newButton.setAttribute("type","button"); newButton.setAttribute("class","btn"); newButton.setAttribute("value","Click to replicate me"); newButton.setAttribute("onclick","createReplica()"); document.body.appendChild(newButton); } </script> </body> </html>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
คลิกที่ปุ่ม “คลิกเพื่อจำลองฉัน” เพื่อสร้างแบบจำลองใหม่ของปุ่มเดียวกัน