บทที่ 5: Forms และ Inputs
เรียนรู้การสร้างฟอร์มครบครันด้วย MUI สำหรับมือใหม่! 📋
💡 ทำไมฟอร์มถึงสำคัญ?
• 📝 Data Collection: จุดสำคัญในการรับข้อมูลจากผู้ใช้
• ✅ User Experience: ฟอร์มที่ดีทำให้ผู้ใช้กรอกข้อมูลได้ง่าย
• 🔒 Data Validation: ป้องกันข้อมูลผิดพลาดก่อนส่งไปยัง server
• 🚀 Conversion Rate: ฟอร์มที่ดีเพิ่มอัตราการกรอกข้อมูลสำเร็จ
🎯 เมื่อเรียนจบบทนี้ คุณจะสามารถ:
- ใช้ TextField ได้อย่างเชี่ยวชาญ
variants, types, validation, styling
- Checkbox, Radio, Switch
การเลือกตัวเลือกแบบต่างๆ
- Select และ Autocomplete
dropdown และ search ได้
- Form Validation
ตรวจสอบข้อมูลและแสดง error
- Form State Management
จัดการ state ของฟอร์มอย่างมืออาชีพ
- UX Best Practices
หลักการออกแบบฟอร์มที่ดี
📝 TextField Master
TextField เป็น component หลักสำหรับรับข้อมูลจากผู้ใช้ ใน MUI มี 3 variants หลัก
🎯 TextField Variants
outlined
กรอบรอบๆ ฟิลด์ - ใช้บ่อยที่สุด
เหมาะสำหรับ:
ฟอร์มทั่วไป, การกรอกข้อมูล
✅ ข้อดี:
• ชัดเจน
• เหมาะกับทุกสถานการณ์
• ใช้ง่าย
⚠️ ข้อควรระวัง:
• ขนาดใหญ่กว่า variant อื่น
filled
พื้นหลังเต็ม มีเส้นล่าง
เหมาะสำหรับ:
UI ที่ต้องการความโมเดิร์น
✅ ข้อดี:
• ดูโมเดิร์น
• โดดเด่น
• เหมาะกับ dark theme
⚠️ ข้อควรระวัง:
• อาจดูหนักไป
• ไม่เหมาะทุก design
standard
เส้นล่างเท่านั้น - มินิมอล
เหมาะสำหรับ:
UI แบบมินิมอล, ฟอร์มง่าย
✅ ข้อดี:
• กะทัดรัด
• มินิมอล
• ประหยัดพื้นที่
⚠️ ข้อควรระวัง:
• อาจไม่ชัดเจนพอ
• ใช้ยาก
🔧 Input Types
📱 HTML Input Types ที่ใช้บ่อย
ข้อความทั่วไป (text)
ชื่อ, ที่อยู่
อีเมล (email)
user@example.com
รหัสผ่าน (password)
••••••••
ตัวเลข (number)
อายุ, จำนวน
เบอร์โทร (tel)
081-234-5678
ค้นหา (search)
ค้นหาสินค้า
💻 ตัวอย่างการใช้งาน:
// Basic TextField
<TextField
label="ชื่อ"
variant="outlined"
fullWidth
/>
// Email TextField
<TextField
type="email"
label="อีเมล"
variant="outlined"
fullWidth
/>
// Password TextField
<TextField
type="password"
label="รหัสผ่าน"
variant="outlined"
fullWidth
/>
// Number TextField
<TextField
type="number"
label="อายุ"
variant="outlined"
fullWidth
inputProps={{ min: 0, max: 120 }}
/>🎨 TextField ขั้นสูง
⚡ TextField Features
// TextField with Icons
<TextField
label="ค้นหา"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
}}
/>
// Multiline TextField
<TextField
label="ข้อความ"
multiline
rows={4}
fullWidth
/>
// Helper Text
<TextField
label="อีเมล"
helperText="เราจะไม่แชร์อีเมลของคุณ"
fullWidth
/>
// Error State
<TextField
label="อีเมล"
error
helperText="รูปแบบอีเมลไม่ถูกต้อง"
fullWidth
/>เราจะใช้อีเมลนี้ในการติดต่อกลับเท่านั้น
รูปแบบอีเมลไม่ถูกต้อง กรุณาตรวจสอบอีกครั้ง