HTML Form Elements वे tags होते हैं जिनकी मदद से user से different types का input लिया जाता है।
ये elements <form> tag के अंदर use किए जाते हैं और data collect करने का काम करते हैं।
Forms इन्हीं elements की वजह से interactive बनते हैं।
input Element
<input> सबसे ज़्यादा use होने वाला form element है।
यह single-line input के लिए use होता है।
<input type="text">
input के Common Types
Text input
<input type="text">
Password input
<input type="password">
Email input
<input type="email">
Number input
<input type="number">
Date input
<input type="date">
File input
<input type="file">
Hidden input
<input type="hidden">
Radio Button
Radio button में user सिर्फ एक option select कर सकता है।
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
Same name attribute radio buttons को group करता है।
Checkbox
Checkbox में multiple options select किए जा सकते हैं।
<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JavaScript
label Element
<label> input element का description देता है और accessibility improve करता है।
<label for="email">Email</label>
<input type="email" id="email">
Label पर click करने से input focus हो जाता है।
textarea Element
<textarea> multi-line text input के लिए use होता है।
<textarea rows="4" cols="40"></textarea>
यह comments, feedback और messages के लिए useful है।
select Element
<select> dropdown list बनाने के लिए use होता है।
<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
option Element
<option> dropdown के individual items define करता है।
<option value="in">India</option>
optgroup Element
<optgroup> options को group करने के लिए use होता है।
<select>
<optgroup label="Asia">
<option>India</option>
<option>Japan</option>
</optgroup>
<optgroup label="Europe">
<option>UK</option>
<option>France</option>
</optgroup>
</select>
button Element
<button> clickable button बनाने के लिए use होता है।
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>
fieldset Element
<fieldset> related form elements को group करता है।
<fieldset>
<legend>User Info</legend>
<input type="text">
</fieldset>
legend Element
<legend> fieldset का title define करता है।
<legend>Personal Details</legend>
datalist Element
<datalist> input के लिए predefined suggestions देता है।
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>
output Element
<output> calculation या result show करने के लिए use होता है।
<output>Total: 100</output>
progress Element
<progress> task की progress दिखाने के लिए use होता है।
<progress value="70" max="100"></progress>
meter Element
<meter> measurement या range value दिखाने के लिए use होता है।
<meter value="0.7"></meter>
HTML Form Elements और Accessibility
Labels का सही use करें
Fieldset और legend related inputs के लिए helpful होते हैं
Input types सही चुनें
Placeholder को label का replacement न बनाएं
HTML Form Elements Summary
Form elements user से data collect करते हैंinput, textarea, select, button core elements हैं
HTML5 ने नए powerful form elements introduce किए हैं
Accessibility के लिए semantic usage ज़रूरी है