Form Elements (ฟอร์มอิลิเมนต์)

ภาพรวมและคู่มืออ้างอิงสำหรับ Element Factory components ทั้งหมดใน Now.js สำหรับการจัดการ form inputs

📋 สารบัญ

1. ภาพรวม
2. วิธีการทำงาน
3. เริ่มต้นใช้งานอย่างรวดเร็ว
4. ประเภทของ Element
5. คุณสมบัติทั่วไป
6. เอกสารที่เกี่ยวข้อง

ภาพรวม

Form Elements ใน Now.js ช่วยปรับปรุง HTML form inputs พื้นฐานให้มีฟีเจอร์เพิ่มเติม เช่น validation, formatting, autocomplete และอื่นๆ อีกมากมาย ทุก element ใช้สถาปัตยกรรม ElementFactory pattern

คุณสมบัติหลัก

• ✅ Auto-enhancement: ปรับปรุง inputs โดยอัตโนมัติด้วย data-element attributes
• ✅ Validation: รองรับ built-in และ custom validation rules
• ✅ Formatting: การจัดรูปแบบอัตโนมัติ (ตัวเลข, วันที่, โทรศัพท์)
• ✅ Accessibility: มี ARIA attributes และรองรับ keyboard
• ✅ i18n: แปลภาษาข้อความ validation ได้
• ✅ Form Integration: ทำงานร่วมกับ FormManager ได้อย่างไร้รอยต่อ

วิธีการทำงาน

Class Hierarchy

ElementFactory (base class)
├── TextElementFactory        # input type="text"
│   ├── PasswordElementFactory
│   └── SearchElementFactory
├── NumberElementFactory      # input type="number"
│   └── CurrencyElementFactory
├── SelectElementFactory      # <select>
│   └── MultiSelectElementFactory
├── DateElementFactory        # date picker
├── ColorElementFactory       # color picker
├── RangeElementFactory       # range slider
├── TagsElementFactory        # tags/chips input
├── MaskElementFactory        # masked input
│   └── TelElementFactory
├── TextareaElementFactory    # <textarea>
└── FileElementFactory        # file upload

Auto-Enhancement

เมื่อ ElementManager ถูกเรียกใช้งาน, มันจะค้นหา elements ที่มี data-element attribute และปรับปรุงโดยอัตโนมัติ:

<!-- ส่งเข้าไป -->
<input type="text" data-element="text" name="username">

<!-- ถูกปรับปรุงด้วย -->
<!-- - Wrapper element -->
<!-- - Validation -->
<!-- - Event handlers -->
<!-- - Instance methods -->

เริ่มต้นใช้งานอย่างรวดเร็ว

การใช้งานพื้นฐานใน HTML

<!-- Text with validation -->
<input type="text"
       data-element="text"
       data-validate="email"
       name="email"
       required>

<!-- Number with formatting -->
<input type="text"
       data-element="number"
       data-precision="2"
       data-use-grouping="true"
       name="price">

<!-- Select with placeholder -->
<select data-element="select" name="country">
  <option value="">เลือกประเทศ</option>
  <option value="TH">ประเทศไทย</option>
  <option value="US">สหรัฐอเมริกา</option>
</select>

<!-- Date picker -->
<input type="text"
       data-element="date"
       data-format="d/m/y"
       name="birthdate">

การเข้าถึงด้วย JavaScript

// รับ instance ของ element
const emailInput = document.querySelector('[name="email"]');
const instance = ElementManager.getInstance(emailInput);

// ใช้ instance methods
instance.validate();
instance.reset();
instance.setValue('user@example.com');

// รับ/ตั้งค่าผ่าน properties
console.log(instance.value);
instance.value = 'new@example.com';

ประเภทของ Element

ตารางอ้างอิงอย่างรวดเร็ว

คู่มือเลือกอย่างรวดเร็ว

คุณสมบัติทั่วไป

Validation

Elements ทั้งหมดรองรับ validation rules:

<input data-element="text"
       data-validate="email"
       data-error-email="กรุณากรอก email ที่ถูกต้อง"
       required>

State Management

ทุก instance มีวิธีการจัดการ state:

instance.validate();           // ตรวจสอบความถูกต้อง
instance.isValid();            // คืนค่า boolean
instance.reset();              // รีเซ็ตเป็นค่าเริ่มต้น
instance.setDisabled(true);    // ปิดใช้งาน/เปิดใช้งาน
instance.setReadonly(true);    // ตั้งค่าอ่านอย่างเดียว

Events

Elements ทั้งหมดส่ง events มาตรฐาน:

element.addEventListener('change', (e) => {
  const instance = ElementManager.getInstance(e.target);
  console.log('Value:', instance.value);
  console.log('Valid:', instance.isValid());
});

โครงสร้าง Wrapper

Elements ส่วนใหญ่ถูกห่อด้วยโครงสร้างนี้:

<div class="form-group">
  <label for="fieldname">Label</label>
  <span class="form-control">
    <input data-element="text" id="fieldname" name="fieldname">
  </span>
  <span id="result_fieldname" class="comment">ข้อความช่วยเหลือ</span>
</div>

Data Binding

Elements รองรับ data binding ผ่าน attributes:

<!-- ผูกค่าจากข้อมูล -->
<input data-element="text"
       data-attr="value:user.email"
       name="email">

เอกสารที่เกี่ยวข้อง

• ElementFactory - เอกสาร Base class
• FormManager - การจัดการ form-level
• FormError - การแสดง validation errors
• สร้าง Element กำหนดเอง - คู่มือสร้าง element ใหม่