Form Tag Attributes in HTML: HTML फॉर्म टैग के विभिन्न ऐट्रिब्यूट्स

हेल्लो दोस्तों स्वागत है आपका हमारी एक और HTML Language कि फायदेमंद पोस्ट में | इस पोस्ट में Form Tag Attributes in HTML यानि कि HTML फॉर्म टैग के विभिन्न ऐट्रिब्यूट्स के बारे में बोहोत ही आसान तरीके से आपकी सरल भाषा हिन्दी में दर्शाया गया है |

Form Attributes in HTML

HTML Form Tag के विभिन्न Attributes

Form Attributes in HTML: दोस्तों HTML Form को बनाने के लिए हम विभिन्न प्रकार के tag का प्रयोग तो करते ही है साथ-ही-साथ हम उन टैग के साथ में बोहोत सारे attributes का भी प्रयोग करते है जिनकी मदद से हम यूजर से अपने अनुसार फॉर्म में डाटा को इनपुट करवा सकते है यानि कि हम फॉर्म में बोहोत सारी pre-defined conditions का प्रयोग attributes के रूप में कर सकते हैं।

दोस्तों इस पोस्ट में From Tag के विभिन्न प्रकार एट्रिब्यूट के बारे में उनके उदाहरण सहित बताया गया है जिसे पढ़करके आप बोहोत ही आसानी से Form Tag के सभी एट्रिब्यूट के बारे में आसानी से समझ सकते हैं।

1. Autocomplete Attribute

Autocomplete attribute in html: HTML में autocomplete attribute के द्वारा आप html form में किसी input type के लिए autocomplete feature को चालू तथा बंद कर सकते हैं।

HTML में autocomplete attribute का प्रयोग करने का फायदा यह होता है कि आप जब भी किसी form में कोई value को input करते हैं और अगर आप दोबारा से उसी form में अपनी values को input करते हैं तो आपने उस form में जो value पहले input की थी वह value आप‌को form में values दोबारा input करने पर भी दिखाई पड़ने लगती है और आप उसे select करके उस input box में भर सकते हैं।

HTML में autocomplete attribute को आप <FORM> tag के अन्दर define कर सकते है इससे आपके form में सभी input type में autocomplete feature लग जाता है और इसके अलावा आप किसी विशेष input type के साथ में भी autocomplete attribute को define कर सकते हैं।

Example: HTML में Form Tag में Autocomplete Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<form autocomplete="off">
Name: <input type="text" autocomplete="on">
<br>
Email: <input type="email">
<br>
Number: <input type="number">
<br>
<input type="submit" value="Submit">
</form>

2. Method Attributes

Method attribute in html: HTML में हम <FORM> tag के साथ में हम method attribute का use करते हैं। HTML form के method attribute में हम दो values, get तथा post को दे सकते हैं तथा HTML form में method की default value get होती है।

1) Get Method

Get method in html: HTML form में आगर आप get method का प्रयोग करते है तो form को submit करने के बाद में उस form में input किया गया data, browser के URL section में दिखाई पड़‌ने लगता है।

Get Method का प्रयोग करने पर हम form में केवल String values को ही store करा सकते। ऐसे form जिनका प्रयोग सिर्फ data search करने के लिए किया जाता है उस form में get method का प्रयोग होता है।

Example: HTML में Get Method का प्रयोग निम्न प्रकार से किया जाता है।

<form method="get">
Name: <input type="text">
<br>
Email: <input type="email">
<br>
Number: <input type="number">
<br>
<input type="submit" value="Submit">
</form>

2) Post Method

Post method in html: HTML form में post method का प्रयोग करके form को submit करने पर URL पर कोई भी effect नहीं पड़ता हैं और URL पहले जितना ही छोटा रहता है। अगर आप String के अलावा अन्य data को form में input करवाकर server पर store करवाना चाहते हैं तब आप post method का प्रयोग कर सकते हैं।

अगर आपके form में input fields की संख्या बोहोत ज्यादा हैं और आप pictures या videos को भी upload करना चाहते है तब आप post method का प्रयोग कर सकते हैं।

Example: HTML में Post Method का प्रयोग निम्न प्रकार से किया जाता है।

<form method="post">
Name: <input type="text">
<br>
Email: <input type="email">
<br>
Number: <input type="number">
<br>
<input type="submit" value="Submit">
</form>

