html5.5 KB
Checkout Form (HTML)
A downloadable mock-checkout form — shipping address plus a payment section that accepts the standard test card 4111 1111 1111 1111. Nothing is charged or stored.
Preview — first 29 lineshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checkout form — Novus Examples</title>
<meta name="description" content="A mock e-commerce checkout — shipping address and a payment section that accepts the standard test card 4111 1111 1111 1111. Nothing is charged or stored.">
<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>Checkout</h1>
<p class="lead">A mock e-commerce checkout — shipping address and a payment section that accepts the standard test card 4111 1111 1111 1111. Nothing is charged or stored.</p>
<form method="post" action="#" novalidate>
<fieldset><legend>Shipping</legend>
<div class="field"><label for="name">Full name <span class="req">*</span></label><input id="name" name="name" type="text" required autocomplete="name"></div><div class="field"><label for="address">Address <span class="req">*</span></label><input id="address" name="address" type="text" required autocomplete="street-address"></div><div class="field"><label for="city">City <span class="req">*</span></label><input id="city" name="city" type="text" required autocomplete="address-level2"></div><div class="field"><label for="zip">ZIP / Postcode <span class="req">*</span></label><input id="zip" name="zip" type="text" required pattern="[A-Za-z0-9 -]{3,10}" autocomplete="postal-code"></div><div class="field"><label for="country">Country <span class="req">*</span></label><select id="country" name="country" required><option value="">Choose…</option><option>United States</option><option>United Kingdom</option><option>Canada</option><option>Australia</option><option>Other</option></select></div></fieldset>
<fieldset><legend>Payment</legend>
<div class="field"><label for="card">Card number <span class="req">*</span></label><input id="card" name="card" type="text" inputmode="numeric" required pattern="[0-9 ]{13,23}" autocomplete="cc-number" placeholder="4111 1111 1111 1111"><span class="hint">Use the test card 4111 1111 1111 1111 — no real cards.</span></div><div class="field"><label for="expiry">Expiry (MM/YY) <span class="req">*</span></label><input id="expiry" name="expiry" type="text" required pattern="(0[1-9]|1[0-2])/[0-9]{2}" placeholder="12/29" autocomplete="cc-exp"></div><div class="field"><label for="cvc">CVC <span class="req">*</span></label><input id="cvc" name="cvc" type="text" inputmode="numeric" required pattern="[0-9]{3,4}" autocomplete="cc-csc" placeholder="123"></div></fieldset>
<label class="opt"><input type="checkbox" name="terms" value="yes" required> I agree to 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 — the (test) order is valid and would be placed. No payment is taken.</div>
<div class="actions"><button type="submit" class="btn">Place order</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
- /forms/checkout
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 checkout.html, host it on your site, then embed the form anywhere: -->
<iframe
src="/path/to/checkout.html"
title="Checkout 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.