พัฒนาเว็บไซต์ด้วย HTML5

HTML5 Form Attributes

ใน HTML5 มี Form Attributes หลากหลายรูปแบบที่สามารถใช้ในการควบคุมการทำงานของฟอร์ม เช่น การกำหนดลักษณะของการส่งข้อมูล, การตั้งค่าปลายทาง, การจัดการข้อมูล, การเปิดปิดการใช้งาน เป็นต้น

1. action

  • ใช้กำหนด URL ที่ฟอร์มจะส่งข้อมูลไปเมื่อทำการส่ง (submit) ฟอร์ม
  • ค่า: URL ที่ต้องการให้ส่งข้อมูลไป เช่น ไฟล์ PHP หรือไฟล์อื่นๆ ที่ใช้ประมวลผลข้อมูลจากฟอร์ม

ตัวอย่าง

HTML
<form action="submit_form.php">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

2. method

  • ใช้กำหนดวิธีการส่งข้อมูลจากฟอร์มไปยังเซิร์ฟเวอร์ มีสองค่าที่นิยมใช้:
    • GET ส่งข้อมูลใน URL (ข้อดี: ดูได้ง่าย ข้อเสีย: ข้อมูลที่มากเกินไปไม่สามารถส่งได้)
    • POST ส่งข้อมูลในส่วนของ body (ข้อดี: ส่งข้อมูลได้มากกว่า และปลอดภัยกว่าในบางสถานการณ์)

ตัวอย่าง

HTML
<form action="submit_form.php" method="POST">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

ใช้ POST เมื่อต้องการส่งข้อมูลที่เป็นความลับ เช่น รหัสผ่าน หรือเมื่อส่งข้อมูลจำนวนมาก ขณะที่ GET เหมาะสำหรับการส่งข้อมูลขนาดเล็กที่ไม่สำคัญ

3. enctype

  • ใช้กำหนดประเภทของการเข้ารหัสข้อมูลเมื่อใช้ method POST สำหรับฟอร์มที่มีการอัปโหลดไฟล์หรือส่งข้อมูลที่มีหลายส่วน
    • application/x-www-form-urlencoded: ค่าดีฟอลต์
    • multipart/form-data: ใช้เมื่อมีการอัปโหลดไฟล์
    • text/plain: ส่งข้อมูลเป็น text แบบตรงๆ

ตัวอย่าง

HTML
<form action="/upload_file.php" method="POST" enctype="multipart/form-data">
  <input type="file" name="file_upload">
  <input type="submit" value="Upload">
</form>

4. target

  • ใช้กำหนดว่าผลลัพธ์จากการส่งฟอร์มจะไปเปิดในหน้าต่างไหน เช่น:
    • _self (ค่าเริ่มต้น): เปิดในหน้าเดียวกับฟอร์ม
    • _blank: เปิดในแท็บหรือหน้าต่างใหม่
    • _parent: เปิดในเฟรมพาเรนต์ของฟอร์ม
    • _top: เปิดในหน้าต่างหลักสุด

ตัวอย่าง:

HTML
<form action="submit_form.php" target="_blank">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

5. novalidate

  • ใช้ปิดการตรวจสอบข้อมูล (validation) ที่เบราว์เซอร์ทำเมื่อผู้ใช้กดส่งฟอร์ม
  • เมื่อใช้ novalidate เบราว์เซอร์จะไม่ตรวจสอบว่าผู้ใช้กรอกข้อมูลถูกต้องหรือไม่ เช่น ค่า input type email

ตัวอย่าง

HTML
<form action="/submit_form.php" novalidate>
  <input type="email" name="email">
  <input type="submit" value="Submit">
</form>

6. autocomplete

  • ใช้กำหนดว่าจะให้เบราว์เซอร์เปิดการใช้งานการกรอกข้อมูลอัตโนมัติหรือไม่ (auto-fill)
  • ค่า: on (เปิดใช้งาน) หรือ off (ปิดใช้งาน)

ตัวอย่าง

HTML
<form action="submit_form.php" autocomplete="off">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

7. name

กำหนดชื่อให้กับฟอร์ม ซึ่งสามารถใช้อ้างอิงได้ใน JavaScript

HTML
<form name="userForm" action="/submit_form.php">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

8. accept-charset

  • ใช้กำหนดรูปแบบการเข้ารหัสของตัวอักษรที่ฟอร์มจะส่ง เช่น UTF-8, ISO-8859-1

ตัวอย่าง

HTML
<form action="/submit_form.php" accept-charset="UTF-8">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

9. rel

  • ใช้สำหรับกำหนดความสัมพันธ์ระหว่างฟอร์มกับ resource อื่น ๆ โดยเฉพาะเมื่อใช้ target="_blank"

ตัวอย่าง

HTML
<form action="submit_form.php" target="_blank" rel="noopener">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

10. onsubmit

ใช้ในการระบุฟังก์ชัน JavaScript ที่จะถูกเรียกใช้เมื่อมีการส่งข้อมูลฟอร์ม

HTML
<form action="/submit_form.php" onsubmit="return validateForm()">
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>
<script>
  function validateForm() {
    let x = document.forms["userForm"]["username"].value;
    if (x == "") {
      alert("Username must be filled out");
      return false;
    }
    return true;
  }
</script>

สรุป

Form Attributes ใน HTML5 มีหลายประเภทที่สามารถใช้เพื่อควบคุมการทำงานของฟอร์มในหลายด้าน ทั้งการกำหนดปลายทางของฟอร์ม การกำหนดรูปแบบการส่งข้อมูล การจัดการการเข้ารหัส และการควบคุมลักษณะการเปิดหน้าต่างใหม่

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