04: Forms & Semantic HTML

การสร้างฟอร์มเพื่อส่งข้อมูลไป Server และการเขียน HTML ให้มีความหมาย (SEO)

1. Forms Elements พื้นฐาน

ฟอร์มคือหัวใจของการโต้ตอบ (Interactive) เป็นวิธีหลักในการส่งข้อมูลจากผู้ใช้ไปยัง Server

ส่วนประกอบสำคัญ
  • <form>: กล่องใหญ่ที่หุ้ม Input ทั้งหมด
    • action="...": ส่งข้อมูลไปที่ไหน (URL ของ API)
    • method="...": ส่งด้วยวิธีไหน (GET เพื่อค้นหา, POST เพื่อบันทึกข้อมูล)
  • <label>: ป้ายกำกับช่องกรอก (ต้องใช้คู่กับ id ของ input เพื่อให้กดที่ตัวหนังสือแล้วเคอร์เซอร์ไปกระพริบในช่อง)
  • <button type="submit">: ปุ่ม "ยืนยัน/ส่งข้อมูล" (คลิกแล้วจะส่งฟอร์มทันที)
  • <button type="reset">: ปุ่ม "ล้างค่า" (คืนค่าเริ่มต้นของฟอร์ม)
Basic Form Structure 
<form action="/api/register" method="POST">
  <label for="username">ชื่อผู้ใช้:</label>
  <input type="text" id="username" name="username">
  <button type="submit">สมัครสมาชิก</button>
  <button type="reset">ล้างค่า</button>
</form>

2. Input Types & Attributes

Tag <input> เป็น Empty Tag ที่แปลงร่างได้หลายแบบตาม attribute type

กลุ่มข้อความ (Text-based)
Code 
<input type="text" placeholder="ชื่อ-สกุล">
ข้อความทั่วไป
Code 
<input type="password">
รหัสผ่าน (มองไม่เห็น)
Code 
<input type="email">
อีเมล (ตรวจสอบรูปแบบ @)
Code 
<input type="number" min="1" max="10">
ตัวเลขเท่านั้น
กลุ่มตัวเลือกและพิเศษ
Type คำอธิบาย ตัวอย่างโค้ด
radio เลือกได้ 1 อย่าง (ต้องมี name เหมือนกัน) 
<input type="radio" name="gender" value="m"> ชาย
<input type="radio" name="gender" value="f"> หญิง
checkbox เลือกได้หลายอย่าง 
<input type="checkbox"> ยอมรับเงื่อนไข
file อัปโหลดไฟล์ 
<input type="file" accept="image/*">
color / date เลือกสี / วันที่ 
<input type="color"> <input type="date">
Common Attributes
name = "..." (สำคัญมาก)

ใช้ตั้งชื่อตัวแปรเพื่อส่งข้อมูลไปที่ Server

ถ้าไม่ใส่: ข้อมูลช่องนี้จะ ไปไม่ถึง Server (เหมือนส่งจดหมายแต่ไม่จ่าหน้าซอง)
placeholder ข้อความจาง ๆ
เพื่อบอกใบ้สิ่งที่ต้องกรอก
required บังคับกรอก!
ถ้าว่างไว้จะกดส่งไม่ได้
readonly อ่านได้อย่างเดียว แก้ไม่ได้
(ยังส่งค่าไป Server)
disabled ปิดการใช้งาน กดไม่ได้
และ ไม่ส่งค่า ไป Server

3.Elements อื่นๆ ในฟอร์ม

Dropdown List (Select)

สำหรับตัวเลือกที่เยอะๆ ประหยัดพื้นที่

Code 
<select name="job">
  <option value="">-- กรุณาเลือก --</option>
  <option value="frontend">Frontend Dev</option>
  <option value="backend">Backend Dev</option>
</select>
Text Area

สำหรับข้อความยาวๆ เช่น ที่อยู่, คอมเมนต์

Code 
<textarea name="message" rows="4" placeholder="พิมพ์ข้อความที่นี่..."></textarea>
Generic Buttons (ปุ่มกดทั่วไป)

ปุ่มที่กดแล้ว ไม่ส่งฟอร์ม (ต้องใส่ type="button") มักใช้เขียน JavaScript สั่งงานเอง

แบบที่ 1: Button Element (แนะนำ)

ยืดหยุ่นกว่า ใส่รูป/ไอคอนข้างในได้

