คุณสมบัติประเภทปุ่ม HTML DOM เชื่อมโยงกับองค์ประกอบ HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติประเภทปุ่ม -
buttonObject.type = "submit|button|reset"
ในที่นี้ การส่ง|ปุ่ม|รีเซ็ตเป็นค่าประเภทปุ่ม การส่งถูกกำหนดโดยค่าเริ่มต้น
- ส่ง − ทำให้ปุ่มเป็นปุ่มส่ง
- ปุ่ม − ทำให้ปุ่มคลิกได้ปกติ
- รีเซ็ต - สร้างปุ่มรีเซ็ตที่รีเซ็ตข้อมูลแบบฟอร์ม
ตัวอย่าง
ให้เราดูตัวอย่างของคุณสมบัติประเภทปุ่ม HTML DOM -
<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>First Name: <input type="text" name="fname"><br><br></label>
<label>Surname: <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>Click the below button below to change the type of the above button from "submit" to "reset".</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset
button";
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อกรอกรายละเอียดแล้วคลิกเปลี่ยน -
ตอนนี้คลิกที่ส่ง (ซึ่งขณะนี้ถูกรีเซ็ต) -
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้างฟิลด์ข้อความสองฟิลด์และปุ่มที่มีประเภท "ส่ง" ที่จะส่งข้อมูลของเรา -
<label>First Name: <input type="text" name="fname"><br><br></label> <label>Surname: <input type="text" name="lname"><br><br></label> <button id="Button1" type="submit">Submit</button>
เราได้สร้างปุ่ม CHANGE ที่จะรันเมธอด changeType() เมื่อคลิก -
<button onclick="changeType()">CHANGE</button>
เมธอด changeType() รับองค์ประกอบปุ่มโดยใช้ id และตั้งค่าประเภทเพื่อรีเซ็ต จากนั้นข้อความเกี่ยวกับการเปลี่ยนแปลงจะแสดงในย่อหน้าด้วยตัวอย่าง "Id" ตอนนี้เมื่อคุณคลิกที่ปุ่มส่ง มันจะรีเซ็ตเช่นล้างข้อมูลแบบฟอร์มแทนที่จะส่ง -
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
} 