HTML फ़ॉर्म एलिमेंट्स
In this page:
<input type="type" name="name">
<select name="name">
<option value="value">Label</option>
</select>
<textarea name="name" rows="number" cols="number"></textarea>
<button type="submit">Label</button>बहुमुखी Input एलिमेंट
input टैग सबसे सामान्य form एलिमेंट है। इसके type attribute को बदलकर, यह अलग-अलग तरह का यूज़र डेटा इकट्ठा करने के लिए text fields, checkboxes, या file uploaders में बदल सकता है।
- अपने inputs पर हमेशा एक name attribute तय करें, क्योंकि यही वह key है जिसका उपयोग डेटा को सर्वर पर भेजने में किया जाता है।
- Accepted attributes:
- type — text | password | email | number | date | checkbox | radio | file | submit | range | color ...
- name — key used when submitting
- value — initial value
- placeholder — hint text
- required / disabled / readonly — booleans
- autocomplete — on | off
उदाहरण: The Versatile Input Element
<input type="text" name="username">
<input type="checkbox" name="agree">
<input type="file" name="upload">Label एलिमेंट
label एलिमेंट एक input फील्ड के लिए स्पष्ट टेक्स्ट लेबल देता है। अपने labels को inputs से लिंक करना वेब accessibility के लिए ज़रूरी है और छोटे inputs (जैसे checkboxes) को क्लिक करना काफी आसान बना देता है।
- किसी label को input से लिंक करने के लिए label के for attribute को input के id attribute से मैच कराएं।
- Accepted attributes:
- for — id of the associated form control
- Alternative: nest the control inside the label
उदाहरण: The Label Element
<label for="agree">I agree to the terms</label>
<input type="checkbox" id="agree">select और option के साथ Dropdown Selections
select एलिमेंट एक साफ-सुथरा, कॉम्पैक्ट dropdown मेनू बनाता है। यह कई option टैग्स को एक साथ ग्रुप करता है, जिससे यूज़र अपने पेज लेआउट को गन्दा किए बिना किसी लिस्ट से एक वैल्यू चुन सकते हैं।
- यूज़र को यह गाइड करने के लिए कि उन्हें क्या चुनना है, 'disabled selected' के साथ एक placeholder ऑप्शन जोड़ें।
- Accepted attributes:
- select multiple — boolean
- select size — number of visible rows
- select name / required / disabled
- option value — submitted value
- option selected — boolean
- option disabled — boolean
- optgroup label — group name
उदाहरण: Dropdown Selections with select and option
<select name="size">
<option value="s">Small</option>
<option value="m">Medium</option>
</select>textarea के साथ Multi-Line Text
जब आपको एक लाइन से ज़्यादा टेक्स्ट चाहिए (जैसे यूज़र फीडबैक या विश्लेषण के लिए पैराग्राफ), तो textarea एलिमेंट आपका सबसे अच्छा विकल्प है। standard inputs के उलट, यह टेक्स्ट की कई लाइनें रख सकता है और डिफ़ॉल्ट रूप से resizable होता है।
- अपने textarea के शुरुआती डिस्प्ले साइज़ को तय करने के लिए rows और cols attributes का उपयोग करें।
- Accepted attributes:
- rows — visible lines (integer)
- cols — visible character width (integer)
- name / placeholder / required / readonly / disabled
- maxlength / minlength — integer
- wrap — soft | hard | off
उदाहरण: Multi-Line Text with textarea
<textarea name="feedback" rows="4" cols="30"></textarea>button एलिमेंट
button टैग का उपयोग फॉर्म डेटा सबमिट करने या आपके पेज पर एक्शन ट्रिगर करने के लिए किया जाता है। इसके type attribute को submit सेट करने पर, यह ब्राउज़र को निर्देश देता है कि वह सारे फॉर्म डेटा को पैकेज करके आपके सर्वर पर भेज दे।
- डेटा सबमिट करने की बजाय कस्टम JavaScript एक्शन ट्रिगर करने वाले बटन के लिए type="button" का उपयोग करें।
- Accepted attributes:
- type — submit | reset | button
- name / value
- disabled — boolean
- form — id of associated form
उदाहरण: The button Element
<button type="submit">Send</button>
<button type="button">Run Script</button>- textarea elements पर ज़रूरी closing tag शामिल करना भूल जाना।
- अपने input elements पर name attribute छोड़ देना, जो data को server तक transmit होने से रोकता है।
- button tags पर explicit type attributes छोड़ देना, जिससे unexpected form submissions होते हैं।
- Form elements (जैसे inputs, selects, और textareas) वे interactive fields हैं जो user data इकट्ठा करते हैं।
- अपने forms को accessible रखने के लिए हमेशा label tags को अपने inputs से link करें।
- single-line data के लिए versatile input tag, dropdown menus के लिए select, multi-line inputs के लिए textarea, और अपने forms submit करने के लिए button इस्तेमाल करें।
standard HTML form elements सभी modern और legacy web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: