Lab · Frontend Web Development
Lab: a college admission enquiry form
The brief
Shivaji College in Kolhapur gets hundreds of admission enquiries every June. Build the enquiry form: labelled fields, built-in validation for an Indian mobile number, choices for course and shift, a semantic page layout, and the small touches that make it usable with a screen reader.
Why it matters
Forms are where websites earn money: enquiries, sign-ups, bookings and payments. Colleges, coaching classes, clinics and builders all need forms that reject bad data before it reaches the office, and that everyone, including people using screen readers, can fill in.
Skills you practise
- form, label and input
- input types: text, tel, email
- required, minlength and pattern
- select, radio buttons and checkboxes
- fieldset and legend
- header, nav, main and footer
- aria-describedby
What you will have at the end
index.html: an accessible admission enquiry form that refuses empty fields, bad mobile numbers and emails before they are sent.
How it is marked (rubric, 100 points)
| Works and validatesEvery check passes; try the form in a browser with wrong data and see each message. | 45 |
|---|---|
| AccessibleEvery field has a label, the radios have a legend, the hint is linked, the button is a real button. | 30 |
| Semantic structureheader, nav, main and footer are used for what they mean. | 15 |
| Clear wordingLabels, hint and button text are short and say exactly what is wanted. | 10 |
0/5 steps done
Step 1 of 5
Labelled fields
The form (method post) has three inputs with ids name, mobile and email, of types text, tel and email, and each has a <label for> naming it.
Every input needs a <label>. Its for attribute must equal the input's id: then clicking the label puts the cursor in the field, and a screen reader says "Mobile number, edit text" instead of just "edit text". The name attribute is the key the server receives.
type="tel" opens the number pad on phones, and type="email" opens a keyboard with the @ sign. Forms that send personal data use method="post", so the data is not shown in the URL.
Run shows what your code prints. Check runs the step's tests. Ctrl+Enter checks too.