คุณสมบัติฟอร์ม HTML

บทบาทนี้นำเสนอ HTML <form> attribute ต่างๆ ของ element

Attribute ของ Action

action attribute นี้กำหนดการทำงานที่จะทำขณะที่ส่งแบบฟอร์ม

โดยทั่วไป ข้อมูลแบบฟอร์มจะถูกส่งไปยังไฟล์บนเซิร์ฟเวอร์เมื่อผู้ใช้กดปุ่ม "ส่ง"

ในตัวอย่างด้านล่างนี้ ข้อมูลแบบฟอร์มถูกส่งไปยังไฟล์ที่มีชื่อว่า "action_page.php" ซึ่งมีสคริปต์บนเซิร์ฟเวอร์ที่จะจัดการข้อมูลแบบฟอร์ม:

ตัวอย่าง

หลังจากส่งมอบแบบฟอร์ม จะส่งข้อมูลแบบฟอร์มไปยัง "action_page.php":

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

ทดลองด้วยตัวเอง

คำเตือน：ถ้าละเลยค่า attribute ของ action จะเริ่มต้นค่า action ให้เป็นหน้าปัจจุบัน

Attribute Target

target attribute กำหนดที่ไหนที่จะแสดงคำตอบหลังจากส่งฟอร์ม

target attribute สามารถตั้งค่าเป็นหนึ่งในค่าดังนี้

ค่า คำอธิบาย
_blank การแสดงคำตอบในหน้าต่างหรือแท็บใหม่
_self การแสดงคำตอบในหน้าต่างปัจจุบัน
_parent การแสดงคำตอบในไฟรามเบราวเซอร์
_top การแสดงคำตอบในบอดี้ของหน้าต่าง
framename การแสดงคำตอบใน iframe ที่มีชื่อ

ค่าปริยายคือ _selfซึ่งหมายความว่าการตอบสนองจะเปิดในหน้าต่างปัจจุบัน

ตัวอย่าง

ในที่นี้ ผลลัพธ์ที่ส่งไปจะเปิดในแท็บบราวเซอร์ใหม่：

<form action="/action_page.php" target="_blank">

ทดลองด้วยตัวเอง

Attribute Method

attribute method กำหนดวิธี HTTP ที่ใช้ในการส่งข้อมูลฟอร์ม

ข้อมูลฟอร์มสามารถใช้เป็นตัวแปรใน URL (ใช้ method="get") หรือในรูปแบบ HTTP post การโอน (ใช้ method="post") ส่ง

วิธี HTTP โดยเริ่มต้นคือ GET ในการส่งข้อมูลฟอร์ม

ตัวอย่าง

ตัวอย่างนี้ใช้วิธี GET ในการส่งข้อมูลฟอร์ม：

<form action="/action_page.php" method="get">

ทดลองด้วยตัวเอง

ตัวอย่าง

ตัวอย่างนี้ใช้วิธี POST ในการส่งข้อมูลฟอร์ม：

<form action="/action_page.php" method="post">

ทดลองด้วยตัวเอง

คำเตือนเกี่ยวกับ GET：

  • ติดตั้งข้อมูลฟอร์มในรูปแบบ name/value ใน URL
  • ไม่ควรใช้ GET ส่งข้อมูลละเอียดที่ปลอดภัย (ข้อมูลฟอร์มที่ส่งจะแสดงใน URL)!
  • ความยาวของ URL มีขอบเขต (2048 ตัวอักษร)
  • มีประโยชน์มากต่อการส่งฟอร์มที่ผู้ใช้ต้องการเพิ่มผลลัพธ์เป็นทางแบบหลักของหน้าเว็บ
  • GET ใช้สำหรับข้อมูลที่ไม่ปลอดภัย อย่างเช่น query string ใน Google

คำเตือนเกี่ยวกับ POST：

  • ติดตั้งข้อมูลฟอร์มในส่วนของ body ของ HTTP การขอ (ไม่แสดงข้อมูลฟอร์มที่ส่งใน URL)
  • POST ไม่มีขอบเขตขนาดข้อมูล และสามารถใช้ส่งข้อมูลมากมาย
  • การส่งฟอร์มที่มี POST ไม่สามารถเพิ่มทางแบบหลักของหน้าเว็บได้

คำเตือน：กรุณาใช้ POST ถ้าข้อมูลฟอร์มมีข้อมูลละเอียดหรือข้อมูลส่วนบุคคล!

Autocomplete attribute

autocomplete attribute กำหนดว่าฟอร์มควรเปิดใช้งานการเติมค่าอัตโนมัติหรือไม่。

เมื่อเปิดใช้งานการเติมค่าอัตโนมัติ บราวเซอร์จะกรอกค่าอัตโนมัติขึ้นตามค่าที่ผู้ใช้ได้กรอกไว้ก่อนหน้านี้。

ตัวอย่าง

เปิดใช้ฟอร์มการกรอกอัตโนมัติ：

<form action="/action_page.php" autocomplete="on">

ทดลองด้วยตัวเอง

แบบค่า Novalidate

novalidate แบบค่าเป็นแบบค่าบูล

ถ้าได้ตั้งค่าแล้ว มันกำหนดว่าไม่ควรตรวจสอบข้อมูลฟอร์มเมื่อส่ง

ตัวอย่าง

ฟอร์มที่ยังไม่ได้ตั้งค่า novalidate

<form action="/action_page.php" novalidate>

ทดลองด้วยตัวเอง

รายการแบบค่าทั้งหมดของ <form>

แบบค่า คำอธิบาย
accept-charset กำหนดตัวอักษรเข้ารหัสที่ใช้สำหรับการส่งฟอร์ม
action กำหนดที่ไหนที่จะส่งข้อมูลฟอร์มเมื่อส่งฟอร์ม
autocomplete กำหนดว่าฟอร์มควรเปิดระบบเติมเติม (การบันทึก) หรือไม่
enctype กำหนดวิธีการเข้ารหัสข้อมูลฟอร์มที่ส่งไปยังเซิร์ฟเวอร์ (เมื่อ method="post")
method กำหนดวิธีการ HTTP ที่ใช้ในการส่งข้อมูลฟอร์ม
name กำหนดชื่อฟอร์ม
novalidate กำหนดไม่ควรตรวจสอบฟอร์มเมื่อส่ง
rel กำหนดความสัมพันธ์ระหว่างสumber และเอกสารปัจจุบัน
target กำหนดที่ไหนที่จะแสดงคำตอบที่ได้รับหลังจากการส่งฟอร์ม