Mission 10: Input

เป้าหมายของ Mission นี้: เพิ่ม <input type="text"> พร้อม <label> ที่ ผูกกันถูกต้อง

Input Tag

<input> คือช่องกรอกข้อมูล type ที่ใช้บ่อยคือ text (ข้อความทั่วไป) และ email (บังคับรูปแบบอีเมล) ควรมี <label> คู่กันเสมอ เพื่อบอกว่าช่องนี้ให้ กรอกอะไร

ผูก label กับ input

ใช้ for ให้ตรงกับ id ของ input — กด label แล้ว focus ไปที่ input ทันที (ใน JSX จริงต้องเขียนเป็น htmlFor แทน เพราะ for เป็นคำสงวนใน JavaScript เหมือนกับ class)

Demo

<label for="name">ชื่อ</label>
<input id="name" type="text" />