HTML Forms คืออะไร และวิธีใช้งาน

HTML Forms ใช้เก็บข้อมูลจากผู้เยี่ยมชมเว็บ เช่น ข้อมูลนักเรียน (ชื่อ, อายุ, ที่อยู่, คะแนน) ขณะสมัครเว็บไซต์มหาวิทยาลัย

ฟอร์มรับข้อมูลจากผู้ใช้และส่งไปยัง backend application (CGI, ASP, PHP, Node.js ฯลฯ) Backend ประมวลผลตาม business logic ที่กำหนด

ใช้แท็ก <form> สร้างฟอร์มใน HTML

แอตทริบิวต์ของ HTML Form

แอตทริบิวต์	คำอธิบาย
action	Backend script URL ที่ประมวลผลข้อมูล
method	วิธีส่งข้อมูล: `GET` (query string) หรือ `POST` (request body, ปลอดภัยกว่า)
target	เป้าหมายแสดงผล: `_self`, `_blank`, `_parent`
enctype	รูปแบบเข้ารหัสข้อมูล: `application/x-www-form-urlencoded` (default, ใช้ทั่วไป) `multipart/form-data` (สำหรับ upload ไฟล์ binary)

Form Controls (คอนโทรลในฟอร์ม)

Text input (<input type="text">, <textarea>)
Checkbox (<input type="checkbox">)
Radio button (<input type="radio">)
File select (<input type="file">)
Select/Dropdown (<select> + <option>)
Submit/Reset button (<input type="submit">, <button>)

ตัวอย่างฟอร์มพื้นฐาน

<!DOCTYPE html> <html>
  <head>
    <title>HTML Forms</title>
  </head>
  <body>
    <form>
      Student Name: <input type="text" name="sname" /><br>
      Student Subject: <input type="text" name="ssubject" />
    </form>
  </body>
</html>

แอตทริบิวต์เพิ่มเติมของ <input>

แอตทริบิวต์	คำอธิบาย
`value`	ค่าเริ่มต้นในคอนโทรล
`size`	ความกว้างของ text input (จำนวนตัวอักษร)
`maxlength`	จำนวนตัวอักษรสูงสุดที่กรอกได้