html5.1 KB

Registration Form (HTML)

A downloadable sectioned registration form — personal details, account credentials, and address — with grouped fieldsets and native validation.

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>Registration form — Novus Examples</title>
<meta name="description" content="A sectioned registration form — personal details, account credentials, and address — with grouped fieldsets and 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>Create your account</h1>
<p class="lead">A sectioned registration form — personal details, account credentials, and address — with grouped fieldsets and native validation.</p>
<form method="post" action="#" novalidate>
<fieldset><legend>Personal</legend>
<div class="field"><label for="first">First name <span class="req">*</span></label><input id="first" name="first" type="text" required autocomplete="given-name"></div><div class="field"><label for="last">Last name <span class="req">*</span></label><input id="last" name="last" type="text" required autocomplete="family-name"></div><div class="field"><label for="dob">Date of birth</label><input id="dob" name="dob" type="date"></div></fieldset>
<fieldset><legend>Account</legend>
<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="password">Password <span class="req">*</span></label><input id="password" name="password" type="password" required minlength="8" autocomplete="new-password"><span class="hint">At least 8 characters.</span></div></fieldset>
<fieldset><legend>Address</legend>
<div class="field"><label for="street">Street</label><input id="street" name="street" type="text" autocomplete="street-address"></div><div class="field"><label for="city2">City</label><input id="city2" name="city" type="text" autocomplete="address-level2"></div><div class="field"><label for="postcode">Postcode</label><input id="postcode" name="postcode" type="text" pattern="[A-Za-z0-9 -]{3,10}" autocomplete="postal-code"></div></fieldset>
<label class="opt"><input type="checkbox" name="terms" value="yes" required> I accept the terms <span class="req">*</span></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 — your registration is valid and would be created.</div>
<div class="actions"><button type="submit" class="btn">Register</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: 9
Validation: HTML5 native
Honeypot: true
Standalone: true
Dependencies: none
Live Demo

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.

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 registration.html, host it on your site, then embed the form anywhere: -->
<iframe
  src="/path/to/registration.html"
  title="Registration Form (HTML)"
  width="100%"
  height="640"
  loading="lazy"
  style="border:0">
</iframe>

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