home

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

คุณสมบัติการดำเนินการแบบฟอร์ม HTML DOM

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

ไวยากรณ์

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

ตั้งค่าคุณสมบัติการดำเนินการแบบฟอร์ม -

formObject.action = URL

ที่นี่ URL ระบุที่อยู่เพื่อส่งข้อมูลแบบฟอร์มไป อาจเป็น URL แบบสัมบูรณ์หรือ URL แบบสัมพัทธ์

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function changeAction() {
      document.getElementById("FORM1").action = "/example_web.asp";
      document.getElementById("Sample").innerHTML = "The action attribute value of the form is
      changed to /example_web.asp";
   }
</script>
</head>
<body>
<h1>Form action property example</h1>
<form id="FORM1" action="/sample.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAction()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

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

คุณสมบัติการดำเนินการแบบฟอร์ม HTML DOM

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

คุณสมบัติการดำเนินการแบบฟอร์ม HTML DOM

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

เราได้สร้างแบบฟอร์มด้วย id="Form1" และการกระทำ "/sample.php" ค่าแอ็ตทริบิวต์ action ระบุว่าข้อมูลในแบบฟอร์มจะถูกส่งไปยังหน้า sample.php และ URL ที่เกี่ยวข้อง แบบฟอร์มประกอบด้วยช่องข้อความและช่องรหัสผ่าน

<form id="FORM1" action="/sample.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

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

<button onclick="changeAction()">CHANGE</button>

เมธอด changeAction() รับองค์ประกอบ “FORM1” และตั้งค่าคุณสมบัติการดำเนินการเป็น “/example_web.asp” การใช้คุณสมบัติ innerHTML ของย่อหน้าที่มีรหัส "ตัวอย่าง" เราจะแสดงการเปลี่ยนแปลงนี้โดยแสดงข้อความให้ผู้ใช้เห็น -

function changeAction() {
   document.getElementById("FORM1").action = "/example_web.asp";
   document.getElementById("Sample").innerHTML = "The action attribute value of the form is changed to /example_web.asp";
}