แบบฟอร์ม HTML DOM Input Radio คุณสมบัติ

คุณสมบัติแบบฟอร์ม HTML DOM Input Radio ใช้สำหรับส่งคืนการอ้างอิงแบบฟอร์มที่มีปุ่มตัวเลือกอินพุตที่กำหนด หากปุ่มตัวเลือกอยู่นอกแบบฟอร์ม ก็จะคืนค่าเป็น NULL คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติรูปแบบวิทยุอินพุต -

radioObject.form

ตัวอย่าง

เรามาดูตัวอย่างคุณสมบัติ Input radio form กันเถอะ

<!DOCTYPE html>
<html>
<body>
<h1>Input radio form Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>
<p>Get the form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
   function formId() {
      var P=document.getElementById("Mango").form.id;
      document.getElementById("Sample").innerHTML = "The id of the form containing the radio
      button is: "+P ;
   }
</script>
</body>
</html>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

แบบฟอร์ม HTML DOM Input Radio คุณสมบัติ

เมื่อคลิกปุ่ม GET FORM -

แบบฟอร์ม HTML DOM Input Radio คุณสมบัติ

ในตัวอย่างข้างต้น −

ขั้นแรก เราได้สร้างองค์ประกอบอินพุตภายในแบบฟอร์มด้วย type=”radio”, name=”fruits”, id=”Mango” แบบฟอร์มนี้ตั้งค่าแอตทริบิวต์ id เป็น ”FORM1” −

<form id=”FORM1”>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

จากนั้นเราได้สร้างปุ่ม GET FORM ที่จะรันเมธอด formId() เมื่อผู้ใช้คลิก -

<button type="button" onclick="formId()">GET FORM</button>

เมธอด formId() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตที่มีวิทยุประเภท และรับคุณสมบัติ id ของอ็อบเจ็กต์ฟอร์มที่มีปุ่มตัวเลือก จากนั้นกำหนดค่านี้ให้กับตัวแปร P และแสดงในย่อหน้าด้วย id "ตัวอย่าง" โดยใช้คุณสมบัติ innerHTML -

function formId() {
   var P=document.getElementById("Mango").form.id;
   document.getElementById("Sample").innerHTML = "The id of the form containing the password field is: "+P ;
}