HTML5 Course in Roman Hindi/Urdu - Lecture 6: Advanced Forms aur Advanced Lists - Fully Detailed
Advanced Forms Elements (select, textarea, datalist, validation) - Har Element Ki Full Details
HTML5 advanced forms user experience badhaate hain with better inputs aur built-in validation. Yeh Lecture 4 ke basic forms ko extend karta hai. Focus on dropdowns, multi-line text, auto-complete, aur client-side validation bina JS ke.
Key Enhancement: Form attributes jaise novalidate (validation off), aur input ke liye minlength/maxlength.
select aur option Elements - Dropdown Menus
Purpose: Pre-defined options choose karne ke liye, space save karta hai long lists ke liye.
Attributes: name (submit ke liye), multiple (multi-select, size attribute ke saath), required.
<optgroup>: Options ko groups mein baanto, label attribute.
Kab use karein: Countries, sizes jaise lists.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select Example - Lecture 6</title>
</head>
<body>
<form>
<label for="country">Country:</label>
<select id="country" name="country" required multiple size="3">
<optgroup label="Asia">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
</optgroup>
<optgroup label="Europe">
<option value="france">France</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Multiple select allow karega, optgroup grouped dikhega. Default selected ke liye selected attribute.
textarea Element - Multi-Line Input
Purpose: Long text input, jaise comments, messages.
Attributes: rows (height), cols (width), placeholder, maxlength, required, wrap ("soft/hard" for line wrapping).
Kab use karein: Feedback forms, bio.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Example - Lecture 6</title>
</head>
<body>
<form>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Yahan apna message likhein..." maxlength="500" required wrap="soft"></textarea>
<br><br>
<input type="submit" value="Send">
</form>
</body>
</html>5 rows high box banega, placeholder hint dega, maxlength limit karega chars.
datalist Element - Auto-Complete Suggestions
Purpose: Input ke liye suggestions dropdown, jaise search auto-fill.
Attributes: list (datalist id se link), options <option> mein.
Kab use karein: Names, tags jaise pre-filled lists.
<label for="fruit">Favorite Fruit:</label>
<input type="text" id="fruit" name="fruit" list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>Typing par suggestions dikhega, lekin free text allow karega.
Form Validation - Built-In aur Attributes
Purpose: Client-side checks bina JS ke, jaise required, pattern.
Attributes: min/max (number/date), minlength/maxlength (text), pattern (regex), step (number increments).
novalidate form par: Validation off (testing ke liye).
Custom Messages: HTML5 pseudo-classes :valid/:invalid CSS se style, JS se setCustomValidity().
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation Example - Lecture 6</title>
</head>
<body>
<form novalidate> <!-- Validation off for demo -->
<label for="age">Age (18-65):</label>
<input type="number" id="age" name="age" min="18" max="65" step="1" required>
<br><br>
<label for="phone">Phone (10 digits):</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" maxlength="10" required title="Exactly 10 digits">
<br><br>
<input type="submit" value="Validate">
</form>
</body>
</html>Submit par browser error dikhaayega invalid par. Title attribute error message customize karta hai.
Tip: Server-side validation bhi karo, client-side sirf UX ke liye.
Advanced Lists (dl, Nested Lists, etc.) - Har Type Ki Full Details
Lists data ko organize karte hain. Advanced mein description lists (dl) aur deeper nesting. Yeh key-value pairs ya hierarchical info ke liye.
dl, dt, dd Elements - Description Lists
Purpose: Term aur definition pairs, jaise glossary, metadata.
Elements: <dl> container, <dt> term (bold), <dd> description (indented).
Attributes: Global. Multiple dd per dt allowed.
Kab use karein: FAQs, product specs.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DL Example - Lecture 6</title>
</head>
<body>
<dl id="glossary">
<dt>HTML5</dt>
<dd>HyperText Markup Language version 5.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets for styling.</dd>
<dd>Used with HTML.</dd> <!-- Multiple dd -->
</dl>
</body>
</html>Dt bold term, dd description indented dikhega.
Nested Lists - Deeper Hierarchy
Purpose: Multi-level organization, jaise menu trees.
Kaise: Ul/ol/li ke andar doosra ul/ol daalo, unlimited depth (lekin 4-5 tak readability).
Attributes: Same as basic lists, type/start per level.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Lists Advanced - Lecture 6</title>
</head>
<body>
<h1>Course Outline</h1>
<ol>
<li>Basics
<ul>
<li>Lecture 1: Intro</li>
<li>Lecture 2: Tags</li>
</ul>
</li>
<li>Advanced
<ol type="a">
<li>Lecture 5: Semantics
<ul>
<li>Header</li>
<li>Footer</li>
</ul>
</li>
</ol>
</li>
</ol>
</body>
</html>Mixed nesting (ol > ul > ol > ul) hierarchy banayega.
Tip: Accessibility ke liye aria-label add karo complex nests par.
Practice Tasks (Detailed with Steps)
- Advanced Forms Practice: "advanced-forms.html" banao. Select with optgroup, textarea with maxlength, datalist for suggestions. Required aur pattern add karo ek input par.
- Validation Practice: "validation-detail.html" mein form banao number (min/max/step), tel (pattern), aur submit. Novalidate toggle karo test ke liye.
- Lists Advanced Practice: "lists-advanced.html" mein dl banao 5 terms ki (HTML glossary), aur nested ol/ul 3 levels deep (family tree jaise).
- Combined: Ek FAQ page banao dl ke saath, form add karo query submit ke liye (textarea, select). Validation enable karo. 35 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Select multiple kaise style karein?
- A: Size attribute height deta hai, CSS se width. JS se dynamic options.
- Q: Textarea wrap kya karta?
- A: Soft (visual wrap, submit mein preserve nahi), Hard (submit mein \n add).
- Q: Pattern regex ka example?
- A: Email: ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$, title mein explain.
- Q: Dl vs table kab?
- A: Dl terms-definitions ke liye, table grid data ke liye.
Next Lecture Teaser
Lecture 7: HTML5 Global Attributes (id, class, data-*) aur Meta Elements (og, twitter cards) – Universal features aur social sharing.
Yeh lecture complete. Ab aap advanced forms aur lists master kar chuke ho.
