home

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

HTML DOM วิธีการแบบฟอร์ม คุณสมบัติ

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

ไวยากรณ์

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

การตั้งค่าคุณสมบัติของเมธอด -

formObject.method = get|post;

ที่นี่ get เป็นวิธีการเริ่มต้นและผนวกข้อมูลแบบฟอร์มเข้ากับ url เช่น URL?name=value&name=value. โดยปกติแล้วจะไม่ปลอดภัยและสามารถใช้สำหรับข้อมูลที่ไม่เป็นส่วนตัวได้ ผู้ใช้สามารถดูข้อมูลที่ส่งโดยดูที่สตริง URL

โพสต์วิธีที่สองส่งข้อมูลเป็นธุรกรรมการโพสต์ HTTP และมักจะปลอดภัย เนื่องจากไม่มีใครสามารถดูข้อมูลได้ในขณะที่ส่งข้อมูลไปยังเซิร์ฟเวอร์

ตัวอย่าง

มาดูตัวอย่างคุณสมบัติของ form method กัน −

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function ChangeMethod() {
      document.getElementById("FORM1").method="get";
      document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}
</script>
</head>
<body>
<h1>Form length property example</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>Change the method attribute value of the form above by clicking the below button</p>
<button onclick="ChangeMethod()">Change</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

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

HTML DOM วิธีการแบบฟอร์ม คุณสมบัติ

เมื่อคลิกปุ่มส่งและดู URL -

127.0.0.1:5500/sample_page.php

เมื่อคลิกปุ่ม "เปลี่ยน" -

HTML DOM วิธีการแบบฟอร์ม คุณสมบัติ

เมื่อคลิกปุ่ม SUBMIT ตอนนี้และดูลิงก์

127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22

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

ขั้นแรกเราได้สร้างฟอร์มที่มี id=“FORM1”, method=“post” และตั้งค่าแอตทริบิวต์การกระทำเป็น “/sample_page.php” ที่นี่ โพสต์ค่าแอตทริบิวต์ของวิธีการช่วยให้แน่ใจว่าข้อมูลในแบบฟอร์มได้รับการถ่ายโอนอย่างปลอดภัยและทุกคนไม่ได้ดู แบบฟอร์มประกอบด้วยช่องใส่ข้อมูล 2 ช่องพร้อมข้อความพิมพ์และปุ่มส่งเพื่อส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์

<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>

จากนั้นเราได้สร้างปุ่ม “เปลี่ยน” ที่จะเรียกใช้ฟังก์ชัน changeMethod() เมื่อผู้ใช้คลิก

<button onclick="ChangeMethod()">Change</button>

ฟังก์ชัน ChangeMethod() รับองค์ประกอบแบบฟอร์มโดยใช้เมธอด getElementById() วัตถุเอกสาร และตั้งค่าแอตทริบิวต์เมธอดเป็น "get" การเปลี่ยนค่าเป็น "get" หมายความว่าข้อมูลผู้ใช้สามารถแสดงใน URL ได้แล้ว การใช้คุณสมบัติ innerHTML ของย่อหน้าที่มีรหัส "ตัวอย่าง" เราจะแสดงข้อความที่ต้องการเกี่ยวกับการเปลี่ยนแปลงนี้ -

function ChangeMethod() {
   document.getElementById("FORM1").method="get";
   document.getElementById("Sample").innerHTML = "The form method is changed from 'post' to 'get' ";
}