Forms

ฟอร์มคือช่องทางที่ผู้ใช้สื่อสารกลับมายังเว็บไซต์ — ฟอร์มสมัครสมาชิก ฟอร์มติดต่อ ช่องค้นหา หรือ flow การ checkout ในฐานะดีไซเนอร์ คุณคงใช้เวลาออกแบบฟอร์มมาเยอะแล้ว ตอนนี้คุณจะได้เรียน HTML ที่ทำให้ฟอร์มเหล่านั้นเกิดขึ้นจริง

ทุก input ที่โต้ตอบได้บนเว็บถูกสร้างขึ้นจาก element ชุดเล็ก ๆ ชุดหนึ่ง: <form>, <label>, <input>, <textarea>, <select> และ <button> แต่ละตัวมีหน้าที่เฉพาะของตัวเอง และการจับคู่ให้ถูกต้องคือสิ่งที่ทำให้ฟอร์มทั้งใช้งานได้และเข้าถึงได้

form element

<form> คือตัวห่อที่จัดกลุ่ม input ทั้งหมดเข้าด้วยกัน บนเว็บไซต์จริง <form> จะมี attribute action (ส่งข้อมูลไปที่ไหน) และ method (ส่งอย่างไร — get หรือ post) สำหรับการเรียนรู้ คุณจะละไว้ก่อนก็ได้

<form>
  <!-- inputs go here -->
</form>

label และ input

<input> คือกล่องข้อความจริง ๆ (หรือ checkbox หรือ radio button) เป็น element แบบ self-closing ที่ไม่มีเนื้อหาข้อความ

<label> คือข้อความที่อธิบาย input — “ชื่อของคุณ”, “อีเมล” และอื่น ๆ

กฎสำคัญ: ทุก <input> ต้องมี <label> ที่จับคู่กัน คุณเชื่อมทั้งสองเข้าด้วยกันด้วย attribute for และ id ที่ตรงกัน:

<label for="email">Email address</label>
<input type="email" id="email" name="email" />

attribute for บน label ต้องตรงกับ attribute id บน input เป๊ะ ๆ เมื่อเชื่อมกันแล้ว:

การคลิกข้อความ label จะโฟกัสไปที่ input (usability ดีขึ้น — เป้าคลิกใหญ่ขึ้น)
screen reader จะอ่าน label เมื่อ input ถูกโฟกัส (จำเป็นต่อ accessibility)

input type

attribute type บน <input> เปลี่ยนพฤติกรรมการทำงานของตัวเอง:

type	หน้าที่ของตัวเอง
`text`	ข้อความบรรทัดเดียวธรรมดา (ค่าเริ่มต้น)
`email`	อีเมล — คีย์บอร์ดบนมือถือแสดงปุ่ม `@`; browser ตรวจสอบรูปแบบ
`password`	ซ่อนตัวอักษรขณะที่ผู้ใช้พิมพ์
`number`	input ตัวเลขพร้อมลูกศรขึ้น/ลง
`checkbox`	กล่องติ๊ก — จริงหรือเท็จ
`radio`	เลือกหนึ่งตัวจากกลุ่ม
`submit`	ปุ่ม submit (ใช้ `<button>` แทนดีกว่า — ยืดหยุ่นกว่า)

textarea และ button

<textarea> คือ input ข้อความหลายบรรทัด — สำหรับข้อความหรือคอมเมนต์ที่ยาวขึ้น และต้องมี closing tag เสมอ

<button> จะ submit ฟอร์มโดยค่าเริ่มต้นเมื่อวางอยู่ภายใน <form> ให้เพิ่ม type="button" หากคุณต้องการให้ปุ่มทำอย่างอื่น (ผ่าน JavaScript) โดยไม่ submit

<form>
  <div class="field">
    <label for="name">Full name</label>
    <input type="text" id="name" name="name" placeholder="Jane Smith" />
  </div>

  <div class="field">
    <label for="email">Email address</label>
    <input type="email" id="email" name="email" placeholder="jane@example.com" />
  </div>

  <div class="field">
    <label for="message">Your message</label>
    <textarea id="message" name="message" rows="4" placeholder="Tell me about your project..."></textarea>
  </div>

  <button type="submit">Send message</button>
</form>

ลองคลิกที่ข้อความ label “Full name” ดู — สังเกตว่าเคอร์เซอร์กระโดดเข้าไปใน input นั่นคือการทำงานของการเชื่อม for/id ลองเปลี่ยนข้อความบนปุ่มหรือเพิ่ม field ใหม่ดู

💡 อย่าข้าม label เด็ดขาด

placeholder (placeholder="Jane Smith") ไม่ใช่ label เพราะจะหายไปเมื่อผู้ใช้เริ่มพิมพ์ ทำให้พวกเขาไม่เหลืออะไรเตือนว่า field นี้มีไว้ทำอะไร ให้ใส่ <label> ที่มองเห็นได้ไว้เหนือหรือข้าง input ทุกตัวเสมอ นี่คือหนึ่งในความล้มเหลวด้าน accessibility ของฟอร์มที่พบบ่อยที่สุดบนเว็บไซต์จริง — และเป็นหนึ่งในเรื่องที่แก้ง่ายที่สุด ผู้ใช้ของคุณและผู้ตรวจสอบ accessibility จะขอบคุณคุณ

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ออกแบบ input โดยไม่คิดถึง error state
ใช้ placeholder แทน label
ไม่ระบุ input type (email, tel, number) ทำให้ mobile keyboard แสดงผิดแบบ

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “field ที่สวย” แต่ developer ต้อง handle validation, error message, disabled/loading state ของปุ่ม submit และ keyboard type บนมือถือ

💡 ตัวอย่างจากของจริง

Stripe checkout form ใช้ input type ที่ถูกต้องทุกอัน ทำให้มือถือ auto-suggest เลขบัตรและ email ได้ถูกต้อง