3. Enctype Attribute

Enctype attribute in html: HTML form में enctype के द्वारा राह decide होता है कि form के data को कैसे encode किया जाना चाहिए। HTML form में enctype attribute का प्रयोग तभी किया जा सकता है जब आप post method का प्रयोग करते हैं। हम enctype attribute के द्वारा दो प्रकार की values को form में दे सकते हैं।

• Enctype text:अगर आपको HTML form के द्वारा केवल String type के data को store करवाना है तब हमें enctype attribute में text/plane value का प्रयोग करते हैं।

<form method="get" enctype="text/plane">
Name: <input type="text">
<br>
Email: <input type="email">
<br>
Number: <input type="number">
<br>
<input type="submit" value="Submit">
</form>

• Enctype multipart form data: अगर आपको HTML form के द्वारा multiple type के data (जैसे- text, files इत्यादि) को store करवाना है तब enctype attribute में multipart/form-data value का प्रयोग करते हैं।

<form method="post" enctype="multipart/form-data">
Name: <input type="text">
<br>
Email: <input type="email">
<br>
<input type="submit" value="Submit">
</form>

जब भी हमें HTML form में files को upload करना होता है तो हमें हमेशा method=”post” तथा enctype=”multipart/form-data” attributes का प्रयोग करना चाहिए।

4. Autofocus Attribute

Autofocus attribute in html: HTML Form में हम जिस भी input type के साथ में autofocus attribute का प्रयोग करते है तो form के open होते ही या form के refresh होने पर वह input type तथा उसकी field अपनेआप highlight हो जाती है और cursor automatic उसी input box में पहुँच जाता है।

आप जब भी HTML, form में autofocus attribute का प्रयोग करें तो आपको इस बात ध्यान रखना हैं कि आप form के केवल किसी एक input type के साथ में ही autofocus attribute का प्रयोग कर सकते हैं क्योंकि cursor automatic एक-साथ किन्ही दो blocks में नहीं’ पहुँच सकता है इसलिए आप जिस भी किसी एक के input type में autofocus attribute का प्रयोग करेंगे cursor automatic उसी input box में पहुँच जायेगा।

Example: HTML में Form Tag में Autofocus Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<form autocomplete="off">
Name: <input type="text" autofocus>
<br>
Email: <input type="email" autocomplete="on">
<br>
<input type="submit" value="Submit">
</form>

5. Min & Max Attributes

Min and max attributes in html: HTML form के input type=”number” के लिए minimum value को निर्धारित करने के लिए min attribute तथा maximum value का निर्धारित करने के लिए max attribute का प्रयोग किया जाता है।

Example: HTML में Form Tag में Min और Max Attributes का प्रयोग निम्न प्रकार से किया जाता है।

<form autocomplete="off">
Mobile Number: <input type="number" min="5" max="10">
</form>

अर्थात् कोई भी यूजर इस input box जोकि number type tका है, इसमें minimum नम्बर 5 तथा maximum नम्बर 10 को ही input कर सकता है और अन्य सभी number invalid होंगे।

6. Minlength & Maxlength Attributes

Minlength and maxlength in html: HTML form में minlength तथा maxlength attributes का प्रयोग form की input fields में यह निर्धारित करने के लिए किया जाता है कि यूजर minimum तथा maximum कितने characters को input कर सकता है।

Example: HTML में Form Tag में Minlength और Maxlength Attributes का प्रयोग निम्न प्रकार से किया जाता है।

<form>
Name: <input type="text" minlength="5" maxlength="10">
<br>
<input type="Submit" Value="Submit">
</form>

अर्थात् Name की input field में कोई भी यूजर 50 से कम तथा 10 से ज्यादा character को input नहीं कर सकता है।

7. Size Attribute

Size attribute in html: HTML में size attribute का प्रयोग HTML form में किसी input field के size को घटाने तथा बढ़ाने के लिए किया जाता है। जब भी हमें किसी input field में ज्यादा data input करवाना होता है तो data input करने पर कुछ data छिप जाता है इस स्थिति में हम input field के size को आसानी से input type के साथ में size attribute का प्रयोग करके बढ़ा सकते हैं।

Example: HTML में Form Tag में Size Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<form>
Name: <input type="text" size="20">
<br>
Mobile: <input type="number">
<br>
Email: <input type="email" size ="25">
<br>
<input type="submit" value="Submit">
</form>

