คุณสมบัติ method ของ HTML <form>
คำนำทางและการใช้งาน
method เครื่องมือกำหนดวิธีการส่งข้อมูลฟอร์ม (ข้อมูลฟอร์มจะถูกส่งไปยังหน้าที่กำหนดโดยคุณสมบัติ action)
ข้อมูลฟอร์มสามารถส่งได้ทั้งเป็นตัวแปร URL (ใช้ method="get") หรือในรายการ HTTP POST (ใช้ method="post")
เกี่ยวกับ GET:
- แอนุญาตให้ฟอร์มข้อมูลเสริมเป็นรูปแบบชื่อ/ค่าใน URL
- URL มีขนาดเส้นทางจำกัด (ประมาณ 3,000 ตัวอักษร)
- อย่าใช้ GET ส่งข้อมูลที่ละเอียดอ่อน! (จะแสดงใน URL)
- มีประโยชน์มากสำหรับฟอร์มที่ผู้ใช้ต้องการเพิ่มผลลัพธ์เป็นทาสกรรม
- GET มีความเหมาะสมสำหรับข้อมูลที่ไม่มีความปลอดภัย อย่างเช่น ข้อความค้นหาใน Google
รายละเอียดเกี่ยวกับ POST
- แอนนอกข้อมูลฟอร์มในข้อความของคำขอ HTTP (ข้อมูลจะไม่แสดงใน URL)
- ไม่มีขอบเขตขนาดของข้อมูล
- ฟอร์มที่ส่งด้วย POST ไม่สามารถใช้ในการทำหน้าที่ที่เกี่ยวกับหน้าเมนูหลังจากการคลิกได้
ตัวอย่าง
ตัวอย่าง 1
ส่งฟอร์มด้วยวิธี "get":
<form action="/action_page.php" method="get"> <label for="fname">ชื่อ:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">นามสกุล:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="ส่งข้อมูล"> </form>
ตัวอย่าง 2
ส่งฟอร์มด้วยวิธี "post":
<form action="/action_page.php" method="post"> <label for="fname">ชื่อ:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">นามสกุล:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="ส่งข้อมูล"> </form>
สัญาณวากย์
<form method="get|post">
ค่าของแปร
| ค่า | รายละเอียด |
|---|---|
| get | ค่าปริยาย. แอนนอกข้อมูลฟอร์มในรูปของนาม/ค่า: URL?name=value&name=value |
| post | ส่งข้อมูลฟอร์มในรูปของการทำการ HTTP POST |
รายละเอียดตัวแปร method
บราวเซอร์จะใช้วิธีที่กำหนดในตัวแปร method ของฟอร์มเพื่อส่งข้อมูลให้กับเซิร์ฟเวอร์เพื่อการประมวลผล. มีสองวิธี: POST และ GET.
หากใช้วิธี POST บราวเซอร์จะส่งข้อมูลตามสองขั้นตอนด้านล่าง. ก่อนหน้านี้ บราวเซอร์จะต่อสัมพันธ์กับเซิร์ฟเวอร์ที่กำหนดในตัวแปร action ของฟอร์ม หลังจากที่ต่อสัมพันธ์เสร็จแล้ว บราวเซอร์จะส่งข้อมูลให้กับเซิร์ฟเวอร์ด้วยวิธีโหลดแบ่งชิ้น.
บนเซิร์ฟเวอร์ เมื่อโปรแกรมที่มีรูปแบบ POST เริ่มทำงาน ควรอ่านค่าที่มีสัญาณตั้งตาราง และก่อนที่โปรแกรมจะสามารถใช้ค่าฟอร์มนี้ก่อน ควรเปิดค่าที่อ่านมาด้วยการเดโคด์. โปรแกรมที่เซิร์ฟเวอร์เฉพาะผู้ใช้จะกำหนดแนวทางที่โปรแกรมควรรับค่านี้.
ในกรณีนี้ จะใช้วิธี GET ในการส่งข้อมูล โดยเมื่อบราวเซอร์จะต่อสัมพันธ์กับเซิร์ฟเวอร์ที่จัดการฟอร์ม แล้วจะส่งข้อมูลทั้งหมดของฟอร์มในการโหลดเดียว: บราวเซอร์จะแอนนอกข้อมูลเข้าหลัง URL ที่ action ของฟอร์ม ทั้งสองรายการจะแยกด้วยสัญาณอักขระระหว่างรูปหมายประกาศ.
เบราเซอร์ทั่วไปสามารถส่งข้อมูลฟอร์มด้วยวิธีทั้งหมดดังกล่าว แต่บางเซิร์ฟเวอร์ยอมรับแค่หนึ่งวิธี คุณสามารถระบุวิธีที่เซิร์ฟเวอร์จะใช้ในการจัดการข้อมูลด้วยตัวแปร method (วิธี) ในแบบฟอร์ม <form>
POST หรือ GET?
ถ้าเซิร์ฟเวอร์ที่จัดการฟอร์มสนับสนุนวิธี POST และ GET คุณควรเลือกวิธีใด ดังนี้เป็นบทแนะนำ:
- ถ้าต้องการการส่งผ่านฟอร์มที่มีประสิทธิภาพสูงสุด คุณสามารถใช้วิธี GET ในการส่งฟอร์มที่มีฟิลด์สั้นและน้อย
- บางระบบปฏิบัติการเซิร์ฟเวอร์จะจำกัดจำนวนและความยาวของตัวแปรที่สามารถส่งผ่านให้โปรแกรมใช้ทันที ในกรณีนี้ ฟอร์มที่มีฟิลด์หลายๆ หรือช่องข้อความยาว ควรใช้วิธี POST ในการส่ง
- ถ้าคุณมีประสบการณ์เล็กน้อยในการเขียนโปรแกรมการจัดการฟอร์มบนเซิร์ฟเวอร์ คุณควรเลือกวิธี GET ถ้าใช้วิธี POST คุณจะต้องทำงานเพิ่มเติมในการอ่านและเรียกใช้วิธี ซึ่งอาจไม่ยาก แต่อาจไม่จำเป็นที่คุณต้องการจัดการกับปัญหาเหล่านี้
- ถ้าความปลอดภัยเป็นปัญหา แล้วเราแนะนำให้ใช้วิธี POST วิธี GET จะนำตัวแปรฟอร์มส่งผ่านใน URL ของโปรแกรม ซึ่งให้ผู้สำรวจเครือข่ายเก็บข้อมูลง่ายๆ และยังสามารถยกย่องมาจากบันทึกการทำงานของเซิร์ฟเวอร์ หากตัวแปรมีข้อมูลลับเช่น บัตรเครดิต จะทำให้ความปลอดภัยของผู้ใช้เสี่ยงอย่างไม่ได้ตั้งตารฎ ในขณะที่โปรแกรม POST ไม่มีช่องโหว่ด้านความปลอดภัย และในขณะที่ข้อมูลถูกส่งผ่านให้เซิร์ฟเวอร์เป็นการโอนที่เป็นข้อตกลงเดี่ยวๆ ยังสามารถใช้วิธีเข้ารหัสด้วย
- ถ้าคุณต้องการเรียกใช้โปรแกรมบนเซิร์ฟเวอร์นอกฟอร์มและต้องการส่งผ่านตัวแปรให้เซิร์ฟเวอร์ ต้องใช้วิธี GET เพราะวิธีนี้อนุญาตให้ส่งผ่านฟอร์มเหล่านี้เป็นส่วนหนึ่งของ URL ส่วนทางตรงกันข้าม โปรแกรมที่ใช้รูปแบบ POST ต้องการมีการส่งผ่านข้อมูลเพิ่มเติมจากเบราเซอร์ ซึ่งไม่สามารถใช้เป็นส่วนของเนื้อหาแบบฟอร์ม <a> ได้
ส่งผ่านตัวแปรชัดเจน
บทแนะนำดังกล่าวก็สามารถใช้เป็นหลักการเลือกวิธีนี้บางส่วน ซึ่งเช่น หากคุณมีฟอร์มที่เรียบง่ายๆ และมีตัวแปรเพียง x และ y โดยมีรูปแบบดังนี้:
x=28&y=66
ถ้าฟอร์มใช้ method=GET แล้ว รูปแบบ URL ที่ใช้เรียกใช้โปรแกรมบนเซิร์ฟเวอร์จะเป็นแบบดังนี้:
http://www.example.com/example/program?x=28&y=66
ในทุกกระทงเราสามารถสร้างแบบฟอร์มธรรมดา <a> และใช้มันเรียกใช้ฟอร์มที่มีตัวแปรที่กำหนดค่า โดยมีรูปแบบดังนี้:
<a href="http://www.example.com/example/program?x=28&y=66">
ปัญหาเดียวคือสัญญาณ & ที่ใช้ในการแยกตัวประกาศเป็นตัวเทียบของตัวเทียบตัวเลข ถ้าใส่สัญญาณ & ในอัตราะบาท href ของแท็ก <a> โปรแกรมบราวเซอร์จะแทนที่ตัวอักษรหลังจากสัญญาณ & ด้วยตัวเทียบตัวเลขที่เท่ากัน
เพื่อป้องกันปัญหานี้ เราต้องใช้ตัวเทียบที่เท่ากันของมันเพื่อแทนที่สัญญาณ & ดังนั้นใช้ "&" หรือ "&" แทน หลังจากที่แทนที่เสร็จ ตัวอย่างการอ้างอิงสำหรับโปรแกรมเซิร์ฟเวอร์ที่ไม่ใช้ฟอร์มของ HTML จะดูเช่นนี้
<a href="http://www.example.com/example/program?x=28&y=66">
ด้วยเหตุที่เช่นนี้ ยังไม่สามารถใช้สัญญาณ & ใน URL ได้ และอาจนำไปสู่ความสับสนในอนาคต ดังนั้นเราเน้นการให้บริการเซิร์ฟเวอร์ที่สามารถรับสัญญาณประมาณที่ใช้ขีดกำตั้ง (;) ในที่สุดด้วย คุณก็สามารถดูเอกสารเซิร์ฟเวอร์ของคุณด้วยเพื่อตรวจสอบว่าเซิร์ฟเวอร์นี้สนับสนุนความสามารถนี้หรือไม่
การสนับสนุนเบราเซอร์
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน |
