✅ Practice + Quiz  ·  Lesson 40

Project: Registration Form

Project: Registration Form

What We Are Building

The final project: a complete student registration form that uses every form skill from the Forms cluster — text, email, tel, date, radio, checkbox, select, textarea, fieldset, and full HTML5 validation. This is the single most practically useful thing in HTML: admission forms, contact forms, sign-ups, surveys are all this same pattern. Master this one form and you can build any form.

Planning the Fields

FieldInput typeValidation
Full Nametextrequired, minlength
Emailemailrequired
Mobiletelrequired, pattern
Date of Birthdaterequired, min/max
Genderradiorequired
Classselectrequired
Subjectscheckboxchoose many
Addresstextarearequired

The Complete Form Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Registration Form</title>
</head>
<body>
<h1>Student Registration Form</h1>

<form action="register.php" method="post">

  <fieldset>
    <legend>Personal Details</legend>

    <label for="name">Full Name:</label>
    <input type="text" id="name" name="full_name" required minlength="3"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>

    <label for="mobile">Mobile:</label>
    <input type="tel" id="mobile" name="mobile"
           pattern="[6-9][0-9]{9}" title="10-digit mobile number" required><br><br>

    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob"
           min="2005-01-01" max="2016-12-31" required><br><br>

    <label>Gender:</label>
    <input type="radio" name="gender" value="male" required> Male
    <input type="radio" name="gender" value="female"> Female
    <input type="radio" name="gender" value="other"> Other<br><br>
  </fieldset>

  <fieldset>
    <legend>Academic Details</legend>

    <label for="class">Class:</label>
    <select id="class" name="class" required>
        <option value="">-- Select Class --</option>
        <option value="9">Class 9</option>
        <option value="10">Class 10</option>
        <option value="11">Class 11</option>
        <option value="12">Class 12</option>
    </select><br><br>

    <label>Subjects:</label>
    <input type="checkbox" name="subjects[]" value="maths"> Maths
    <input type="checkbox" name="subjects[]" value="science"> Science
    <input type="checkbox" name="subjects[]" value="english"> English<br><br>

    <label for="address">Address:</label><br>
    <textarea id="address" name="address" rows="3" cols="40"
              placeholder="House no, street, city, PIN" required></textarea><br><br>
  </fieldset>

  <button type="submit">Register</button>
  <button type="reset">Clear</button>

</form>
</body>
</html>

Walkthrough — every skill in action

  • Two fieldsets group personal and academic details with legends — clean, accessible structure for a long form.
  • Every input has a label with matching for/id — professional and accessible.
  • Right input types: email validates shape, tel triggers the number pad on mobile, date shows a calendar.
  • pattern on mobile: enforces a valid 10-digit Indian number.
  • Radios share name="gender" so only one is selectable; checkboxes use subjects[] so PHP receives them as an array.
  • select with empty first option + required forces a real choice.
  • textarea for the multi-line address; reset button clears the form.
  • action="register.php" method="post" — ready to be received by PHP, where you'll re-validate everything server-side.

Extend It (challenges before CSS)

✅ Add a "Photo" field (type="file") — remember the form needs enctype="multipart/form-data"
✅ Add a PIN code field with pattern="[0-9]{6}"
✅ Add a required "I agree to terms" checkbox
✅ Add a datalist of cities for a City field
✅ Validate the whole form at validator.w3.org

You've completed the HTML course! This form + the portfolio page are proof you can structure real, valid, accessible, SEO-ready web pages. Next stop: CSS — where these bare pages transform into beautiful, colourful, responsive designs. The structure you've mastered is the foundation everything else builds on. Well done!

हम क्या बना रहे हैं

अब तक सीखे सारे form elements को एक साथ लगाने का समय. हम Alpine Public School का एक Student Registration Form बनाएंगे — text input, email, number, date, radio buttons, checkbox, dropdown, textarea, और submit button, सब कुछ ठीक से label किया हुआ और grouped. यह असली, काम आने वाला form है. Code खुद type कीजिए, browser में खोलिए, और हर field भरकर देखिए — ऐसे ही यह याद रहेगा.

Fields की योजना

FieldHTML element
पूरा नामinput type="text"
Emailinput type="email"
Roll Numberinput type="number"
जन्म तिथिinput type="date"
Genderinput type="radio" (एक चुनिए)
Class<select> dropdown
पता<textarea>
शर्तें मंज़ूरinput type="checkbox"
Form बनाने से पहले हमेशा उसके fields की सूची बनाइए और सोचिए हर field के लिए कौन-सा input type सबसे सही है. सही type चुनने के दो बड़े फायदे हैं: mobile पर सही keyboard खुलता है (type="email" पर @ वाला keyboard, type="number" पर अंकों वाला), और browser मुफ्त में validation दे देता है. Radio जब सिर्फ एक विकल्प चुनना हो, checkbox जब हाँ/ना या कई विकल्प हों.

पूरा Form Code

<form action="/register" method="post">

  <fieldset>
    <legend>Student Details</legend>

    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required
           placeholder="Aman Kumar">

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="roll">Roll Number</label>
    <input type="number" id="roll" name="roll" min="1" max="9999">

    <label for="dob">Date of Birth</label>
    <input type="date" id="dob" name="dob">
  </fieldset>

  <fieldset>
    <legend>Gender</legend>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>

    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
  </fieldset>

  <label for="class">Class</label>
  <select id="class" name="class">
    <option value="">-- Select --</option>
    <option value="9">Class IX</option>
    <option value="10">Class X</option>
  </select>

  <label for="address">Address</label>
  <textarea id="address" name="address" rows="3"></textarea>

  <input type="checkbox" id="terms" name="terms" required>
  <label for="terms">I accept the terms</label>

  <button type="submit">Register</button>
</form>

Walkthrough

  • <fieldset> + <legend>: संबंधित fields को समूह में बाँधते हैं और screen reader को समूह का नाम बताते हैं.
  • हर <label for="x"> का x उसके input के id से मेल खाता है — label पर click करने से input select हो जाता है, और screen reader सही नाम पढ़ता है.
  • name attribute वह key है जो server तक जाती है. id label जोड़ने के लिए है, name data भेजने के लिए — दोनों अलग काम करते हैं.
  • Radio buttons का name एक जैसा (gender) होने से ही वे एक समूह बनते हैं और सिर्फ एक चुना जा सकता है. value बताता है क्या भेजा जाएगा.
  • required, min, max: browser की मुफ्त validation — बिना एक line JavaScript के.
  • <select> का पहला खाली option user को जानबूझकर चुनने पर मजबूर करता है.
ध्यान दीजिए — इस पूरे form में एक भी line JavaScript नहीं है, फिर भी यह fields validate करता है, mobile पर सही keyboard खोलता है, और accessible है. सही HTML लिखना ही आधा काम पूरा कर देता है.

इसे बढ़ाइए

इस form को अपना बनाने के लिए आज़माइए: (1) phone number field जोड़िए type="tel" और pattern="[0-9]{10}" के साथ. (2) Subjects के लिए कई checkboxes दीजिए (सबका name="subjects[]"). (3) Photo upload के लिए type="file" accept="image/*". (4) CSS से इसे सुंदर बनाइए — label को block बनाकर, inputs को पूरी चौड़ाई देकर. (5) बाद में JavaScript course में इसी form पर custom validation और error messages जोड़िएगा. असली सीखना बनाने से आता है — इसे बदलिए, तोड़िए, फिर ठीक कीजिए.
← Back to HTML Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.