home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติชื่อช่วงอินพุต HTML DOM

คุณสมบัติชื่อช่วงอินพุต HTML DOM ใช้สำหรับการตั้งค่าหรือส่งคืนแอตทริบิวต์ชื่อของฟิลด์ช่วงอินพุต แอตทริบิวต์ชื่อช่วยในการระบุข้อมูลแบบฟอร์มหลังจากที่ถูกส่งไปยังเซิร์ฟเวอร์แล้ว JavaScript ยังใช้แอตทริบิวต์ชื่อเพื่ออ้างอิงองค์ประกอบของแบบฟอร์มเพื่อจัดการในภายหลังได้

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติชื่อ -

rangeObject.name = name

ตัวอย่าง

ในที่นี้ ชื่อสำหรับระบุชื่อตัวควบคุมแถบเลื่อนช่วง

เรามาดูตัวอย่างคุณสมบัติชื่อช่วงกัน −

<!DOCTYPE html>
<html>
<body>
<h1>Input range name Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the name of the above range control by clicking the below button</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
   function changeName() {
      document.getElementById("RANGE1").name ="VOLUME" ;
      document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
   }
</script>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติชื่อช่วงอินพุต HTML DOM

เมื่อคลิกปุ่ม CHANGE NAME -

คุณสมบัติชื่อช่วงอินพุต HTML DOM

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

เราได้สร้างช่องใส่ข้อมูลที่อยู่ภายในแบบฟอร์มที่มี type=“range”, id=“RANGE1” , name=“VOL” −

<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
<form>

เราได้สร้างปุ่ม CHANGE NAME ซึ่งจะรันเมธอด changeName() เมื่อผู้ใช้คลิก -

<button type="button" onclick="changeName()">CHANGE NAME</button>

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

function changeName() {
   document.getElementById("RANGE1").name ="VOLUME" ;
   document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}