home

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

คุณสมบัติ method ของ HTML DOM Form

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

ไวยากรณ์

ไวยากรณ์สำหรับการตั้งค่าคุณสมบัติ method:

formObject.method = get|post;

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

เมธอดที่สอง post ส่งข้อมูลเป็นธุรกรรม HTTP post และมักปลอดภัยกว่า เนื่องจาก никтоไม่สามารถดูขณะส่งข้อมูลไปยังเซิร์ฟเวอร์

ตัวอย่าง

มาดูตัวอย่างการใช้คุณสมบัติ method ของ form:

<!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>เปลี่ยนค่าแอตทริบิวต์ method ของฟอร์มด้านบนโดยคลิกปุ่มด้านล่าง</p> <button onclick="ChangeMethod()">Change</button> <p id="Sample"></p> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

คุณสมบัติ method ของ HTML DOM Form

เมื่อคลิกปุ่ม SUBMIT และดู URL:

127.0.0.1:5500/sample_page.php

เมื่อคลิกปุ่ม “Change”:

คุณสมบัติ method ของ HTML DOM Form

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

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

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

เราสร้างฟอร์มที่มี id=“FORM1” method=“post” และ action=“/sample_page.php” แอตทริบิวต์ method เป็น post ทำให้ข้อมูลฟอร์มส่งอย่างปลอดภัยและไม่ถูกมองเห็น ฟอร์มมีช่อง input สองช่องและปุ่ม submit:

<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>

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

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

ฟังก์ชัน ChangeMethod() ดึงองค์ประกอบฟอร์มโดยใช้ getElementById() ของ document และตั้งค่าแอตทริบิวต์ method เป็น “get” การเปลี่ยนเป็น get ทำให้ข้อมูลผู้ใช้แสดงใน URL ใช้ innerHTML ของย่อหน้าที่มี id “Sample” เพื่อแสดงข้อความเกี่ยวกับการเปลี่ยนแปลง:

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