html5.5 KB

Survey Form (HTML)

A downloadable survey form with mixed question types — a rating scale, dropdown, checkbox and radio groups, a satisfaction slider, and a comment box.

Form Testing Autofill Testing Web Scraping HTML Parsing

Preview — first 31 lineshtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Survey form — Novus Examples</title>
<meta name="description" content="A survey with mixed question types — a rating scale, dropdown, checkboxes, radio groups, a slider, and a comment box.">
<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}}</style>
</head>
<body>
<main class="wrap"><div class="card">
<h1>Quick survey</h1>
<p class="lead">A survey with mixed question types — a rating scale, dropdown, checkboxes, radio groups, a slider, and a comment box.</p>
<form method="post" action="#" novalidate>
<fieldset><legend>How would you rate us? <span class="req">*</span></legend><div class="inline"><label class="opt"><input type="radio" name="rating" value="1" required> 1</label><label class="opt"><input type="radio" name="rating" value="2" required> 2</label><label class="opt"><input type="radio" name="rating" value="3" required> 3</label><label class="opt"><input type="radio" name="rating" value="4" required> 4</label><label class="opt"><input type="radio" name="rating" value="5" required> 5</label></div></fieldset>
<div class="field"><label for="hear">How did you hear about us?</label><select id="hear" name="hear"><option value="">Choose…</option><option>Search engine</option><option>Social media</option><option>A friend</option><option>Advertisement</option><option>Other</option></select></div>
<fieldset><legend>Which features do you use?</legend><div class="group"><label class="opt"><input type="checkbox" name="features" value="editor"> Editor</label><label class="opt"><input type="checkbox" name="features" value="downloads"> Downloads</label><label class="opt"><input type="checkbox" name="features" value="search"> Search</label><label class="opt"><input type="checkbox" name="features" value="api"> API</label></div></fieldset>
<fieldset><legend>Would you recommend us?</legend><div class="inline"><label class="opt"><input type="radio" name="recommend" value="yes"> Yes</label><label class="opt"><input type="radio" name="recommend" value="maybe"> Maybe</label><label class="opt"><input type="radio" name="recommend" value="no"> No</label></div></fieldset>
<div class="field"><label for="nps">Satisfaction: <output id="no">7</output>/10</label><input id="nps" name="nps" type="range" min="0" max="10" step="1" value="7" oninput="document.getElementById('no').value=this.value"></div>
<div class="field"><label for="comments">Comments</label><textarea id="comments" name="comments" placeholder="Tell us more…"></textarea></div>
<div class="field"><label for="email">Email (optional)</label><input id="email" name="email" type="email" autocomplete="email"></div>
<div class="hp" aria-hidden="true"><label>Leave this field empty<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
<div class="ok" role="status">Thanks — your survey response is valid and would be recorded.</div>
<div class="actions"><button type="submit" class="btn">Submit response</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: 7
Validation: HTML5 native
Honeypot: true
Standalone: true
Dependencies: none
Live Demo: /forms/survey

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.

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