Quiz form HTML template

<form class="lf-form" action="/api/quiz" method="POST">
  <fieldset class="field">
    <legend>What is 2 + 2? *</legend>
      <label class="radio">
        <input type="radio" name="q1" value="3" required />
        <span>3</span>
      </label>
      <label class="radio">
        <input type="radio" name="q1" value="4" />
        <span>4</span>
      </label>
      <label class="radio">
        <input type="radio" name="q1" value="5" />
        <span>5</span>
      </label>
      <label class="radio">
        <input type="radio" name="q1" value="22" />
        <span>22</span>
      </label>
  </fieldset>
  <fieldset class="field">
    <legend>Which is a JavaScript framework? *</legend>
      <label class="radio">
        <input type="radio" name="q2" value="React" required />
        <span>React</span>
      </label>
      <label class="radio">
        <input type="radio" name="q2" value="Django" />
        <span>Django</span>
      </label>
      <label class="radio">
        <input type="radio" name="q2" value="Rails" />
        <span>Rails</span>
      </label>
      <label class="radio">
        <input type="radio" name="q2" value="Laravel" />
        <span>Laravel</span>
      </label>
  </fieldset>
  <fieldset class="field">
    <legend>What does HTML stand for? *</legend>
      <label class="radio">
        <input type="radio" name="q3" value="HyperText Markup Language" required />
        <span>HyperText Markup Language</span>
      </label>
      <label class="radio">
        <input type="radio" name="q3" value="High Test Modern Language" />
        <span>High Test Modern Language</span>
      </label>
      <label class="radio">
        <input type="radio" name="q3" value="Home Tool Markup Language" />
        <span>Home Tool Markup Language</span>
      </label>
      <label class="radio">
        <input type="radio" name="q3" value="Hyperlinks and Text Markup Language" />
        <span>Hyperlinks and Text Markup Language</span>
      </label>
  </fieldset>

  <button type="submit">Submit answers</button>
</form>

<style>
.lf-form { max-width: 480px; margin: 0 auto; font-family: system-ui, sans-serif; }
.lf-form .field { margin-bottom: 1rem; }
.lf-form label, .lf-form legend { display: block; font-weight: 500; margin-bottom: 0.35rem; font-size: 0.9rem; }
.lf-form input, .lf-form select, .lf-form textarea {
  width: 100%; padding: 0.65rem 0.75rem; font-size: 1rem;
  border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff;
  font-family: inherit;
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus {
  outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb;
}
.lf-form .checkbox, .lf-form .radio { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.lf-form .checkbox input, .lf-form .radio input { width: auto; }
.lf-form button {
  width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 600;
  color: #fff; background: #2563eb; border: 0; border-radius: 0.5rem; cursor: pointer;
}
.lf-form button:hover { background: #1d4ed8; }
</style>