HTML <textarea> required Attribute - กำหนดให้กรอกข้อมูลบังคับ

แอตทริบิวต์ required ของ <textarea> ใช้ระบุว่าฟิลด์นี้ **ต้องกรอกข้อมูลก่อนส่งฟอร์ม** หากผู้ใช้คลิก Submit โดยไม่ได้กรอก เบราว์เซอร์จะแสดงข้อความเตือนและยกเลิกการส่งฟอร์มโดยอัตโนมัติ (Client-side validation)

รูปแบบการใช้งาน

<textarea rows="6" cols="70" required></textarea>
<!-- หรือ -->
<textarea required></textarea>

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
  <style>
    form { max-width: 500px; margin: 2rem auto; font-family: sans-serif; }
    label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
    input, textarea { width: 100%; padding: 8px; margin-bottom: 1rem; box-sizing: border-box; }
    .required::after { content: " *"; color: red; }
    button { background: #317EFB; color: white; border: none; padding: 10px 20px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h2>ฟอร์มบันทึกข้อมูลนักศึกษา</h2>
  <form action="/submit" method="post">
    <label for="student" class="required">ชื่อนักศึกษา:</label>
    <input type="text" id="student" name="student" required>
    
    <label for="subject" class="required">วิชา:</label>
    <input type="text" id="subject" name="subject" required>
    
    <label for="rank">อันดับ:</label>
    <input type="number" id="rank" name="rank" min="1">
    
    <label for="marks">คะแนน:</label>
    <input type="number" id="marks" name="marks" min="0" max="100">
    
    <label for="remarks" class="required">หมายเหตุ:</label>
    <textarea id="remarks" name="remarks" rows="6" cols="70" required 
              placeholder="กรุณากรอกหมายเหตุ (บังคับ)"></textarea>
    
    <button type="submit">ส่งข้อมูล</button>
  </form>
</body>
</html>

พฤติกรรมของเบราว์เซอร์

• แสดงข้อความเตือนภาษาของเบราว์เซอร์ (Localized validation message)
• โฟกัสไปที่ฟิลด์ที่ขาดอัตโนมัติ
• ป้องกัน form submission จนกว่าจะกรอกครบ
• สไตล์การตรวจสอบ: :invalid, :valid, :required pseudo-classes

การปรับแต่งข้อความผิดพลาด (Custom Validation Message)

<script>
  const textarea = document.querySelector('textarea[required]');
  
  textarea.addEventListener('invalid', (event) => {
    if (textarea.validity.valueMissing) {
      textarea.setCustomValidity('กรุณากรอกหมายเหตุ - ฟิลด์นี้จำเป็นต้อง填寫');
    }
  });
  
  // รีเซ็ต custom validity เมื่อผู้ใช้เริ่มพิมพ์
  textarea.addEventListener('input', () => {
    textarea.setCustomValidity('');
  });
</script>

การเข้าถึง (Accessibility)

• ใช้ aria-required="true" ร่วมกับ required attribute (สำหรับ screen readers เก่าที่ไม่รองรับ HTML5 validation)
• เชื่อม label กับ textarea ด้วย for และ id
ใช้ aria-describedby อธิบายข้อกำหนด (เช่น "ขั้นต่ำ 50 ตัวอักษร")

ข้อจำกัดและการตรวจสอบฝั่ง Server