reveal.js

# ฟอร์มและ Input

หัวข้อ 4 · HTML โครงสร้างเอกสารและมาร์คอัพ

---

## แนวคิดหลัก

ฟอร์มเป็นช่องทางรับข้อมูลจากผู้ใช้ เช่น สมัครสมาชิก ค้นหา ส่งความคิดเห็น อัปโหลดไฟล์ หรือเข้าสู่ระบบ ฟอร์มที่ดีต้องคำนึงถึงโครงสร้าง label, validation และ accessibility

---

## `<form>`

`<form>` ครอบกลุ่ม input ที่จะส่งข้อมูลไปยังปลายทาง

```html
<form action="/register" method="post">
  ...
</form>
```

`method` ที่ใช้บ่อย:

- `get`: ส่งข้อมูลผ่าน query string เหมาะกับการค้นหา
- `post`: ส่งข้อมูลใน request body เหมาะกับข้อมูลที่สร้างหรือเปลี่ยนแปลงระบบ

---

## `<input type="">`

input มีหลายชนิดตามประเภทข้อมูล

```html
<input type="text" name="fullname">
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="age">
<input type="date" name="birthdate">
<input type="checkbox" name="accept">
<input type="radio" name="level" value="beginner">
<input type="file" name="avatar">
```

การเลือก type ที่ถูกต้องช่วยให้ browser แสดง UI ที่เหมาะสมและตรวจข้อมูลเบื้องต้นได้

---

## `<label for="">`

`label` ช่วยให้ผู้ใช้เข้าใจว่า input ใช้กรอกอะไร และช่วย screen reader อ่านความสัมพันธ์กับ input

```html
<label for="email">อีเมล</label>
<input id="email" type="email" name="email">
```

เมื่อคลิก label cursor จะ focus ไปที่ input ที่เชื่อมกัน

---

## Select และ Textarea

`<select>` ใช้สร้าง dropdown menu

```html
<label for="course">เลือกรายวิชา</label>
<select id="course" name="course">
  <option value="">-- เลือก --</option>
  <option value="web">การโปรแกรมบนเว็บ</option>
  <option value="database">ฐานข้อมูล</option>
</select>
```

`<textarea>` ใช้รับข้อความหลายบรรทัด

---

## Button

ปุ่มในฟอร์มควรกำหนด type ให้ชัดเจน

```html
<button type="submit">ส่งข้อมูล</button>
<button type="reset">ล้างฟอร์ม</button>
<button type="button">ตรวจสอบ</button>
```

ถ้าไม่ระบุ type ปุ่มใน form อาจทำงานเป็น submit โดยไม่ตั้งใจ

---

## HTML5 Validation

```html
<input type="text" name="username" required maxlength="20">
<input type="number" name="score" min="0" max="100">
<input type="text" name="studentId" pattern="[0-9]{10}">
```

| Attribute | ความหมาย |
|---|---|
| required | ต้องกรอก |
| min/max | ค่าน้อยสุด/มากสุด |
| pattern | รูปแบบที่ต้องตรงกับ regular expression |
| maxlength | จำนวนตัวอักษรสูงสุด |

---

## ตัวอย่างฟอร์ม

```html
<form action="/contact" method="post">
  <label for="name">ชื่อ</label>
  <input id="name" name="name" type="text" required maxlength="60">

<label for="email">อีเมล</label>
  <input id="email" name="email" type="email" required>

<label for="message">ข้อความ</label>
  <textarea id="message" name="message" rows="5" required>

``` --- ## กิจกรรม สร้างฟอร์มสมัครเรียนที่มีชื่อ อีเมล รหัสผ่าน อายุ วันเกิด ระดับความรู้เดิม รายวิชาที่สนใจ และปุ่ม submit --- ## จบบทเรียน กลับหน้าบทเรียน