html7.6 KB
Defect Triage Grid (HTML)
Four radio groups - severity, likelihood, blast radius and confidence - that a triage rule combines into a priority. The groups share nothing but their layout, which makes it a good test of group-name resolution in a dense form.
Preview — first 43 lineshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Defect triage grid - Novus Examples</title>
<meta name="description" content="Four independent radio grids that combine into one triage decision. SAMPLE test data only.">
<style>:root{--bg:#f6f7f9;--card:#fff;--fg:#1a1d23;--muted:#5b6472;--border:#d9dee6;--accent:#0f9d6b;--accent-d:#0c7f56;--err:#d33;--radius:10px}*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--fg);padding:2rem 1rem}.wrap{max-width:640px;margin:0 auto}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.75rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}h1{margin:0 0 .25rem;font-size:1.55rem}.lead{margin:0 0 1.5rem;color:var(--muted)}form{display:grid;gap:1.1rem}.field{display:grid;gap:.35rem}label{font-weight:600;font-size:.92rem}.req{color:var(--err)}.hint{font-size:.8rem;color:var(--muted)}input,select,textarea{font:inherit;color:inherit;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .7rem;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}textarea{resize:vertical;min-height:110px}input[type=range]{padding:0}input[type=color]{height:44px;padding:.25rem}input[type=file]{padding:.45rem}.group{display:grid;gap:.45rem}.opt{display:flex;align-items:center;gap:.55rem;font-weight:400}.opt input{width:auto}.inline{display:flex;flex-wrap:wrap;gap:1rem}fieldset{border:1px solid var(--border);border-radius:12px;padding:1rem;margin:0}legend{font-weight:600;padding:0 .4rem}.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.7rem 1.3rem}.btn{background:var(--accent);color:#fff}.btn:hover{background:var(--accent-d)}.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}.ok{display:none;background:#e7f7ef;border:1px solid #b6e6cf;color:#0c7f56;border-radius:var(--radius);padding:.7rem .9rem;font-size:.9rem}.foot{margin-top:1.25rem;font-size:.78rem;color:var(--muted);text-align:center}@media(max-width:480px){body{padding:1rem .5rem}.card{padding:1.25rem}}.grid2{display:grid;gap:1.1rem;grid-template-columns:1fr}@media(min-width:560px){.grid2{grid-template-columns:1fr 1fr}}.note{font-size:.82rem;color:var(--muted);border-left:3px solid var(--border);padding:.15rem 0 .15rem .7rem;margin:.2rem 0}.steps{display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 1.1rem;font-size:.8rem}.steps li{border:1px solid var(--border);border-radius:999px;padding:.2rem .7rem;color:var(--muted)}.steps li[aria-current=step]{border-color:var(--accent);color:var(--accent-d);font-weight:700}.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}table.matrix{width:100%;border-collapse:collapse;font-size:.85rem}table.matrix th,table.matrix td{border:1px solid var(--border);padding:.4rem .5rem;text-align:left}table.matrix th{background:#eef1f5;font-weight:600}[data-branch]{display:none}[data-branch].on{display:grid}input:read-only,textarea:read-only{background:#f1f3f6;color:var(--muted)}input:disabled,select:disabled,textarea:disabled{background:#eceff3;color:#9aa3af}</style>
</head>
<body>
<main class="wrap"><div class="card">
<h1>Triage a defect</h1>
<p class="lead">Four independent radio grids that combine into one triage decision. SAMPLE test data only.</p>
<form method="post" action="#" novalidate>
<div class="hp" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
<fieldset><legend>Defect</legend>
<div class="field"><label for="f-defect_id">Defect id <span class="req">*</span></label><input id="f-defect_id" type="text" name="defect_id" value="DEF-SAMPLE-204" required></div>
<div class="field"><label for="f-component">Component</label><input id="f-component" type="text" name="component" value="form-parser"></div>
</fieldset>
<fieldset><legend>Severity <span class="req">*</span></legend>
<div class="group"><label class="opt" for="opt-severity-s1"><input id="opt-severity-s1" type="radio" name="severity" value="s1" required> Data loss or corruption</label><label class="opt" for="opt-severity-s2"><input id="opt-severity-s2" type="radio" name="severity" value="s2" required checked> A workflow is blocked</label><label class="opt" for="opt-severity-s3"><input id="opt-severity-s3" type="radio" name="severity" value="s3" required> A workaround exists</label><label class="opt" for="opt-severity-s4"><input id="opt-severity-s4" type="radio" name="severity" value="s4" required> Cosmetic</label></div>
</fieldset>
<fieldset><legend>How often it happens</legend>
<div class="group"><label class="opt" for="opt-likelihood-l1"><input id="opt-likelihood-l1" type="radio" name="likelihood" value="l1"> Every time</label><label class="opt" for="opt-likelihood-l2"><input id="opt-likelihood-l2" type="radio" name="likelihood" value="l2" checked> Sometimes</label><label class="opt" for="opt-likelihood-l3"><input id="opt-likelihood-l3" type="radio" name="likelihood" value="l3"> Rarely</label></div>
</fieldset>
<fieldset><legend>Who it affects</legend>
<div class="group"><label class="opt" for="opt-radius-r1"><input id="opt-radius-r1" type="radio" name="radius" value="r1"> Everyone</label><label class="opt" for="opt-radius-r2"><input id="opt-radius-r2" type="radio" name="radius" value="r2" checked> One team</label><label class="opt" for="opt-radius-r3"><input id="opt-radius-r3" type="radio" name="radius" value="r3"> One person</label></div>
</fieldset>
<fieldset><legend>Confidence in this assessment</legend>
<div class="group"><label class="opt" for="opt-confidence-c1"><input id="opt-confidence-c1" type="radio" name="confidence" value="c1" checked> High</label><label class="opt" for="opt-confidence-c2"><input id="opt-confidence-c2" type="radio" name="confidence" value="c2"> Low</label></div>
</fieldset>
<div class="field"><label for="f-priority">Computed priority</label><input id="f-priority" type="text" name="priority" value="P4" readonly><span class="hint">Derived in the browser from the four grids above.</span></div>
<p class="hint" data-locked="notice">SAMPLE test data only - nothing is submitted, uploaded, or stored.</p>
<div class="ok" role="status">A priority was computed locally - nothing was filed.</div>
<div class="actions"><button type="submit" class="btn">Compute the sample priority</button></div>
</form>
<script>var W={severity:{s1:4,s2:3,s3:2,s4:1},likelihood:{l1:3,l2:2,l3:1},radius:{r1:3,r2:2,r3:1},confidence:{c1:2,c2:1}};function score(){var total=0;Object.keys(W).forEach(function(group){var picked=document.querySelector('input[name="'+group+'"]:checked');if(picked){total+=W[group][picked.value]||0;}});document.getElementById('f-priority').value=total>=10?'P1':total>=7?'P2':total>=4?'P3':'P4';}document.querySelectorAll('input[type="radio"]').forEach(function(el){el.addEventListener('change',score);});score();</script>
<p class="foot">Free example form from Novus Examples · works offline, no data leaves your browser.</p>
</div></main>
<script>document.querySelectorAll('form').forEach(function(f){f.addEventListener('submit',function(e){e.preventDefault();var hp=f.querySelector('.hp input');if(hp&&hp.value){return;}if(!f.checkValidity()){f.reportValidity();return;}var ok=f.querySelector('.ok');if(ok){ok.style.display='block';ok.scrollIntoView({block:'nearest'});}f.reset();});});</script>
</body>
</html>
Specifications
- Fields
- 7
- Use Case
- software-quality
- Validation
- HTML5 native
- Honeypot
- true
- Standalone
- true
- Dependencies
- none
- Radio Groups
- 4
- Computed Priority
- true
What is a .html file?
HTML (HyperText Markup Language) is the structural markup language of the web, using nested tags to define document content, semantics, and links. It is typically paired with CSS for presentation and JavaScript for behavior. It is the foundational format rendered by browsers.
How to use this file
Use an example HTML file to test parsers, DOM construction, sanitization of untrusted markup, and rendering or scraping pipelines.
How to use this file for testing
“Defect Triage Grid (HTML)” is a deterministic Novus Examples fixture for Form testing, Form parsing, Autofill testing, HTML parsing. HTML and PDF form files for testing scrapers, autofill, validators, and PDF form fillers across real-life use cases.
Documented properties for this file: 7 fields. Compare results against paired or grouped companions on this page when present (clean↔damaged, searchable↔scanned, or format twins) so scores stay reproducible across runs.
Download the file once, keep the path stable in CI or local scripts, and treat the spec table as the contract: dimensions, seeds, field lists, and roles are intentional. Corrupt or invalid samples are labelled as such — expect parsers to fail loudly rather than silently accept them.
This form is fictional SAMPLE content for tooling tests (autofill, scrapers, PDF fillers). It is not an official government, bank, or clinic form. Open the HTML offline or fill the PDF in any viewer; the demo submit path never stores data.
Embed this form
It's a single self-contained HTML file (inlined CSS, native validation, no external requests). Download it, host it on your own site, and drop it into any page with an iframe.
iframe embed
<!-- Download defect-triage-grid.html, host it on your site, then embed the form anywhere: -->
<iframe
src="/path/to/defect-triage-grid.html"
title="Defect Triage Grid (HTML)"
width="100%"
height="640"
loading="lazy"
style="border:0">
</iframe>Related files
- htmlConsent Form Template (HTML, SAMPLE)A minimal fictional marketing-consent HTML form — for privacy UX and scraper tests.
- emlEML — multipart/alternative Whose Parts DisagreeText and HTML alternatives that state different totals and different delivery dates. The spec says the parts must be alternative renderings of the same content, so this fixture shows what a tool extracts when they are not — the answer depends entirely on which part it picks.
- epubEPUB 3 - Inline SVG in XHTML (svg property)SVG written straight into an XHTML content document, with properties="svg" declared on the manifest item as EPUB 3 requires. The other half of the SVG question: inline vector markup rather than a standalone content document.
- epubEPUB 3 - MathML with the mathml Property DeclaredAn EPUB 3 with a block MathML equation and the required properties="mathml" on its content document. The baseline for MathML support, paired with a twin that omits the declaration.
- epubEPUB 3 - Scripted Content with the scripted PropertyAn EPUB 3 whose one content document declares properties="scripted" and contains a single inline script that rewrites one paragraph. It makes no network request and reads correctly with scripting switched off, so it tests the property and the fallback rather than the script.
- epubEPUB 3 - SVG Content Document in the SpineAn EPUB 3 whose first spine item is an SVG content document rather than XHTML, followed by a chapter that explains what should have appeared. For testing readers that assume every reading-order document is XHTML.
Generated by generation/forms_p7.py. Free for any use, no attribution required — license.