Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ HTML DOM Input Radio type

คุณสมบัติ type ของ input type="radio" เกี่ยวข้องกับแอตทริบิวต์ type คุณสมบัตินี้เป็น read-only และจะคืนค่า "radio" เสมอสำหรับ radio button element

ไวยากรณ์ (Syntax)

radioObject.type

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

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ type ของ Input Radio</h1>
<form>
  ผลไม้: <input type="radio" name="fruits" id="Mango">มะม่วง
  <br>
</form>
<p>คลิกปุ่มเพื่อดู type ของ input element</p>
<button type="button" onclick="radioType()">ดู Type</button>
<p id="Sample"></p>
<script>
  function radioType() {
    var P = document.getElementById("Mango").type;
    document.getElementById("Sample").innerHTML = "Type ของ input field คือ: " + P;
  }
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: Radio button "มะม่วง"

คลิก "ดู Type": แสดง "Type ของ input field คือ: radio"

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

  • Radio button: type="radio", name="fruits", id="Mango"
  • ปุ่ม "ดู Type" เรียก radioType()
  • ดึง .type property คืนค่า "radio" เสมอ

การใช้งาน: มีประโยชน์เมื่อเขียนโค้ดจัดการฟอร์มแบบไดนามิก — ตรวจสอบ type ของ element ก่อนตัดสินใจจัดการ (เช่น validate แบบต่างกันสำหรับ text, radio, checkbox, ฯลฯ)

หมายเหตุ: ตัวอย่างโค้ดต้นฉบับมีชื่อฟังก์ชันไม่สอดคล้อง (getType vs radioType) — ได้แก้ไขในตัวอย่างด้านบนแล้ว