HTML
Forms
textarea
บทนี้สอนผู้เริ่มต้นให้ใช้ `textarea` สำหรับข้อมูลข้อความหลายบรรทัดอย่างเหมาะสม พร้อมแยกความต่างจาก `input type="text"` และฝึกใช้งานกับ Playground ที่ตรวจผลได้จริง
1. หัวข้อนี้คืออะไร
`textarea` คือองค์ประกอบในฟอร์มที่ใช้รับข้อความหลายบรรทัด เช่น คำอธิบายยาว รีวิว หรือข้อความติดต่อ ต่างจาก `input` ตรงที่ `textarea` มีแท็กเปิดและแท็กปิด (`<textarea></textarea>`) ไม่ใช่แท็กเดี่ยว
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ผู้ใช้พิมพ์ข้อมูลยาวได้สะดวกกว่าช่องข้อความสั้น
- ทำให้ฟอร์มสื่อความหมายชัดว่า field นี้รับข้อความหลายบรรทัด
- ลดปัญหาการใช้ `input type="text"` ผิดงานสำหรับข้อมูลยาว
- เมื่อใช้คู่กับ `label` จะอ่านง่ายและเข้าถึงได้ดีขึ้น
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เหมาะกับ `textarea`: - ช่องแนะนำตัวในโปรไฟล์ - ช่องเขียนรีวิวสินค้า - ช่องข้อความติดต่อทีมงาน ข้อมูลเหล่านี้มักยาวเกินกว่าจะใส่ใน `input type="text"` ที่เหมาะกับข้อความสั้น
4. แนวคิดหลักที่ต้องเข้าใจ
- `textarea` เหมาะกับข้อมูลยาวและหลายบรรทัด
- `input type="text"` เหมาะกับข้อความสั้น เช่น ชื่อหรือหัวข้อสั้น ๆ
- `textarea` ต้องมีแท็กเปิด/ปิด ต่างจาก `input`
- ควรจับคู่ `textarea` กับ `label` ผ่าน `for` และ `id`
- ตั้ง `placeholder`, `rows`, `cols` ได้ในระดับพื้นฐานเพื่อช่วย UX
5. การทำงานทีละขั้นตอน
- 1) ระบุว่า field นี้เป็นข้อความยาวหรือข้อความสั้น
- 2) ถ้าเป็นข้อความยาว ให้ใช้ `<textarea>` แทน `input type="text"`
- 3) ใส่ `id` ให้ textarea และสร้าง `label for` ให้ตรงกัน
- 4) เพิ่ม `placeholder` เพื่อบอกแนวทางการกรอกคร่าว ๆ
- 5) ปรับ `rows` (และถ้าต้องการ `cols`) ให้เหมาะกับพื้นที่แสดงผล
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างฟอร์มนี้ใช้ `textarea` คู่กับ `label` อย่างถูกต้อง พร้อม `placeholder`, `rows` และ `cols` เบื้องต้น
7. จุดที่ผู้เริ่มต้นมักสับสน
- ใช้ `input type="text"` กับช่องข้อความยาวทั้งหมด
- ลืมปิดแท็ก `</textarea>` ทำให้โครงสร้าง HTML เพี้ยน
- ใส่ข้อความกำกับเฉย ๆ โดยไม่ใช้ `label` เชื่อมกับ `textarea`
- ใส่ placeholder แต่คิดว่าแทน label ได้ (จริง ๆ ยังควรมี label)
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `textarea` vs `input type="text"` | textarea รองรับข้อความหลายบรรทัด, input text เหมาะกับข้อความสั้นบรรทัดเดียว | ข้อความยาวใช้ textarea, ข้อความสั้นใช้ input text |
| `<textarea></textarea>` vs `<input />` | textarea มีแท็กเปิด/ปิด, input เป็นแท็กเดี่ยว | ถ้าต้องการพื้นที่พิมพ์ยาวให้ใช้ textarea |
| มี label + textarea vs ไม่มี label | มี label ทำให้รู้ทันทีว่าต้องพิมพ์อะไร, ไม่มี label ใช้งานยากและไม่ชัดเจน | ใช้ label คู่กับ textarea เสมอ |
9. สรุปท้ายบทแบบจำง่าย
- `textarea` = ช่องรับข้อความยาวหลายบรรทัด
- `input type="text"` = ช่องข้อความสั้น
- `textarea` มีแท็กเปิดและปิด ไม่เหมือน input
- ควรใช้ `label` คู่กับ textarea เพื่อความชัดเจนและ accessibility
- เริ่มจาก `placeholder` + `rows` พื้นฐาน แล้วค่อยปรับตามบริบท
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อใช้ textarea ให้ถูกงานและเชื่อมกับ label อย่างถูกต้อง
Lab 1 (พื้นฐาน): เพิ่ม textarea ให้ฟอร์ม
ชื่อ Lab: เพิ่มช่องข้อความยาว เป้าหมาย: เพิ่ม textarea เข้าไปในฟอร์มให้สำเร็จ โจทย์: ใน <form id="contact-form"> ให้เพิ่ม <textarea id="message"></textarea> อย่างน้อย 1 ตัว และมีปุ่ม submit ข้อความ "ส่ง" เงื่อนไข: ต้องมี textarea ภายในฟอร์ม และยังคง form#contact-form สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: เพิ่ม textarea ก่อน แล้วเช็กโครงฟอร์มกับปุ่มส่ง เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): ใส่ label และ placeholder ให้ textarea
ชื่อ Lab: ทำให้ช่องข้อความชัดเจนขึ้น เป้าหมาย: เชื่อม label กับ textarea และเพิ่ม placeholder โจทย์: สร้าง <form id="feedback-form"> ที่มี <label for="feedback">รีวิว</label> และ <textarea id="feedback" placeholder="เขียนรีวิวของคุณ" rows="4"></textarea> เงื่อนไข: for/id ต้องตรงกัน และ textarea ต้องมี placeholder สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: สร้าง id ของ textarea ก่อน แล้วเชื่อม label ด้วย for เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้โค้ดที่ใช้ input text แทนข้อความยาว
ชื่อ Lab: เปลี่ยนช่องสั้นให้เหมาะกับข้อความยาว เป้าหมาย: แก้ฟอร์มที่ใช้ input text ผิดบริบทให้เป็น textarea โจทย์: จากโค้ดตั้งต้น ให้เปลี่ยน input#detail ที่เป็น type="text" ให้เป็น textarea#detail พร้อม label for="detail" และ placeholder "เล่ารายละเอียดเพิ่มเติม" เงื่อนไข: ต้องคง form#support-form และปุ่ม submit ข้อความ "ส่งคำขอ" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ข้อมูลยาวควรเปลี่ยนจาก input text เป็น textarea แล้วเชื่อม label ให้ครบ เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 4 (ท้าทาย): แก้ช่องความคิดเห็นให้รองรับข้อความยาว
ชื่อ Lab: เปลี่ยนช่องความคิดเห็นให้เหมาะกับการพิมพ์หลายบรรทัด เป้าหมาย: ฝึกเปลี่ยน input text ที่ใช้รับข้อความยาวให้เป็น textarea โจทย์: จากโค้ดตั้งต้น ให้เปลี่ยน input#comment ที่เป็น type="text" ให้เป็น textarea#comment พร้อม label for="comment" และ placeholder "เขียนความคิดเห็นของคุณ" เงื่อนไข: ต้องคง form#comment-form และปุ่ม submit ข้อความ "ส่งความคิดเห็น" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ถ้าผู้ใช้ต้องพิมพ์ข้อความหลายประโยคหรือหลายบรรทัด ควรใช้ textarea แทน input เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 5 (ท้าทาย): แก้ช่องข้อความถึงผู้สอนให้เป็น textarea
ชื่อ Lab: เปลี่ยนช่องข้อความสั้นให้เหมาะกับการอธิบาย เป้าหมาย: ฝึกสังเกตว่าข้อมูลแบบอธิบายหรือฝากข้อความควรใช้ textarea โจทย์: จากโค้ดตั้งต้น ให้เปลี่ยน input#message ที่เป็น type="text" ให้เป็น textarea#message พร้อม label for="message" และ placeholder "ฝากข้อความถึงผู้สอน" เงื่อนไข: ต้องคง form#message-form และปุ่ม submit ข้อความ "ส่งข้อความ" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ข้อความที่อาจยาวหลายบรรทัดไม่ควรใช้ input text เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 6 (ท้าทาย): แก้ฟอร์มคำอธิบายโปรเจกต์ให้ใช้ textarea
ชื่อ Lab: เปลี่ยนช่องอธิบายโปรเจกต์ให้เหมาะกับข้อมูลยาว เป้าหมาย: ฝึกเลือก textarea สำหรับข้อมูลที่ต้องอธิบายเป็นรายละเอียด โจทย์: จากโค้ดตั้งต้น ให้เปลี่ยน input#project-description ที่เป็น type="text" ให้เป็น textarea#project-description พร้อม label for="project-description" และ placeholder "อธิบายโปรเจกต์ของคุณ" เงื่อนไข: ต้องคง form#project-form และปุ่ม submit ข้อความ "บันทึกโปรเจกต์" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ฟิลด์ที่ใช้เล่ารายละเอียด เช่น ที่มา เป้าหมาย หรือคำอธิบาย ควรใช้ textarea เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้