คุณสมบัติแบบฟอร์มช่วงอินพุต HTML DOM

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

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติของฟอร์มช่วงอินพุต

rangeObject.form

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติช่วงอินพุตของฟอร์ม -

<!DOCTYPE html>
<html>
<body>
<h1>Input range form Property</h1>
<form id="FORM1">
<input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the form id which contains the above range slider 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("RANGE1").form.id;
      document.getElementById("Sample").innerHTML = "The id of the form containing the range slider is: "+P ;
}
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติแบบฟอร์มช่วงอินพุต HTML DOM

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

คุณสมบัติแบบฟอร์มช่วงอินพุต HTML DOM

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

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มีประเภท=“ช่วง”, id=“RANGE1”, ชื่อ=“VOL” แบบฟอร์มมีการตั้งค่าแอตทริบิวต์ id เป็น “FORM1” −

<form id=”FORM1”>
<input type="range" id="RANGE1" name="VOL">
</form>

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

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

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

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