Accessible Form Builder

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'sha256-P4X0P2509qqOel33HmrxvKicF4taXdaFQCPWJX0v+o4='; connect-src 'none'; img-src 'none'; form-action 'none'; base-uri 'none'; object-src 'none'" />
<title>Project enquiry</title>
<style>
:root { color-scheme: light dark; font: 100%/1.6 system-ui, sans-serif; color: #172a3a; background: #f2f5f8; }
* { box-sizing: border-box; }
body { margin: 0; padding: clamp(1rem, 4vw, 3rem); }
main { max-width: 44rem; margin-inline: auto; }
h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.15; }
form { padding: clamp(1rem, 4vw, 2rem); border: 1px solid #bcc9d5; border-radius: .8rem; background: #fff; }
.field { margin-block: 0 1.5rem; min-width: 0; }
fieldset { min-width: 0; margin: 0 0 1.5rem; padding: 1rem; border: 1px solid #99adbe; border-radius: .4rem; }
legend, label { font-weight: 650; }
label { display: block; margin-bottom: .4rem; overflow-wrap: anywhere; }
legend { padding-inline: .35rem; overflow-wrap: anywhere; }
input:not([type=checkbox]):not([type=radio]), textarea, select { display: block; width: 100%; min-height: 44px; padding: .65rem; border: 1px solid #647c8e; border-radius: .3rem; font: inherit; color: inherit; background: #fff; }
textarea { min-height: 7rem; resize: vertical; }
.choice { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding-block: .5rem; }
input[type=checkbox], input[type=radio] { flex-shrink: 0; width: 1.2rem; height: 1.2rem; margin: .3rem 0 0; accent-color: #1858a1; }
.help, .notice { font-size: .9rem; color: #465f72; }
.help { margin: .45rem 0 0; }
.required { font-size: .85rem; font-weight: 400; }
button { min-height: 44px; padding: .7rem 1.1rem; border: 0; border-radius: .35rem; background: #1858a1; color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
:focus-visible { outline: 3px solid #b64d00; outline-offset: 3px; }
#validation-status { min-height: 1.6em; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :root { color: #edf3f8; background: #101b26; } form, input:not([type=checkbox]):not([type=radio]), textarea, select { background: #172737; } .help, .notice { color: #b8ccdd; } button { background: #96c9ff; color: #102338; } :focus-visible { outline-color: #ffb974; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
</style>
</head>
<body>
<main>
<h1>Project enquiry</h1>
<p>Tell us what you have in mind. This is a local form example.</p>
<p class="notice">Fields marked required must be completed. This example checks fields locally; it has no submission destination.</p>
<form id="generated-form" aria-label="Project enquiry">
<fieldset>
<legend>Contact details</legend>
<div class="field">
<label for="field-1">Your name <span class="required">(required)</span></label>
<input type="text" id="field-1" name="full_name" required />
</div>
<div class="field">
<label for="field-2">Email address <span class="required">(required)</span></label>
<input type="email" id="field-2" name="email" required aria-describedby="field-2-help" />
<p class="help" id="field-2-help">Use an address where you can receive a reply.</p>
</div>
</fieldset>
<div class="field">
<label for="field-3">Project type <span class="required">(required)</span></label>
<select id="field-3" name="project" required>
<option value="">Choose an option</option>
<option value="A new website">A new website</option>
<option value="An existing website">An existing website</option>
<option value="Something else">Something else</option>
</select>
</div>
<fieldset class="field">
<legend>When would you like to begin? <span class="required">(optional)</span></legend>
<label class="choice" for="field-4-0"><input type="radio" id="field-4-0" name="timing" value="Soon" /> <span>Soon</span></label>
<label class="choice" for="field-4-1"><input type="radio" id="field-4-1" name="timing" value="In a few months" /> <span>In a few months</span></label>
<label class="choice" for="field-4-2"><input type="radio" id="field-4-2" name="timing" value="Still exploring" /> <span>Still exploring</span></label>
</fieldset>
<div class="field">
<label for="field-5">A little about the project <span class="required">(optional)</span></label>
<textarea id="field-5" name="notes" aria-describedby="field-5-help" rows="4"></textarea>
<p class="help" id="field-5-help">Avoid private or sensitive information in this demonstration.</p>
</div>
<button type="button" id="check-fields" hidden>Check fields locally</button>
<p id="validation-status" role="status" aria-live="polite"></p>
<noscript><p>The fields remain usable. Local validation checks need JavaScript; nothing is submitted.</p></noscript>
</form>
</main>
<script>
(() => {
  const form = document.getElementById('generated-form');
  const status = document.getElementById('validation-status');
  const check = document.getElementById('check-fields');
  check.hidden = false;
  form.addEventListener('submit', (event) => event.preventDefault());
  form.addEventListener('input', () => { status.textContent = ''; });
  form.addEventListener('change', () => { status.textContent = ''; });
  check.addEventListener('click', () => {
    const valid = form.reportValidity();
    if (!valid) {
      const invalid = [...form.querySelectorAll('input, select, textarea')].find((field) => !field.validity.valid);
      invalid?.focus();
    }
    status.textContent = valid
      ? 'Native field checks passed. Nothing was sent. Manual accessibility testing is still needed.'
      : 'Check the highlighted field. Nothing was sent.';
  });
})();
</script>
</body>
</html>