แอตทริบิวต์ maxlength: จำกัดจำนวนตัวอักษรสูงสุดใน Input

แอตทริบิวต์ maxlength ใช้กำหนด จำนวนตัวอักษรสูงสุด ที่ผู้ใช้สามารถพิมพ์ได้ใน <input> (type: text, search, url, tel, email, password) และ <textarea> เบราว์เซอร์จะป้องกันการพิมพ์เกินจำนวนที่กำหนดอัตโนมัติ

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

<!DOCTYPE html>
<html>
<body>
    <form action="">
        <label>อันดับ (1-10): <input type="number" name="rank" min="1" max="10"></label><br><br>
        <label>นักคริกเก็ต (สูงสุด 20 ตัวอักษร): <input type="text" name="cricketer" maxlength="20"></label><br><br>
        <label>คำอธิบาย (สูงสุด 200 ตัวอักษร):<br>
            <textarea name="description" maxlength="200" rows="4" cols="50"></textarea>
        </label><br><br>
        <input type="submit" value="ส่ง">
    </form>
</body>
</html>

maxlength vs max (สำหรับ Number)

minlength (HTML5)

กำหนด จำนวนตัวอักษรต่ำสุด (Validation ตอน Submit):

<input type="password" name="pwd" minlength="8" maxlength="32" required>
<textarea name="bio" minlength="50" maxlength="500"></textarea>

ตัวนับตัวอักษร (Character Counter) - UX Pattern

<textarea id="bio" maxlength="200" rows="4"></textarea>
<div id="counter">0 / 200</div>

<script>
    const textarea = document.getElementById('bio');
    const counter = document.getElementById('counter');
    
    textarea.addEventListener('input', () => {
        const len = textarea.value.length;
        const max = textarea.maxLength;
        counter.textContent = `${len} / ${max}`;
        counter.style.color = len > max * 0.9 ? 'red' : len > max * 0.7 ? 'orange' : '#666';
    });
</script>

Validation

• Browser ป้องกันการพิมพ์เกิน maxlength อัตโนมัติ (Native)
• minlength ตรวจสอบตอน Submit (Constraint Validation API)
• JavaScript: input.validity.tooLong, input.validity.tooShort
• Server-side Validation: ต้อง Validate อีกครั้ง (Client-side ข้ามได้)

Browser Support

• maxlength: ทุก Browser (รวม IE10+)
• minlength: Chrome 40+, Firefox 35+, Safari 10+, Edge 17+
• textarea maxlength: HTML5 (IE10+)