html 
<button type="button" onclick="alert('Hi')">
  <i class="fa-solid fa-star"></i> กดฉันสิ
</button>
แบบที่ 2: Input Button (แบบเก่า)

ข้อความต้องใส่ใน value เท่านั้น

html 
<input type="button" value="กดฉันสิ" onclick="alert('Hi')">

4. Semantic HTML (โครงสร้างที่มีความหมาย)

โดยปกติแล้วการเพิ่มส่วนของเนื้อหาใน HTML มักจะใช้ <div> ทำทุกอย่าง แต่ HTML5 มี Tag พิเศษที่บอก "ความหมาย" ของส่วนนั้นๆ เพื่อให้ Google (SEO) และโปรแกรมอ่านหน้าจอ (Screen Reader) เข้าใจโครงสร้างเนื้อหาของหน้าเว็บ

<header> ส่วนหัว / โลโก้
<nav> เมนูนำทาง
<main> เนื้อหาหลัก
<section> / <article>
<aside>
แถบข้าง
<footer> ส่วนท้ายเว็บ
Semantic Layout 
<body>
  <header>
    <h1>My Website</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h2>บทความที่ 1</h2>
      <p>เนื้อหา...</p>
    </article>
  </main>

  <aside>โฆษณา / ลิงก์แนะนำ</aside>

  <footer>© 2026</footer>
</body>

Workshop: ใบสมัครงานออนไลน์

สร้างไฟล์ job-application.html โดยจำลองฟอร์มสมัครงานบริษัท Tech ต้องมีช่องกรอกดังนี้:

  • ชื่อ-นามสกุล (บังคับใส่ข้อมูล)
  • อีเมล (บังคับใส่ข้อมูล)
  • รหัสผ่าน (บังคับใส่ข้อมูล)
  • วันเกิด
  • ตำแหน่งงาน (Dropdown List)
  • เพศ (Radio: ชาย/หญิง)
  • เรซูเม่ (File: PDF only)
  • แนะนำตัว (Textarea)
อย่าลืม: ปุ่ม Submit, ปุ่ม Reset และ Checkbox "ยอมรับเงื่อนไข" ก่อนกดส่ง
Practice Mission: ใบสมัครงานออนไลน์ "Dev Hunter"
บรีฟจาก HR Manager:

"ทางทีมกำลังขยายตัว อยากให้คุณช่วยทำหน้า 'ร่วมงานกับเรา (Join Us)' ให้หน่อย ขอแบบเรียบง่ายแต่โครงสร้างถูกต้อง (Semantic HTML) เพื่อให้ Google เก็บข้อมูลได้ดี โดยหน้าเว็บต้องมีรายละเอียดตามนี้.."

1. โครงสร้างหน้าเว็บ (Semantic Tags)

ต้องแบ่งส่วนหน้าเว็บให้ชัดเจนโดยใช้ Tag ดังนี้:

  • <header>: ส่วนหัว (โลโก้ + เมนู)
  • <main>: ส่วนเนื้อหาหลัก (ประกาศรับสมัคร + ฟอร์ม)
  • <footer>: ส่วนท้าย (ลิขสิทธิ์ + ติดต่อ)
2. เนื้อหา (Header & Info)
  • Header: ใส่ชื่อบริษัท "Dev Hunter" และลิงก์เมนู (Home, Jobs, Contact)
  • Job Detail: สร้างหัวข้อ "รับสมัคร Web Developer" และใช้ List บอกคุณสมบัติ 3 ข้อ (เช่น เขียน HTML ได้, ชอบกินกาแฟ)
3. แบบฟอร์มใบสมัคร (Forms)

สร้างฟอร์มโดยใช้ <form> ที่มี Input ครบทุกประเภทดังนี้:

  • ชื่อ-นามสกุล
  • อีเมล
  • ตำแหน่งที่สมัคร ใช้ Dropdown list (Frontend, Backend, Fullstack)
  • ระดับประสบการณ์: ใช้ Radio button (Junior, Senior)
  • ทักษะที่มี: ใช้ Checkbox (HTML, CSS, JS)
  • แนะนำตัวเอง: ใช้ Textarea
อย่าลืม! ใส่ปุ่ม "ส่งใบสมัคร" (Submit) และปุ่ม "ล้างข้อมูล" (Reset)
บทก่อนหน้า บทต่อไป