8. Multiple Attribute

Multiple attribute in html: HTML में multiple attribute का प्रयोग हम HTML form में input type=”file” के साथ में तब करते हैं जब हमें एक से ज्यादा files को select करके upload करना होता है तथा multiple attribute का प्रयोग <SELECT> tag के साथ में तब करते हैं जब हमें multiple option को एक साथ में प्रदर्शित कराना होता है तथा इसकी मदद से हम एक से ज्यादा multiple options को एक साथ में भी select कर सकते हैं।

Example: HTML में Form Tag में Multiple Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<form>
Upload File: <input type="file" multiple>
<br>
<input type="submit" value="Submit">
</form>

<!-- OR -->
  
<select multiple>
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Fourth</option>
</select>

9. Readonly Attribute

Readonly attribute in html: HTML में जब HTML Form की किसी input field में कोई value default input करवानी हो जिसे कोई भी user न तो edit कर पाये और न ही change कर पाये तब हम उसके लिए readonly attribute का प्रयोग input type के साथ में करते हैं।

Example: HTML में Form Tag में ReadOnly Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<form>
Name: <input type="text" value="Shubham Pal" readonly>
<br>
Mobile: <input type="number">
<input type="submit" value="Submit">
</form>

10. Checked Attribute

Checked attribute in html: HTML form में जब हम किसी “checkbox” को webpage के load होते समय selected रखना चाहते हैं तब हम input type के साथ में checked attribute का प्रयोग करते हैं।

Example: HTML में Form Tag में Checked Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<input type="checkbox" checked>10th
<input type="checkbox">12th
<input type="checkbox" checked>B.Tech
<input type="checkbox">M.tech

11. Disabled Attribute

Disabled attribute in html: HTML में disabled attribute, readonly attribute की तरह ही काम करता है यानि कि disabled attribute का प्रयोग करने पर यूजर input field में कोई भी changes नहीं’ कर सकता है लेकिन disabled attribute वाली input field में डाली गयी default value server को नहीं भेजी जाती है।

बल्कि वह disable हो जाती हैं या फिर अगर आपको किसी dropdown list में किसी option को disable करना है तब भी आप disabled attribute का प्रयोग कर सकते हैं।

Example: HTML में Form Tag में Disabled Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<input type="text" disabled value="Shubham">

<!-- OR -->
  
<select>
<option>First</option>
<option>Second</option>
<option disabled>Third</option>
<option>Fourth</option>
<option>Fifth</option>
</select>

12. Selected Attribute

HTML option selected attribute: HTML में selected attribute का प्रयोग तब किया जाता है जब हमें HTML form में webpage के reload होते समय कई options में से किसी एक option को select हुआ दिखाना होता हैं।

अगर हम multiple attribute वाले options में selected attribute का प्रयोग करते हैं तो हम एक से ज्यादा options को एक साथ में webpage के reload होने पर select हुआ प्रदर्शित कर सकते हैं।

Example: HTML में Form Tag में Selected Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<select>
<option>First</option>
<option selected>Second</option>
<option>Third</option>
</select>

<!-- OR -->

<select multiple>
<option>First</option>
<option selected>Second</option>
<option>Third</option>
<option selected>Fourth</option>
<option>Fifth</option>
</select>

13. Name Attribute

Name attribute in html form: HTML में name attribute का प्रयोग HTML form में <INPUT> tag के साथ में किया जाता है। HTML में form में हम input fields की values को specific names से server पर store कराने के लिए हम name attribute का प्रयोग करते हैं।

हम HTML form में input type=”radio” के साथ में भी name attribute का प्रयोग इसलिए करते है जिससे कि कई सारे radio buttons में से केवल किसी एक radio button को ही select कर‌वाकर के server पर उनकी value को store कराया जा सके।

Example: HTML में Form Tag में Name Attribute का प्रयोग निम्न प्रकार से किया जाता है।

Name: <input type="text" name="Student Name">
<br>
Email: <input type="email" name="Student Mail">
<br>
Mobile: <input type="number" name="Student Mobile No.">

<!-- OR -->

Gender:<input type="radio" name="gender">Male
	   <input type="radio" name="gender">Female
	   <input type="radio" name="gender">Others

यहाँ पर Gender में तीनों input type के साथ में name attribute का प्रयोग किया गया है जिससे कोई भी user दिये गये Gender में से कोई एक Gender की ही select कर पायेग।

