html6.9 KB

Choice Input Types (HTML)

Every way HTML expresses a choice: a single select with a prompt row, a multiple select, a select with option groups, a radio group, a checkbox group and a lone checkbox - including options whose submitted value differs from their visible label.

Form testing Form parsing Autofill testing HTML parsing Web scraping

Preview — first 37 lineshtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Choice input types - Novus Examples</title>
<meta name="description" content="Single select, multiple select, grouped options, radio group and checkbox group. 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>Choice input types</h1>
<p class="lead">Single select, multiple select, grouped options, radio group and checkbox group. 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>Select controls</legend>
<div class="field"><label for="f-single_choice">Single choice</label><select id="f-single_choice" name="single_choice"><option value="">Choose one</option><option value="a">Option A</option><option value="b" selected>Option B</option><option value="c">Option C</option></select></div>
<div class="field"><label for="f-multi_choice">Multiple choice</label><select id="f-multi_choice" name="multi_choice" size="4" multiple><option value="red">Red</option><option value="green" selected>Green</option><option value="blue" selected>Blue</option><option value="amber">Amber</option></select><span class="hint">Values differ from labels only in case here; the submitted value is lowercase.</span></div>
</fieldset>
<div class="field"><label for="f-grouped">Grouped options</label><select id="f-grouped" name="grouped"><optgroup label="Europe"><option value="gb">United Kingdom</option><option value="de">Germany</option></optgroup><optgroup label="Americas"><option value="us">United States</option><option value="br">Brazil</option></optgroup></select><span class="hint">Option groups are presentation only - the submitted value is the option value.</span></div>
<fieldset><legend>Delivery speed</legend>
<div class="group"><label class="opt" for="opt-delivery-std"><input id="opt-delivery-std" type="radio" name="delivery" value="std"> Standard (5 days)</label><label class="opt" for="opt-delivery-exp"><input id="opt-delivery-exp" type="radio" name="delivery" value="exp" checked> Express (2 days)</label><label class="opt" for="opt-delivery-nxt"><input id="opt-delivery-nxt" type="radio" name="delivery" value="nxt"> Next day</label></div>
</fieldset>
<fieldset><legend>Add-ons</legend>
<div class="group"><label class="opt" for="opt-addons-gift"><input id="opt-addons-gift" type="checkbox" name="addons" value="gift"> Gift wrap</label><label class="opt" for="opt-addons-ins"><input id="opt-addons-ins" type="checkbox" name="addons" value="ins" checked> Insurance</label><label class="opt" for="opt-addons-sig"><input id="opt-addons-sig" type="checkbox" name="addons" value="sig"> Signature on delivery</label></div>
</fieldset>
<label class="opt" for="f-reuse_address"><input id="f-reuse_address" type="checkbox" name="reuse_address" value="on"> Reuse the address from my last sample order</label>
<p class="hint" data-locked="notice">SAMPLE test data only - nothing is submitted, uploaded, or stored.</p>
<div class="ok" role="status">Sample validated locally - nothing was sent.</div>
<div class="actions"><button type="submit" class="btn">Read the choices</button></div>
</form>
<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: 6
Use Case: software-quality
Validation: HTML5 native
Honeypot: true
Standalone: true
Dependencies: none
Choice Controls: 6

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

“Choice Input Types (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: 6 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 input-types-choice.html, host it on your site, then embed the form anywhere: -->
<iframe
  src="/path/to/input-types-choice.html"
  title="Choice Input Types (HTML)"
  width="100%"
  height="640"
  loading="lazy"
  style="border:0">
</iframe>

Generated by generation/forms_p7.py. Free for any use, no attribution required — license.