การสร้างฟอร์มใน HTML: คู่มือครบวงจรพร้อมตัวอย่าง

ฟอร์ม HTML คืออะไร?

ฟอร์ม HTML ใช้สำหรับรับข้อมูลจากผู้เยี่ยมชมเว็บไซต์ เช่น การสมัครสมาชิก (ชื่อ, อีเมล, หมายเลขบัตรเครดิต) การสำรวจความคิดเห็น หรือการเข้าสู่ระบบ ข้อมูลที่กรอกจะถูกส่งไปยังแอปพลิเคชันแบ็กเอนด์ (PHP, Node.js, Python, CGI, ASP) เพื่อประมวลผลตามตรรกะทางธุรกิจ

โครงสร้างพื้นฐานของฟอร์ม

<form action="Script URL" method="GET|POST">
  
</form>

• action: URL ของสคริปต์ฝั่งเซิร์ฟเวอร์ที่รับข้อมูล
• method: GET (เพิ่มข้อมูลใน URL) หรือ POST (ส่งใน Request Body - ปลอดภัยกว่า)

ประเภทของ <input> (HTML4/HTML5)

ประเภทพื้นฐาน (มีมาตั้งแต่ HTML4)

ประเภทใหม่ใน HTML5 (เพิ่มความสะดวกและการตรวจสอบข้อมูล)

ตัวอย่างฟอร์มสมัครสมาชิก (Registration Form)

<!DOCTYPE html>
<html>
<body>
  <h2>สมัครสมาชิก</h2>
  <form action="/register" method="post">
    <label>ชื่อผู้ใช้: <input type="text" name="username" placeholder="ป้อนชื่อผู้ใช้..." required></label><br>
    <label>รหัสผ่าน: <input type="password" name="pwd" placeholder="ป้อนรหัสผ่าน..." required></label><br>
    <label>วันเกิด: <input type="date" name="dob"></label><br>
    <label>โทรศัพท์: <input type="tel" name="phone" placeholder="08X-XXX-XXXX"></label><br>
    <label>อีเมล: <input type="email" name="email" placeholder="user@example.com" required></label><br><br>
    <button type="submit">สมัครสมาชิก</button>
  </form>
</body>
</html>

ตัวอย่างฟอร์มพร้อม Checkbox

<!DOCTYPE html>
<html>
<body>
  <h2>สมัครสมาชิก พร้อมยินยอมเงื่อนไข</h2>
  <form action="/register" method="post">
    <label>ชื่อผู้ใช้: <input type="text" name="username" placeholder="ป้อนชื่อผู้ใช้..." size="25" required></label><br>
    <label>รหัสผ่าน: <input type="password" name="pwd" placeholder="ป้อนรหัสผ่าน..." required></label><br>
    <label>วันเกิด: <input type="date" name="dob" required></label><br>
    <label>โทรศัพท์: <input type="tel" name="phone" placeholder="08X-XXX-XXXX"></label><br>
    <label>อีเมล: <input type="email" name="email" placeholder="user@example.com" size="35" required></label><br><br>
    <label><input type="checkbox" name="terms" value="agree" required> ยอมรับเงื่อนไขและนโยบายความเป็นส่วนตัว</label><br><br>
    <button type="submit">สมัครสมาชิก</button>
  </form>
</body>
</html>

แนวทางปฏิบัติที่ดีสำหรับฟอร์ม

• ใช้ <label> ผูกกับ <input> ผ่าน for และ id เพื่อเข้าถึงได้ง่าย (Accessibility)
• เพิ่ม required สำหรับฟิลด์บังคับ
• ใช้ placeholder ให้ตัวอย่างรูปแบบข้อมูล
• จัดกลุ่มฟิลด์ที่เกี่ยวข้องด้วย <fieldset> และ <legend>
• ตรวจสอบข้อมูลทั้งฝั่งไคลเอ็นต์ (HTML5 Validation) และฝั่งเซิร์ฟเวอร์
• ใช้ autocomplete ให้เหมาะสม ช่วยให้ผู้ใช้กรอกเร็วขึ้น