HTML5 Course in Roman Hindi/Urdu - Lecture 4: Tables aur Basic Forms - Fully Detailed
Tables Tags (table, tr, th, td, caption, etc.) - Har Element Ki Full Details
HTML5 mein tables structured data (jaise spreadsheets) ko display karne ke liye use hote hain. Yeh <table> container hai, andar rows (<tr>) aur cells (<td> ya <th>). HTML5 mein accessibility improvements hain jaise scope attributes aur better semantics.
Warning: Tables layout ke liye mat use karo – CSS Grid/Flexbox better hai. Sirf tabular data ke liye.
Basic Table Structure
Purpose: Rows aur columns banane ke liye.
Core Elements:
<table>: Main container, attributes jaise border (deprecated), id/class.<tr>: Table row, self-closing nahi, andar th/td.<th>: Header cell, bold aur centered default. Scope="col/row" for accessibility.<td>: Data cell, normal text.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Table - Lecture 4</title>
</head>
<body>
<table id="simple-table">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>25</td>
</tr>
</table>
</body>
</html>Yeh simple 2x2 table banayega. Browser mein borders default nahi, CSS add karo.
Advanced Table Elements
<caption>: Table ka title, <table> ke andar pehle. Align="top/bottom" (deprecated).
<thead>, <tbody>, <tfoot>: Sections – headers, body, footer. Scrolling ke liye useful.
<colgroup> aur <col>: Columns group aur span ke liye.
Attributes:
rowspan,colspan: Cells merge, jaiserowspan="2".scope: "row/col" – screen readers ke liye.headers: Td ko th se link, jaise headers="name-col".summary: Deprecated, aria-describedby use.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Table - Lecture 4</title>
</head>
<body>
<table>
<caption>Student Marks Table</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Maths</th>
<th scope="col">Science</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ali</th>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td colspan="2">Total Average</td>
<td>87.5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">End of Table</td>
</tr>
</tfoot>
</table>
</body>
</html>Caption top mein dikhega, sections organized honge, colspan merge karega.
Tip: Responsive tables ke liye CSS media queries use karo, ya overflow-x: auto.
Basic Forms Tags (form, input, label, etc.) - Har Element Ki Full Details
HTML5 forms user input collect karte hain, jaise login, search. <form> container hai, andar inputs. HTML5 mein naye input types (email, date) aur validation built-in hai (required, pattern).
Basic Form Structure
Purpose: Data submit karne ke liye.
Core Elements:
<form>: Main tag, attributes: action (submit URL, default same page), method ("get/post"), enctype (file upload ke liye "multipart/form-data").<input>: Versatile, type="text/email/password/etc.", self-closing.<label>: Input ke liye text, for="id" se link. Accessibility ke liye must.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Form - Lecture 4</title>
</head>
<body>
<form action="/submit" method="post">
<label for="name">Naam:</label>
<input type="text" id="name" name="name" required>
<br><br>
<input type="submit" value="Bhejein">
</form>
</body>
</html>Form submit par data action URL par jaayega. Required field empty nahi hone dega.
Input Types aur Attributes
HTML5 ke naye types: text (default), password, email (validation), number (min/max), date, range (slider), file, checkbox, radio, submit, button.
Common Attributes:
name: Server ko data identify, must for submit.id: Label/CSS/JS ke liye unique.value: Default text ya button label.placeholder: Hint text, grey mein dikhta hai.required: Mandatory field.pattern: Regex validation, jaise pattern="[A-Za-z]{3,}" for 3+ letters.disabled: Input grey-out, submit nahi.autocomplete: "on/off", browser suggestions.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Types Detailed - Lecture 4</title>
</head>
<body>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@email.com" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<br><br>
<label>Hobby:</label>
<input type="checkbox" id="reading" name="hobby" value="reading"> Reading<br>
<input type="radio" id="male" name="gender" value="male"> Male<br>
<input type="range" id="age" name="age" min="18" max="65" value="30">
<br><br>
<input type="date" id="dob" name="dob">
<input type="file" id="upload" name="file">
<br><br>
<input type="submit" value="Submit Form">
<input type="reset" value="Clear">
</form>
</body>
</html>Email validate hoga, checkbox multiple select, radio single, range slider dikhega.
Other Form Elements
<select> aur <option>: Dropdown, multiple="multiple" for multi-select.
<textarea>: Multi-line text, rows/cols attributes.
<button>: Custom button, type="submit/button/reset".
<fieldset> aur <legend>: Groups, caption ke liye.
<form>
<fieldset>
<legend>Personal Info</legend>
<select id="country" name="country">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
</select>
<br><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Yahan likhein..."></textarea>
<br><br>
<button type="submit">Bhejein</button>
</form>Select dropdown, textarea big box, fieldset grouped hoga.
Validation Tip: HTML5 browser auto-validate karta hai (email format, required). JS se custom karo.
Practice Tasks (Detailed with Steps)
- Tables Practice: "tables-detail.html" banao. Ek 5x3 table banao student data ki (thead, tbody, caption). Colspan/rowspan use karo ek cell mein. Scope attributes add karo.
- Forms Basic Practice: "forms-basic.html" mein simple form banao (text, email, submit). Required aur placeholder daalo. Browser test: Empty submit try karo (validation dikhe).
- Advanced Forms Practice: "forms-advanced.html" mein inputs add karo: Checkbox group, radio buttons, date, file, textarea. Fieldset use karo sections ke liye.
- Combined: Ek registration form banao table ke saath (jaise data preview). Action="#" set karo local test ke liye. 30 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Table mein borders kaise add karein?
- A: Inline style="border:1px solid black;" ya external CSS. HTML attributes deprecated.
- Q: Form method get vs post?
- A: Get URL mein visible (search ke liye), Post secure/hidden (login ke liye).
- Q: Input type="email" ka validation?
- A: Browser auto-check karta hai @ aur domain. Pattern se custom regex.
- Q: Multiple checkboxes kaise handle?
- A: Same name attribute, array ban jaayega submit par.
Next Lecture Teaser
Lecture 5: Semantic HTML5 Elements (header, nav, section, article, footer) aur Multimedia (audio, video) – Meaningful structure aur embeds.
Yeh lecture complete. Ab aap tables aur forms master kar chuke ho.
