Labels & Fieldsets
<label for="id"> ko input ke id se link karna ZAROORI hai (accessibility ke liye) — screen readers is connection ko use karte hain batane ke liye "ye field kis cheez ke liye hai". Label par click karne se linked input automatically focus/select ho jaata hai — bahut common UX improvement (especially checkboxes/radio buttons ke liye).
<fieldset> related inputs ko visually aur semantically group karta hai (usually border ke saath), <legend> uska title deta hai — bade forms ko sections mein organize karne ke liye useful.
<fieldset>
<legend>Personal Information</legend>
<label for="name">Naam:</label>
<input type="text" id="name">
<label for="email">Email:</label>
<input type="email" id="email">
</fieldset>
<!-- Checkbox ke saath label click karna bahut common: -->
<input type="checkbox" id="newsletter">
<label for="newsletter">Newsletter subscribe karo</label>
<!-- "Newsletter subscribe karo" text par click karne se bhi checkbox toggle hoga -->- label for="id" = input se link, accessibility ke liye zaroori
- Label click = linked input focus/toggle (checkboxes ke liye handy)
- fieldset+legend = related fields ko group + title do
for/id explicit link ke alawa, label ke ANDAR input ko wrap karke bhi implicit association ban sakti hai — for attribute ki zaroorat nahi, lekin explicit approach usually clearer/preferred hai.
<!-- Implicit — input label ke andar hi hai: -->
<label>
Naam:
<input type="text" name="name">
</label>
<!-- Explicit (usually preferred, clearer): -->
<label for="name2">Naam:</label>
<input type="text" id="name2" name="name2">Jab ek input ke saath extra helper text ho (jaise "password kam se kam 8 characters ka ho"), aria-describedby se us text ko input se link kar sakte ho — screen readers dono ko saath mein announce karte hain.
<label for="pwd">Password:</label>
<input type="password" id="pwd" aria-describedby="pwd-hint">
<small id="pwd-hint">Kam se kam 8 characters, ek number ke saath</small>