Introduction
हेलो दोस्तों आज हम इस post में HTML के <label></label> tag के बारे में जानेगे की form tag में <label></label> tag का इस्तेमाल क्यों और कैसे कर सकते है!.
HTML label tag के बारे में!
HTML में <label></label> tag का इस्तेमाल form controls ‘input’, ‘seelect’, ‘textarea’ or ‘button’ element के लिए label define करने के लिए कर सकते है!. <label></label> tag form control की accessibility और usability को improve करने में मदद करता है!.
Syntax:
<label for="element_id">Label Text</label>
Attributes:
for: यह attribute specifies करती है, की label किस form element के लिए है, for attribute में हमें form element की “ID” attribute की value को set करना होता है!. जिससे जब आप <label></label> पर click करते है, तो यह related form element पर focus होता है!.
Example:
हमारे पास एक simple सा HTML form है, जिसमे हमने <label></label> tag का इस्तेमाल किया है!. आप form में देख सकते है!.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label Example</title>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<label for="male">Male</label>
<input type="radio" id="male" name="gender">
<label for="female">Female</label>
<input type="radio" id="female" name="gender">
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
आप ऊपर के example में देख सकते है, “<label></label>” elements का इस्तेमाल form elements fields के लिए label के तोर पर किया है!. और जिसमे हरेक ‘<label></label>’ element में “for” attribute में related input field की value को सेट किया है!. हमारे पास username की input field है, हमने <label></label> element में username field को define करे ऐसा username के लिए text रखा है, जिससे user को आसानी से पता चल सकता है, की यह field किस प्रयोजन से है!. और जब user उस <label></label> username <label></label> text पे click करता है तो username वाली input field focus होती है, जिससे user को और भी आसानी होती है form field को समजने में!.
form में <label> tag का इस्तेमाल न केवल accessibility improve करता है बल्कि users के लिए form elements को समजने में आसान बनता है।
सामान्य तोर पर कैसा रहता है की जब हम radio button पर click करते है, तो वह radio button checked होता है, लेकिन जब <label></label> tag का इस्तेमाल कर उसमे radio button “ID” value “for” attribute में set करते है तो जब हम उस label text पर click करते है तो उसके related radio button checked हो जाता है!.
