HTML inspection intake project: one bounded, reviewable form

Implementation choice

A depot worker records a parcel code, a measured count, and a short note before placing the parcel on hold or clearing it. The sample uses native controls so it works without JavaScript and remains legible in source order. The request token is represented as a server-generated placeholder; a real response must replace it. After submission, the server must validate the parcel, numeric range, note length, user role, and current state before writing a decision.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Inspection intake for parcel P-47</title></head>
<body><main><h1>Inspect parcel P-47</h1>
  <form action="/inspections/P-47" method="post">
    <input type="hidden" name="request_token" value="SERVER_ISSUED_PER_RESPONSE_TOKEN">
    <label for="intake-code">Six-digit parcel code</label>
    <input id="intake-code" name="parcel_code" inputmode="numeric" pattern="[0-9]{6}" required>
    <label for="seal-count">Seals counted</label>
    <input id="seal-count" name="seal_count" type="number" min="1" max="47" step="1" required>
    <label for="intake-note">Inspection note, 12 to 160 characters</label>
    <textarea id="intake-note" name="note" minlength="12" maxlength="160" required></textarea>
    <fieldset><legend>Decision</legend>
      <label><input type="radio" name="decision" value="hold" required> Hold for review</label>
      <label><input type="radio" name="decision" value="clear"> Clear for dispatch</label>
    </fieldset>
    <button type="submit">Record inspection</button>
  </form>
</main></body>
</html>

What remains outside the markup

The action route, token, permissions, and persistence are absent from a static snippet. In production, display the authoritative parcel status returned after the server commits the decision, and reject a second conflicting submission.

Cost and limits

The markup requires no client bundle. The expensive operations are secure token handling, database state transitions, and audit logging; a successful browser validation is no proof those operations are correct.

Common Mistakes

• Do not deploy the literal placeholder token.
• Do not accept a changed hidden value as proof of authority.
• Do not treat a browser-valid decision as an authorized state transition.

Connected lessons

• HTML fieldset and legend: name a group before its choices
• HTML number or text input: choose by the value, not its digits
• HTML length limits: bound user text and explain the stored rule
• HTML hidden inputs: carry a token without treating it as secret

Continue with HTML multiple file input: accept several files without inventing a limit.