14. Value Attribute

Value attribute in html: HTML form में value attribute का प्रयोग किसी भी input field की default value को देने के लिए किया जाता है। जब भी आप HTML Form में <INPUT> tag के साथ में value attribute का प्रयोग करके input field की जो भी value देंगे वह value webpage के reload होने पर user के सामने उस input field में प्रदर्शित होती है, user चाहे तो उस value को change भी कर सकता है और अगर user value change नहीं करना चाहता है तो वह value सीधे server में store हो जाती है जब भी आप उस HTML की submit करते हैं।

Example: HTML में Form Tag में Value Attribute का प्रयोग निम्न प्रकार से किया जाता है।

Name: <input type="text" name="Student Name" value="Shubham Pal">
<br>
Number: <input type="number" value="12345678">
<br>
<input type="submit" value="Submit">

आप Submit या Reset buttons देने के लिए भी value attribute का प्रयोग कर सकते है लेकिन इस value को किसी भी user के द्वारा edit change बिलकुल भी नहीं किया जा सकता है।

15. Placeholder Attribute

Placeholder attribute in html: HTML में placeholder attribute का प्रयोग भी <INPUT> tag के साथ में किया जाता है। HTML form of input fields में user को input की जाने वाली values का hint देने के लिए हम placeholder attribute का प्रयोग करते है।

आप जब भी placeholder attribute का प्रयोग करके कोई भी value देते हैं तो वह value, form की input field में webpage के reload होने पर बोहोत का capacity में यूजर के सामने प्रदर्शित होती हैं और user जैसे ही input field में कुछ भी input करने के लिए click करता है वह value अपने आप ही गायब हो जाती है।

Example: HTML में Form Tag में Placeholder Attribute का प्रयोग निम्न प्रकार से किया जाता है।

Name: <input type="text" placeholder="Enter your name">
<br>
Number: <input type="number" placeholder="Enter mobile number">

16. Required Attribute

Required attribute in html: HTML form की अगर किसी input field को compulsory करना है यानि कि अगर उस input field को नहीं भरा जायगा तो form submit ही नहीं होगा, तब हम <INPUT> tag के साथ में required attribute का प्रयोग करते हैं।

अर्थात् हम <INPUT> tag के साथ में required attribute का प्रयोग करके user की यह बता सकते है कि इस input field में कुछ-न-कुछ value तो जरूर देनी पड़ेगी उसके बाद ही आप पूरे form को Submit कर पायेंगे।

Example: HTML में Form Tag में Required Attribute का प्रयोग निम्न प्रकार से किया जाता है।

Name: <input type="text" name="Student Name">
<br>
Number: <input type="number" name="Mobile No" required>

17. Pattern Attribute

Pattern attribute in html: HTML form में सीसी input type की value को यदि आप किसी pattern के द्वारा check कराना या user द्वारा input field में enter करवाना चाहते हैं, तब हम <INPUT> tag के साथ में pattern attribute का प्रयोग करते हैं।

हम pattern attribute के द्वारा regular expression को define कर सकते हैं जिसके आधार पर ही आप input field के द्वारा pattern को check कर सकते हैं।

Example: HTML में Form Tag में Pattern Attribute का प्रयोग निम्न प्रकार से किया जाता है।

Characters(0 to 6): <input type="text" pattern="[a-zA-Z0-9]{0,6}">
<br>
Only Numbers: <input type="text" pattern="^[0-9]*$">
<br>
Only alphabet(Small): <input type="text" pattern="^[a-z]*$">
<br>
Only alphabet(Capital): <input type="text" pattern="^[A-Z]*$">
<br>
Numbers and Alphabet: <input type="text" pattern="^[a-zA-Z0-9]*$">
<br>
<input type="submit" value="Submit">

यहाँ ऊपर दिए गए patterns में,

18. Accept Attribute

Aaccept attribute in input file: HTML form में specific files को upload करने के लिए हम accept attribute का use करते है।

<form method="post" enctype="multipart/form-data">
<input type="file" accept="image/*">
<br>
<input type="file" accept="audio/*">
<br>
<input type="file" accept="video/*">
</form>

आप Accept attribute की value में .mp3, .mp4 या .pdf जैसे execution names को भी दे सकते हैं।

