Code / Web Basics: HTML & CSS / Unit 2: Tables and forms

Forms: a school admission form फ़ॉर्म: स्कूल एडमिशन फ़ॉर्म

Lesson 5 of 14 · about 18 minutes · Collect information with inputs, labels, dropdowns and buttons.

⚡ 0 XP

Step 1 of 2

Inputs and labels

A <form> holds the fields people fill in. The most common field is <input> — it has no closing tag. Its type changes what it accepts:

type="text" — any text, like a name
type="email" — an email address
type="date" — shows a date picker
type="number", type="tel" — numbers and phone numbers

Every input needs a <label>. Connect them: the label’s for must match the input’s id. Then clicking the label focuses the box, and screen readers read the label aloud.

Example

<form>
  <label for="student">Student name</label>
  <input type="text" id="student" name="student">
</form>

`for="student"` matches `id="student"` — that is the connection.

🎯 Challenge: Start the admission form +20 XP

Inside the <form>, after the name field, add:

a parent’s email field (type="email")
a date of birth field (type="date")

Give every input a <label> whose for matches the input’s id.

Try twice to unlock the solution (0/2)

index.htmlCtrl ⏎

Preview

Console

Output from console.log appears here.

Checklist

Press Run to check your code.

There is an email input in the form
There is a date input in the form
Every input has a matching label

Lesson notes (text version)

1. Inputs and labels

A <form> holds the fields people fill in. The most common field is <input> — it has no closing tag. Its type changes what it accepts:

type="text" — any text, like a name
type="email" — an email address
type="date" — shows a date picker
type="number", type="tel" — numbers and phone numbers

Every input needs a <label>. Connect them: the label’s for must match the input’s id. Then clicking the label focuses the box, and screen readers read the label aloud.

                <form>
  <label for="student">Student name</label>
  <input type="text" id="student" name="student">
</form>

Challenge: Start the admission form

Inside the <form>, after the name field, add:

a parent’s email field (type="email")
a date of birth field (type="date")

Give every input a <label> whose for matches the input’s id.

2. Dropdowns, radio buttons and submit

More kinds of fields:

<select> makes a dropdown; each choice is an <option>
type="radio" buttons let you pick one from a group — give them all the same name
required means the form will not submit while the field is empty
<button type="submit"> sends the form

In our preview nothing is really sent anywhere — that is safe for practice.

                <label for="cls">Class</label>
<select id="cls" name="cls">
  <option>Class 6</option>
  <option>Class 7</option>
</select>

<p>Transport:
  <label><input type="radio" name="transport" value="bus"> School bus</label>
  <label><input type="radio" name="transport" value="self"> Self</label>
</p>

Challenge: Finish the admission form

Add to the form:

a <select> for the class with at least 3 <option>s, and a label for it
at least 2 radio buttons for transport (school bus / van / self) sharing the same name
make the student name required
a submit <button> with text like "Apply"