แอตทริบิวต์ max ใช้กำหนด ค่าสูงสุด (Maximum Value) ที่อนุญาตให้ป้อนได้ใน Input ประเภทตัวเลข/วันที่/เวลา/Range ทำงานร่วมกับ min และ step
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<form action="">
<label>อันดับ (1-10): <input type="number" name="rank" min="1" max="10"></label><br><br>
<label>วันเกิด (ไม่เกินวันนี้): <input type="date" name="dob" max="2024-12-31"></label><br><br>
<label>ระดับเสียง (0-100): <input type="range" name="volume" min="0" max="100" value="50"></label><br><br>
<input type="submit" value="ส่ง">
</form>
</body>
</html>Input Types ที่รองรับ max
| Type | รูปแบบ max | ตัวอย่าง |
|---|---|---|
| number | ตัวเลข | max="100" |
| range | ตัวเลข | max="100" |
| date | YYYY-MM-DD | max="2024-12-31" |
| month | YYYY-MM | max="2024-12" |
| week | YYYY-Www | max="2024-W52" |
| time | HH:MM | max="23:59" |
| datetime-local | YYYY-MM-DDTHH:MM | max="2024-12-31T23:59" |
Dynamic Max (JavaScript)
<input type="date" id="dob" name="dob">
<script>
// ตั้งค่า max = วันนี้ (ไม่ให้เลือกอนาคต)
const today = new Date().toISOString().split('T')[0];
document.getElementById('dob').max = today;
</script>Validation & Constraint API
- Browser ป้องกันการกรอกเกิน
max(Number Spinner, Date Picker) - ตอน Submit: ตรวจสอบ
validity.rangeOverflow(true = เกิน max) - CSS:
input:invalid { border-color: red; }/input:in-range { border-color: green; }
max + min + step (Validation Logic)
<input type="number" min="0" max="100" step="5" value="50">
<!-- ค่าที่ถูกต้อง: 0, 5, 10, 15... 100 -->
<!-- ค่าที่ผิด: 3, 57, 101, -5 -->หมายเหตุ: max สำหรับ type="number" ควบคุม Spinner UI แต่ไม่บล็อกการพิมพ์ตัวเลขโดยตรง (ต้อง Validate เอง)
