HTML & CSS - lesson 6 | HackIndia Skills

Key point

One rule

Use real form elements first. A label, input, fieldset, legend, and button already carry meaning that browsers, keyboards, and assistive tech understand.

Labels are not placeholders

A placeholder disappears when someone starts typing. It is a hint, not a label. Your repo should show labels that stay visible, especially for forms like contact, registration, feedback, or payment interest.

Connect a label to one control with for and id. This also makes the label clickable, which helps on phone screens.

Example

Good form markup

This is enough for a clean project form. Notice the label connections, grouped radio buttons, and a real submit button.

<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>

Your to-do

Build the form

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Start with form, not a div wrapper pretending to be a form.
Add one visible label for every input, select, or textarea.
Use fieldset and legend for radio buttons or checkboxes that answer one question.
Use button type="submit" for submitting, not a clickable div.
Keep the DOM order the same as the visual reading order.

0 of 5 done

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;
}