ตัวแทนฟอร์ม HTML

บทที่นี้นำเสนอ HTML <form> ตัวแปรของ element ที่มี attribute ต่าง ๆ

Attribute ของ Action

action attribute นี้กำหนดการทำงานที่จะทำขณะยื่นสมัครฟอร์ม

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

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

ตัวอย่าง

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

<form action="/action_page.php">
  <label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">ชื่อสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

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

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

Target 属性

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

target มีค่าที่สามารถตั้งได้ตามลำดับข้างล่าง

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

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

ตัวอย่าง

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

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

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

Method 属性

มีความหมายว่าวิธีการที่ใช้ส่งข้อมูลฟอร์ม

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

วิธีการส่งฟอร์มโดยเริ่มต้นเป็น GET โดยเริ่มต้น

ตัวอย่าง

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

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

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

ตัวอย่าง

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

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

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

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

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

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

  • แบบฟอร์มข้อมูลส่งไปด้วย HTTP ข้อความ (ไม่แสดงข้อมูลฟอร์มที่ส่งทาง URL)
  • POST ไม่มีขอบเขตขนาดของข้อมูล และสามารถใช้ส่งข้อมูลมากมาย
  • ฟอร์มที่มี POST ในการส่งผลงานไม่สามารถทำการบันทึกหลักฐานได้

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

Autocomplete 属性

autocomplete มีความหมายว่าฟอร์มควรเปิดฟังก์ชันการกรอกค่าอัตโนมัติหรือไม่

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

ตัวอย่าง

เปิดใช้ฟอร์มที่กรอกค่าอัตโนมัติ:

<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 กำหนดความสัมพันธ์ระหว่างลิงก์และเอกสารปัจจุบัน
target กำหนดที่ไหนจะแสดงคำตอบที่ได้รับหลังจากส่งฟอร์ม