HTML & CSS - lesson 6 | HackIndia Skills

HTML & CSS - lesson 6 | HackIndia Skills | HackIndia

<form class="contact-form" action="#" method="post">
  <div class="form-row">
    <label for="name">Full name</label>
    <input id="name" name="name" type="text" autocomplete="name" required>
  </div>

  <div class="form-row">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </div>

  <fieldset>
    <legend>Project type</legend>

    <label>
      <input type="radio" name="projectType" value="web">
      Web app
    </label>

    <label>
      <input type="radio" name="projectType" value="mobile">
      Mobile app
    </label>
  </fieldset>

  <button type="submit">Send interest</button>
</form>

Tip

Make controls readable

Form text should scale when a user changes text size. Use rem or em for font-size. Use unitless line-height so spacing follows the text size.

Use margin and padding to separate groups. A hostel complaint form, a UPI payment request form, and a college event signup all become easier when fields are clearly grouped.

input,
textarea,
select,
button {
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.form-row {
  display: grid;
  gap: 0.4rem;
  margin-block-end: 1rem;
}

fieldset {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid #c7c7c7;
}

Common mistake

Do not hide focus

Many old snippets use outline: none. Do not copy that unless you replace it with a visible focus style. Keyboard users need to see where they are.

Use :focus-visible for a clear focus ring when someone tabs through the form. Check it yourself with the Tab key.

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #111827;
  color: white;
  cursor: pointer;
}

Write accessible forms

One rule

Labels are not placeholders

Good form markup

Build the form

Make controls readable

Do not hide focus

Avoid visual reordering

Do this now

Quick check