<input type="file" accept=".mp3">
<input type="file" accept=".mp4">
<input type="file" accept=".png">
<input type="file" accept=".jpg">
<input type="file" accept=".pdf">

19. Tabindex Attribute

Tabindex in html: HTML में tabindex attribute का प्रयोग “Tab” button पर क्लिक करके webpage पर element को navigate करने के लिए किया जाता हैं। आप tabindex की value जितनी भी देंगे उतने बार “Tab” बटन दबाने पर आप उस element पर focus हो जायेंगे या माउस का cursor उस specific element पर focus हो जायेगा।

Example: HTML में Tabindex Attribute का प्रयोग निम्न प्रकार से किया जाता है।

Name: <input type="text" tabindex="1">
<br>
Father's Name: <input type="text" tabindex="3">
<br>
Mother's Name: <input type="text" tabindex="2">

यहाँ पर एक बार “Tab” बटन दबाने पर माउस का cursor, value 1 वाली field में जायेगा तथा दो बार “Tab” बटन दबाने पर माउस का cursor, value 2 वाले input field में focus होता है तथा तीन पर “Tab” बटन दबाने पर माउस का cursor, value 3 वाले input field में चला जाता हैं।

20. Translate Attribute

Translate attribute in html: अगर आप HTML webpage में किसी element of translation को on या off करना चाहते हैं तब आप translate attribute का प्रयोग कर सकते हैं।

Example: HTML में Translate Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<p translate="yes">shubhampal.co.in is a educational blog.</p>
<p translate="no">shubhampal.co.in is a hindi blog.</p>

21. Accesskey Attribute

Accesskey attribute in html: HTML में accesskey attribute का प्रयोग किसी भी element पर direct click करने के लिए shorcut key को set करने के लिए किया जाता हैं। आप accesskey attribute में जो भी key की value देंगे आपको webbage में उसी Key को alt button के साथ में press करना पड़ेगा और आप जैसे ही alt + key को press करेंगे, तो आपने जिसमें भी accesskey को सेट किया होगा, उस element पर direct click हो जायेगा ।

Example: HTML में Accesskey Attribute का प्रयोग निम्न प्रकार से किया जाता है।

Name: <input type="text" accerskey="m">
<br>
Father's Name: <input type = "text" accessKey="n">
<br>
Mother's Name: <input type = "text" accessKey="o">
<br>
Upload File: <input type="file" accesskey="p">

22. Hidden Attribute

Input type hidden in html: HTML में किसी भी element को webpage से hide करने के लिए hidden attribute का प्रयोग किया जाता है। इससे आप secretly data को server पर store करा सकते हैं।

Example: HTML में Hidden Attribute का प्रयोग निम्न प्रकार से किया जाता है।

<p hidden>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p hidden>This is third paragraph.</p>

निष्कर्ष – Form attributes in html

दोस्तों मैं उम्मीद करता हूँ कि मैंने इस पोस्ट के माध्यम से आपको Form Tag Attributes in HTML यानि कि HTML फॉर्म टैग के विभिन्न ऐट्रिब्यूट्स के बारे में बताया है उन्हें आप बोहोत ही आसानी से समझ गए होंगे गए होंगे क्यूंकि मैंने इस पोस्ट के माध्यम से आपको बोहोत ही आसानी से यह समझाने का पूर्णतः प्रयास किया है कि आप HTML फॉर्म टैग के विभिन्न ऐट्रिब्यूट्स का प्रयोग आसानी से कैसे कर सकते है।

पोस्ट को पूरा पढने के लिए धन्यवाद ! अगर आपका इस पोस्ट से सम्बन्धित कोई भी प्रश्न है तो आप नीचे कमेंट करके पूंछ सकते है |

यह भी पढ़ें –

Shubham Pal

Shubham Pal (शुभम पाल) एक Digital Creator है जिसका हिन्दी ब्लॉग shubhampal.co.in है | इस ब्लॉग पर आपको टेक्नोलॉजी और कंप्यूटर से सम्बंधित बोहत सारी चीजो के बारे में बोहोत ही सरल भाषा में सीखने को मिलता है इसके साथ-साथ हमारे इस हिंदी ब्लॉग पर आपको YouTube , Blogging , Affiliate Marketing और ऑनलाइन पैसा कमाने के बोहोत सारे तरीको के बारे में भी जानने और सीखने को मिलता है |

shubhampal.co.in/