📖 Registration Form

🔷 PART 1: HTML की हर Line

Line 1: <!DOCTYPE html>

<!DOCTYPE html>

💡 क्यों ज़रूरी है? अगर यह न लिखें तो browser "quirks mode" में चलता है और CSS अलग तरह से render होती है।

Line 2: <html>

<html>

• html = root element — पूरे webpage का सबसे बड़ा container।
• इसके अंदर <head> और <body> दोनों आते हैं।

Line 3: <head>

<head>

• head = वह section जो user को दिखता नहीं, लेकिन browser को ज़रूरी जानकारी देता है।
• इसमें meta tags, title, CSS links आदि होते हैं।

Line 4: <meta charset="UTF-8">

<meta charset="UTF-8">

💡 क्यों ज़रूरी? अगर UTF-8 न हो, तो हिन्दी text √†¬§¬є√†¬§¬њ√†¬§¬®√†¬•√†¬§¬¶√†¬•вВђ जैसा दिखेगा।

Line 5: <meta name="viewport" ...>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

💡 क्यों ज़रूरी? इसके बिना mobile पर page बहुत छोटा दिखेगा।

Line 6: <title>Registration Form</title>

<title>Registration Form</title>

• Browser tab पर यह text दिखता है।
• SEO के लिए भी ज़रूरी है।

Line 7-9: <style> ... </style>

<style>
  /* CSS यहाँ लिखते हैं */
</style>

• <style> tag के अंदर CSS code लिखते हैं (internal CSS)।

🎨 PART 2: CSS की हर Line

Reset Section

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

box-sizing: border-box example: बिना border-box: width:200px + padding:20px = 240px total | border-box के साथ: width:200px + padding:20px = 200px total

Body Section

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

Form Box

.form-box {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  padding: 35px 30px;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

box-shadow breakdown:
0        15px      40px      rgba(0,0,0,0.25)
↑         ↑         ↑              ↑
X-offset Y-offset  Blur       Shadow का रंग
(0=सीधा)  (नीचे)   (धुंधलापन) (काला 25% opacity)

Heading

.form-box h2 {
  text-align: center;
  color: #333;
  margin-bottom: 25px;
  font-size: 26px;
  border-bottom: 3px solid #667eea;
  display: inline-block;
  padding-bottom: 8px;
}

Head Container

.head {
  text-align: center;
  margin-bottom: 20px;
}

• text-align: center → अंदर का content बीच में।
• margin-bottom: 20px → नीचे 20px जगह।

Form Group

.group {
  margin-bottom: 18px;
}

• margin-bottom: 18px → हर field के नीचे 18px की जगह।

Labels

.group label {
  display: block;
  margin-bottom: 7px;
  color: #313336;
  font-weight: 600;
  font-size: 15px;
}

font-weight values: 100-300 Light | 400 Normal | 500 Medium | 600 Semi-bold | 700 Bold

Input, Select, Textarea

.group input,
.group select,
.group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: 0.3s;
  background: #fafafa;
}

Focus State

.group input:focus,
.group select:focus,
.group textarea:focus {
  border-color: #667eea;
  background: #fff;
  box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
}

box-shadow breakdown: X=0, Y=0, Blur=8px, नीला 30% opacity — चारों तरफ़ फैलती है (glow effect)।

Textarea

.group textarea {
  resize: vertical;
  min-height: 80px;
}

• resize: vertical → सिर्फ ऊपर-नीचे resize कर सकते हैं (left-right नहीं)।
• min-height: 80px → कम से कम 80px ऊँचा।

Row (Radio / Checkbox)

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 5px;
}

Row Labels & Input

.row label {
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}
.row input {
  width: auto;
  cursor: pointer;
  accent-color: #667eea;
}

accent-color — modern browsers में radio/checkbox का default color बदल देता है।

Button Group & Styles

.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}
.btn {
  flex: 1;
  padding: 13px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}
.btn-submit {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
}
.btn-reset {
  background: #eee;
  color: #444;
}
.btn-reset:hover {
  background: #ddd;
}
.star { color: red; }

• flex: 1 → दोनों buttons बराबर width लें (50% - 50%)।
• translateY(-2px) → Negative value = ऊपर की तरफ।

📄 PART 3: HTML Body की हर Line

Form Container

<div class="form-box">

• div → Block container. class="form-box" → CSS से जोड़ता है।

Form Tag

<form action="#" method="post">

Text Input

<input type="text" id="name" name="name" placeholder="अपना नाम लिखें" required>

Email Input

<input type="email" ... required>

type="email" → Browser ख़ुद check करता है कि @ और . हैं।

Password Input

<input type="password" ... minlength="6" required>

• type="password" → Dots में दिखता है।
• minlength="6" → कम से कम 6 characters।

Phone Input

<input type="tel" ... pattern="[0-9]{10}">

• type="tel" → Mobile पर numeric keypad।
• pattern="[0-9]{10}" → सिर्फ 10 digits allowed।

Pattern breakdown: [0-9] = कोई भी digit 0 से 9, {10} = ठीक 10 बार

Date Input

<input type="date" id="dob" name="dob">

type="date" → Calendar picker।

Radio Buttons

<input type="radio" name="gender" value="male" checked>

Select Dropdown

<select id="city" name="city">
  <option value="">-- चुनें --</option>
  <option value="delhi">दिल्ली</option>
</select>

• <select> → Dropdown।
• <option> → हर choice।
• value="" → खाली value (default placeholder)।

File Upload

<input type="file" id="photo" name="photo" accept="image/*">

• type="file" → File chooser।
• accept="image/*" → सिर्फ images (image/png, image/jpeg आदि)।

Submit & Reset Buttons

<button type="submit" class="btn btn-submit">Submit</button>
<button type="reset" class="btn btn-reset">Reset</button>

🎯 Quick Summary & Practice

Common CSS Properties

Practice Task

हर change के बाद browser refresh करके देखें! 🔍

अगर किसी specific line पर और detail चाहिए, तो बताइए! 🚀