html5.8 KB
Job Application Form (HTML)
A downloadable job-application form — contact details, position, experience, a résumé file input, cover letter, work-authorization radios, and a consent checkbox.
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>Job application form — Novus Examples</title>
<meta name="description" content="A realistic job-application form — contact details, position, experience, résumé upload, cover letter, work authorization, and a consent checkbox.">
<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>Job application</h1>
<p class="lead">A realistic job-application form — contact details, position, experience, résumé upload, cover letter, work authorization, and a consent checkbox.</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" pattern="[+0-9 ()-]{7,}" autocomplete="tel"></div><div class="field"><label for="position">Position applied for <span class="req">*</span></label><select id="position" name="position" required><option value="">Choose…</option><option>Software Engineer</option><option>Product Designer</option><option>Data Analyst</option><option>Marketing Manager</option><option>Other</option></select></div><div class="field"><label for="experience">Years of experience</label><input id="experience" name="experience" type="number" min="0" max="50" step="1"></div><div class="field"><label for="start">Earliest start date</label><input id="start" name="start" type="date"></div><div class="field"><label for="salary">Expected salary (USD)</label><input id="salary" name="salary" type="number" min="0" step="1000" placeholder="80000"></div><div class="field"><label for="linkedin">LinkedIn / portfolio</label><input id="linkedin" name="linkedin" type="url" placeholder="https://example.com/you"></div><div class="field"><label for="resume">Résumé (PDF/DOC) <span class="req">*</span></label><input id="resume" name="resume" type="file" accept=".pdf,.doc,.docx" required></div><div class="field"><label for="cover">Cover letter</label><textarea id="cover" name="cover" minlength="20"></textarea><span class="hint">Tell us why you're a fit.</span></div><fieldset><legend>Work authorization</legend><div class="inline"><label class="opt"><input type="radio" name="auth" value="citizen" checked> Citizen/PR</label><label class="opt"><input type="radio" name="auth" value="visa"> Visa holder</label><label class="opt"><input type="radio" name="auth" value="sponsor"> Needs sponsorship</label></div></fieldset>
<label class="opt"><input type="checkbox" name="consent" value="yes" required> I consent to my data being processed for this application <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 application is valid and would be submitted.</div>
<div class="actions"><button type="submit" class="btn">Submit application</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
- 13
- Validation
- HTML5 native
- Honeypot
- true
- Standalone
- true
- Dependencies
- none
- Live Demo
- /forms/job
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 job-application.html, host it on your site, then embed the form anywhere: -->
<iframe
src="/path/to/job-application.html"
title="Job Application 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.