Validate input and label controls

15-minute session: read for 3 minutes, trace for 3, experiment for 7, and complete the check for 2. Spend longer whenever you need.

A visible label explains an input. The for attribute connects it to an id. Test empty input, 0, 1, 60, 61, and 1.5. HTML constraints help users but a real server must validate again because browser requests can be changed. This preview does not submit data to a server.

<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Agila study</title>
<main><h1>Study time</h1><label for="minutes">Minutes (1–60)</label><input id="minutes" type="number" min="1" max="60"><button id="check">Check</button><p id="result" role="status"></p></main>
<script>document.getElementById("check").onclick=()=>{const raw=document.getElementById("minutes").value;const n=Number(raw);document.getElementById("result").textContent=raw.trim()!==""&&Number.isInteger(n)&&n>=1&&n<=60?"Ready":"Use a whole number from 1 to 60";};</script></html>

Practice and evidence

Keep three notes: your prediction, the actual result, and why they match or differ. The completion check grades understanding; the practice task builds skill.