HTML5 Course in Roman Hindi/Urdu - Lecture 9: Advanced Forms aur SVG Graphics - Fully Detailed
HTML5 Advanced Forms Elements (progress, meter, output) - Har Element Ki Full Details
HTML5 advanced form controls UI elements add karte hain jaise progress bars, gauges, aur dynamic outputs. Yeh forms ko interactive banate hain bina JS ke basic functionality ke saath. Yeh input types extend karte hain, styling CSS se, aur values attributes se control.
Focus: Yeh elements semantic hain, accessibility ke liye aria-label add kar sakte ho.
progress Element - Progress Indicator
Purpose: Task completion show karna, jaise download progress (0-100%).
Attributes: max (default 1), value (current progress, 0-max ke beech). Indeterminate mode bina value ke (animated bar).
Kab use karein: File uploads, loading steps.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Example - Lecture 9</title>
</head>
<body>
<h1>Progress Bar Demo</h1>
<label for="download">Download Progress:</label>
<progress id="download" value="75" max="100">75% Complete</progress>
<p>Indeterminate: <progress></progress> (Loading...)</p>
</body>
</html>Value 75% dikhega, indeterminate animated bar. Fallback text andar (old browsers ke liye).
meter Element - Gauge/Scale Indicator
Purpose: Known range mein value show, jaise disk usage, ratings (scalar measurement).
Attributes: value (current), min (default 0), max (default 1), low/high/optimum (thresholds for colors).
Kab use karein: Scores, temperatures – progress se alag, known fraction nahi.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meter Example - Lecture 9</title>
</head>
<body>
<h1>Meter Gauge Demo</h1>
<label for="disk">Disk Usage:</label>
<meter id="disk" value="6" min="0" max="10" low="3" high="7" optimum="5">6/10 GB</meter>
<p>Rating: <meter value="4" min="0" max="5">4 out of 5</meter></p>
</body>
</html>Browser colors change karega low/high ke hisab se (red for high). Fallback text andar.
output Element - Calculation Results
Purpose: Form calculations ya outputs show, jaise calculator result. Semantic hai se better.
Attributes: for (input ids se link), name. Events: onforminput.
Kab use karein: Dynamic forms, jaise price calculator.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Output Example - Lecture 9</title>
</head>
<body>
<h1>Simple Calculator</h1>
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="10"> + <input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>
</form>
</body>
</html>Inputs change par auto-calculate hoga oninput event se. For attribute inputs link karta hai.
Tip: Progress/meter styling browser-specific, CSS ::-webkit-progress-bar use karo custom ke liye. Output JS-heavy hai, lekin HTML structure provide karta hai.
SVG Graphics - Vector Drawings
Purpose: Scalable vector graphics, shapes, paths, animations. Canvas se alag, XML-based, semantic aur searchable.
Integration: <svg> inline ya <img src="file.svg">. ViewBox for scaling.
Attributes: width/height, viewBox="0 0 width height" (coordinate system).
Kab use karein: Icons, charts, logos – responsive bina quality loss.
Basic SVG Structure aur Shapes
Elements: <circle>, <rect>, <line>, <path> (d="M x y L x y").
Styling: fill (color), stroke (border), stroke-width.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Basic - Lecture 9</title>
</head>
<body>
<h1>SVG Shapes Demo</h1>
<svg width="200" height="200" viewBox="0 0 200 200">
<!-- Rectangle -->
<rect x="10" y="10" width="100" height="50" fill="lightblue" stroke="black" stroke-width="2"/>
<!-- Circle -->
<circle cx="150" cy="60" r="40" fill="lightgreen" stroke="darkgreen"/>
<!-- Line -->
<line x1="10" y1="100" x2="190" y2="100" stroke="red" stroke-width="3"/>
<!-- Text -->
<text x="50" y="150" fill="blue" font-size="16">SVG Text</text>
</svg>
</body>
</html>Shapes draw honge, viewBox scaling allow karega. Self-closing tags.
Advanced SVG Features
Paths: d attribute curves ke liye (M move, L line, C curve, Z close).
Groups: <g> elements group, transform="translate(x,y) rotate(deg)".
Defs aur Use: Reusable shapes, <defs> define, <use> reference.
Animations: <animate> attribute change (SMIL, lekin CSS/JS better ab).
<svg width="300" height="100" viewBox="0 0 300 100">
<defs>
<circle id="myCircle" cx="50" cy="50" r="40" fill="orange"/>
</defs>
<use href="#myCircle" transform="translate(100,0)"/>
<path d="M 10 80 Q 95 10 180 80 T 260 80" stroke="purple" fill="none" stroke-width="5"/>
<g transform="rotate(45 150 75)">
<rect x="140" y="65" width="40" height="20" fill="yellow"/>
</g>
</svg>Path quadratic curve banayega, use reuse karega, g rotate karega group ko.
Tip: SVG accessible (title/desc add), SEO friendly (text searchable). External SVG file mein ya
Practice Tasks (Detailed with Steps)
- Progress/Meter Practice: "progress-meter.html" banao. Progress bar upload ke liye (value=50), meter rating ke liye (low/high set). Labels add karo.
- Output Practice: "output-calc.html" mein form banao multiplication ke liye, output element result show kare oninput se.
- SVG Basic Practice: "svg-shapes.html" mein svg banao circle, rect, line ke saath. Colors aur stroke daalo.
- SVG Advanced Practice: "svg-path.html" mein path draw karo simple icon (jaise arrow), defs/use se duplicate banao.
- Combined: Ek form banao meter/progress ke saath (jaise quiz score), SVG chart add karo results ke liye. 35 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Progress vs meter difference?
- A: Progress unknown total (loading), meter known range (gauge like 70% battery).
- Q: Output without JS?
- A: Basic oninput works, lekin complex calc JS ch
