คุณสมบัติแบบฟอร์ม HTML
บทนี้อธิบายคุณลักษณะต่างๆ สำหรับ<form>
องค์ประกอบ HTML
แอ็คชันแอ็ตทริบิวต์
แอตทริบิวต์action
กำหนดการดำเนินการที่จะดำเนินการเมื่อส่งแบบฟอร์ม
โดยปกติ ข้อมูลแบบฟอร์มจะถูกส่งไปยังไฟล์บนเซิร์ฟเวอร์เมื่อผู้ใช้คลิกที่ปุ่มส่ง
ในตัวอย่างด้านล่าง ข้อมูลในแบบฟอร์มจะถูกส่งไปยังไฟล์ชื่อ "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="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
เคล็ดลับ:หากaction
ละเว้นแอตทริบิวต์ การดำเนินการจะถูกตั้งค่าเป็นหน้าปัจจุบัน
แอตทริบิวต์เป้าหมาย
แอตทริบิวต์target
ระบุตำแหน่งที่จะแสดงการตอบกลับที่ได้รับหลังจากส่งแบบฟอร์ม
แอตทริบิวต์target
สามารถมีค่าใดค่าหนึ่งต่อไปนี้:
Value | Description |
---|---|
_blank | The response is displayed in a new window or tab |
_self | The response is displayed in the current window |
_parent | The response is displayed in the parent frame |
_top | The response is displayed in the full body of the window |
framename | The response is displayed in a named iframe |
ค่าเริ่มต้นคือ_self
ซึ่งหมายความว่าการตอบกลับจะเปิดขึ้นในหน้าต่างปัจจุบัน
ตัวอย่าง
ที่นี่ ผลลัพธ์ที่ส่งมาจะเปิดขึ้นในแท็บเบราว์เซอร์ใหม่:
<form action="/action_page.php" target="_blank">
แอตทริบิวต์วิธีการ
แอตทริบิวต์method
ระบุวิธี HTTP ที่จะใช้เมื่อส่งข้อมูลแบบฟอร์ม
ข้อมูลแบบฟอร์มสามารถส่งเป็นตัวแปร URL (ด้วยmethod="get"
) หรือเป็นธุรกรรม HTTP โพสต์ (ด้วยmethod="post"
)
วิธี HTTP เริ่มต้นเมื่อส่งข้อมูลแบบฟอร์มคือ GET
ตัวอย่าง
ตัวอย่างนี้ใช้วิธี GET เมื่อส่งข้อมูลแบบฟอร์ม:
<form action="/action_page.php" method="get">
ตัวอย่าง
ตัวอย่างนี้ใช้วิธี POST เมื่อส่งข้อมูลแบบฟอร์ม:
<form action="/action_page.php" method="post">
หมายเหตุเกี่ยวกับ GET:
- ผนวกข้อมูลแบบฟอร์มไปยัง URL ในชื่อ/คู่ค่า
- ห้ามใช้ GET เพื่อส่งข้อมูลที่สำคัญ! (ข้อมูลแบบฟอร์มที่ส่งมาสามารถดูได้ใน URL!)
- ความยาวของ URL ถูกจำกัด (2048 อักขระ)
- มีประโยชน์สำหรับการส่งแบบฟอร์มที่ผู้ใช้ต้องการคั่นหน้าผลลัพธ์
- GET ดีสำหรับข้อมูลที่ไม่ปลอดภัย เช่น สตริงการสืบค้นใน Google
หมายเหตุเกี่ยวกับ POST:
- ผนวกข้อมูลแบบฟอร์มภายในเนื้อหาของคำขอ HTTP (ข้อมูลแบบฟอร์มที่ส่งไม่แสดงใน URL)
- POST ไม่มีข้อจำกัดด้านขนาด และสามารถใช้เพื่อส่งข้อมูลจำนวนมาก
- การส่งแบบฟอร์มด้วย POST ไม่สามารถบุ๊คมาร์คได้
เคล็ดลับ:ใช้ POST เสมอหากข้อมูลในแบบฟอร์มมีข้อมูลที่ละเอียดอ่อนหรือข้อมูลส่วนบุคคล!
แอตทริบิวต์การเติมข้อความอัตโนมัติ
แอตทริบิวต์autocomplete
ระบุว่าแบบฟอร์มควรมีการเปิดหรือปิดการเติมข้อความอัตโนมัติ
เมื่อเปิดการเติมข้อความอัตโนมัติ เบราว์เซอร์จะเติมค่าโดยอัตโนมัติตามค่าที่ผู้ใช้เคยป้อนมาก่อน
ตัวอย่าง
แบบฟอร์มที่มีการเติมข้อความอัตโนมัติเมื่อ:
<form action="/action_page.php" autocomplete="on">
คุณสมบัติ Novalidate
แอตทริบิวต์novalidate
นี้เป็นแอตทริบิวต์บูลีน
เมื่อมีอยู่ แสดงว่าข้อมูลแบบฟอร์ม (อินพุต) ไม่ควรถูกตรวจสอบเมื่อส่ง
ตัวอย่าง
แบบฟอร์มที่มีแอตทริบิวต์ novalidate:
<form action="/action_page.php" novalidate>
แบบฝึกหัด HTML
รายการแอตทริบิวต์ <form> ทั้งหมด
คุณลักษณะ | คำอธิบาย |
---|---|
ยอมรับ-charset | ระบุการเข้ารหัสอักขระที่ใช้สำหรับการส่งแบบฟอร์ม |
หนังบู๊ | ระบุตำแหน่งที่จะส่งข้อมูลแบบฟอร์มเมื่อส่งแบบฟอร์ม |
เติมข้อความอัตโนมัติ | ระบุว่าแบบฟอร์มควรมีการเปิดหรือปิดการเติมข้อความอัตโนมัติ |
enctype | ระบุวิธีการเข้ารหัสข้อมูลแบบฟอร์มเมื่อส่งไปยังเซิร์ฟเวอร์ (เฉพาะ method="post") |
กระบวนการ | ระบุเมธอด HTTP ที่จะใช้เมื่อส่ง form-data |
ชื่อ | ระบุชื่อแบบฟอร์ม |
novalidate | ระบุว่าไม่ควรตรวจสอบแบบฟอร์มเมื่อส่ง |
เรล | ระบุความสัมพันธ์ระหว่างทรัพยากรที่เชื่อมโยงและเอกสารปัจจุบัน |
เป้า | ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม |