บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

คุณสมบัติแบบฟอร์ม 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

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

เพิ่มปุ่มส่ง และระบุว่าแบบฟอร์มควรไปที่ "/action_page.php"

<รูปแบบ="/action_page.php">
ชื่อ: <input type="text" name="name">
<>
</form>


รายการแอตทริบิวต์ <form> ทั้งหมด

คุณลักษณะ คำอธิบาย
ยอมรับ-charset ระบุการเข้ารหัสอักขระที่ใช้สำหรับการส่งแบบฟอร์ม
หนังบู๊ ระบุตำแหน่งที่จะส่งข้อมูลแบบฟอร์มเมื่อส่งแบบฟอร์ม
เติมข้อความอัตโนมัติ ระบุว่าแบบฟอร์มควรมีการเปิดหรือปิดการเติมข้อความอัตโนมัติ
enctype ระบุวิธีการเข้ารหัสข้อมูลแบบฟอร์มเมื่อส่งไปยังเซิร์ฟเวอร์ (เฉพาะ method="post")
กระบวนการ ระบุเมธอด HTTP ที่จะใช้เมื่อส่ง form-data
ชื่อ ระบุชื่อแบบฟอร์ม
novalidate ระบุว่าไม่ควรตรวจสอบแบบฟอร์มเมื่อส่ง
เรล ระบุความสัมพันธ์ระหว่างทรัพยากรที่เชื่อมโยงและเอกสารปัจจุบัน
เป้า ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม