<form> รวบรวมข้อมูลที่ผู้ใช้ป้อนและส่งไปยังเซิร์ฟเวอร์ แอตทริบิวต์หลักคือ action (ส่งไปที่ไหน) และ method (วิธีการส่ง)
html
Email
Password
Sign up
<form> รวบรวมข้อมูลที่ผู้ใช้ป้อนและส่งไปยังเซิร์ฟเวอร์ แอตทริบิวต์หลักคือ action (ส่งไปที่ไหน) และ method (วิธีการส่ง)
Email
Password
Sign up
เมื่อผู้ใช้คลิกปุ่มส่ง (หรือกด Enter) เบราว์เซอร์จะรวบรวมตัวควบคุมทั้งหมด ที่มี name เข้ารหัส และส่งคำขอไปยัง action
<form method="get" action="/search"> <!-- data in the URL: /search?q=html -->
<form method="post" action="/login"> <!-- data in the request body -->
name จำเป็น<input value="hi" /> <!-- ❌ no name → NOT submitted -->
<input name="message" value="hi" /> <!-- ✅ submitted as message=hi -->
ส่งเฉพาะตัวควบคุมที่มีชื่อเท่านั้น เซิร์ฟเวอร์อ่านตามชื่อ name ของพวกเขา
form.addEventListener("submit", (e) => {
e.preventDefault(); // stop the full-page reload to handle it with fetch/AJAX
const data = new FormData(form); // easy way to read all fields
});
ฟอร์มเป็นวิธีพื้นฐานที่ผู้ใช้ส่งข้อมูลไปยังเซิร์ฟเวอร์
การทำความเข้าใจ action/method บทบาทของ name ความหมาย GET-vs-POST และ preventDefault สำหรับการจัดการ JS เป็นพื้นฐานสำหรับแอปเว็บใดๆ ที่มีข้อมูลป้อนเข้า