html6.2 KB
Full Contact Form (HTML)
A downloadable form exercising every common input type — text, email, tel, url, number, date, time, colour, range, select, radio, checkbox, file, and textarea — for testing autofill, scrapers, and parsers.
Preview — first 39 lineshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full contact form — Novus Examples</title>
<meta name="description" content="Every common input type — text, email, tel, url, number, date, time, colour, range, select, radio, checkbox, file, and textarea — with native validation.">
<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>Full contact form</h1>
<p class="lead">Every common input type — text, email, tel, url, number, date, time, colour, range, select, radio, checkbox, file, and textarea — with native validation.</p>
<form method="post" action="#" novalidate>
<div class="field"><label for="fullname">Full name <span class="req">*</span></label><input id="fullname" name="fullname" type="text" required autocomplete="name"></div>
<div class="field"><label for="email">Email <span class="req">*</span></label><input id="email" name="email" type="email" required autocomplete="email"></div>
<div class="field"><label for="phone">Phone</label><input id="phone" name="phone" type="tel" placeholder="+1 555 123 4567" pattern="[+0-9 ()-]{7,}" autocomplete="tel"></div>
<div class="field"><label for="website">Website</label><input id="website2" name="website_url" type="url" placeholder="https://example.com"></div>
<div class="field"><label for="age">Age</label><input id="age" name="age" type="number" min="0" max="120" step="1"></div>
<div class="field"><label for="dob">Date of birth</label><input id="dob" name="dob" type="date"></div>
<div class="field"><label for="appt">Preferred call time</label><input id="appt" name="appt" type="time"></div>
<div class="field"><label for="colour">Favourite colour</label><input id="colour" name="colour" type="color" value="#0f9d6b"></div>
<div class="field"><label for="budget">Budget: <output id="bo">500</output></label><input id="budget" name="budget" type="range" min="0" max="1000" step="50" value="500" oninput="document.getElementById('bo').value=this.value"></div>
<div class="field"><label for="country">Country</label><select id="country" name="country"><option value="">Choose…</option><option>United States</option><option>United Kingdom</option><option>Canada</option><option>Australia</option><option>Other</option></select></div>
<fieldset><legend>Preferred contact method</legend><div class="inline"><label class="opt"><input type="radio" name="prefer" value="email" checked> Email</label><label class="opt"><input type="radio" name="prefer" value="phone"> Phone</label><label class="opt"><input type="radio" name="prefer" value="post"> Post</label></div></fieldset>
<fieldset><legend>Interests</legend><div class="group"><label class="opt"><input type="checkbox" name="interests" value="news"> Product news</label><label class="opt"><input type="checkbox" name="interests" value="offers"> Offers</label><label class="opt"><input type="checkbox" name="interests" value="events"> Events</label></div></fieldset>
<div class="field"><label for="attachment">Attachment</label><input id="attachment" name="attachment" type="file" accept=".pdf,.png,.jpg"></div>
<div class="field"><label for="message">Message</label><textarea id="message" name="message"></textarea></div>
<label class="opt"><input type="checkbox" name="subscribe" value="yes"> Subscribe to the newsletter</label>
<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 — the form is valid and would be submitted.</div>
<div class="actions"><button type="submit" class="btn">Submit</button><button type="reset" class="btn-ghost">Reset</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
- 16
- Validation
- HTML5 native
- Honeypot
- true
- Standalone
- true
- Dependencies
- none
- Live Demo
- /forms/full-contact
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.