html5 KB

Event Booking / RSVP Form (HTML)

A downloadable event booking / RSVP form — guest count, date and time, meal choice, dietary requirements, and notes.

Form testing Autofill testing Web scraping HTML parsing

Preview — first 26 lineshtml

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Event booking / RSVP form — Novus Examples</title>
<meta name="description" content="An event booking / RSVP form — guests, date and time, meal choice, dietary requirements, and notes.">
<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>Reserve your place</h1>
<p class="lead">An event booking / RSVP form — guests, date and time, meal choice, dietary requirements, and notes.</p>
<form method="post" action="#" novalidate>
<div class="field"><label for="name">Your name <span class="req">*</span></label><input id="name" name="name" 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="guests">Number of guests <span class="req">*</span></label><input id="guests" name="guests" type="number" min="1" max="20" value="1" required></div><div class="field"><label for="date">Event date <span class="req">*</span></label><input id="date" name="date" type="date" required></div><div class="field"><label for="time">Preferred time</label><input id="time" name="time" type="time"></div><fieldset><legend>Meal preference</legend><div class="inline"><label class="opt"><input type="radio" name="meal" value="meat" checked> Meat</label><label class="opt"><input type="radio" name="meal" value="fish"> Fish</label><label class="opt"><input type="radio" name="meal" value="veg"> Vegetarian</label><label class="opt"><input type="radio" name="meal" value="vegan"> Vegan</label></div></fieldset>
<fieldset><legend>Dietary requirements</legend><div class="group"><label class="opt"><input type="checkbox" name="diet" value="gluten"> Gluten-free</label><label class="opt"><input type="checkbox" name="diet" value="nuts"> Nut allergy</label><label class="opt"><input type="checkbox" name="diet" value="dairy"> Dairy-free</label></div></fieldset>
<div class="field"><label for="notes">Notes</label><textarea id="notes" name="notes"></textarea></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 RSVP is valid and would be recorded.</div>
<div class="actions"><button type="submit" class="btn">Reserve</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: 8
Validation: HTML5 native
Honeypot: true
Standalone: true
Dependencies: none
Live Demo
Use Case: events

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

“Event Booking / RSVP Form (HTML)” is a deterministic Novus Examples fixture for Form testing, Autofill testing, Web scraping, 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: 8 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 booking.html, host it on your site, then embed the form anywhere: -->
<iframe
  src="/path/to/booking.html"
  title="Event Booking / RSVP 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.