Bootstrap Forms with Examples in Hindi

Bootstrap Forms

Forms का use website पर user से information collect करने के लिए किया जाता है। जैसे Login, Signup, Contact, Feedback, Search, Registration और किसी course या service के लिए details लेना आदि।

Bootstrap में forms को manually बहुत ज्यादा CSS लिखे बिना clean, responsive और professional बनाया जा सकता है। Bootstrap अलग-अलग form elements जैसे input, label, textarea, select, checkbox और radio button के लिए predefined classes provide करता है।

1. Basic Bootstrap Form

Basic form बनाने के लिए Bootstrap में सबसे commonly इस्तेमाल होने वाली classes .form-label और .form-control हैं।

.form-label label को proper spacing और styling देती है, जबकि .form-control input और textarea को Bootstrap का responsive form design देती है।

यहाँ mb-3 Bootstrap की margin-bottom utility है, जिससे form fields के बीच spacing आती है।

• .form-label: Form label को style करता है।
• .form-control: Input और textarea को Bootstrap styling देता है।
• .mb-3: नीचे की तरफ spacing देता है।
• .btn: Button की basic Bootstrap styling देता है।
• .btn-primary: Primary button style देता है।

2. Checkbox और Radio Button वाला Form

जब user से Yes/No, Remember Me, Gender या किसी option को select करवाना हो, तब checkbox और radio button का उपयोग किया जाता है। Bootstrap इन्हें style करने के लिए .form-check, .form-check-input और .form-check-label classes देता है।

Checkbox में user एक या एक से अधिक options select कर सकता है, जबकि radio buttons में सामान्यतः एक group से एक option select किया जाता है।

.form-check checkbox या radio button के container को structure और spacing देता है। .form-check-input actual checkbox/radio को style करता है और .form-check-label उसके label को style करता है।

3. Inline Form

कई बार हमें form के सभी elements को एक ही line में दिखाना होता है। उदाहरण के लिए search box और search button। Bootstrap में .d-flex class का उपयोग करके form elements को horizontally arrange किया जा सकता है।

.d-flex form को flexbox layout में बदलता है। .me-2 input और button के बीच थोड़ी right-side spacing देता है।

4. Select Dropdown वाला Form

जब user को कई options में से एक option चुनना हो, तब HTML के <select> element का उपयोग किया जाता है। Bootstrap में .form-select class लगाने से dropdown को responsive और styled appearance मिलता है।

.form-select dropdown को Bootstrap का consistent design देता है। इसमें <option> elements के अंदर अलग-अलग choices रखी जाती हैं।

5. Floating Label Form

Bootstrap का .form-floating form fields को एक modern floating-label design देता है। इसमें label शुरू में input के अंदर दिखाई देता है और user input field पर focus करने पर ऊपर की तरफ move होता है।

Floating labels form को compact और modern look देने के लिए useful हैं, खासकर login और signup forms में।

6. Disabled और Readonly Inputs

Bootstrap form में input को disabled या readonly बनाया जा सकता है। दोनों का purpose अलग होता है।

• Disabled: User input को select या edit नहीं कर सकता और field disabled state में दिखाई देती है।
• Readonly: User field की value देख सकता है लेकिन उसे edit नहीं कर सकता।

Bootstrap Form की Important Classes

Class	Use
.form-control	Input और textarea fields को style करने के लिए
.form-label	Form labels को style करने के लिए
.form-check	Checkbox और radio button के container के लिए
.form-check-input	Checkbox और radio input को style करने के लिए
.form-check-label	Checkbox और radio labels के लिए
.form-select	Select dropdown को style करने के लिए
.form-floating	Floating label form बनाने के लिए
.d-flex	Form elements को flex layout में arrange करने के लिए
.mb-3	Elements के नीचे spacing देने के लिए
.btn	Bootstrap button styling के लिए

Bootstrap Forms के फायदे

• Forms को जल्दी और आसानी से design किया जा सकता है।
• Form elements को responsive बनाने के लिए predefined classes मिलती हैं।
• Input, checkbox, radio और dropdown के लिए consistent styling मिलती है।
• कम custom CSS में professional-looking forms बनाए जा सकते हैं।
• Mobile और desktop दोनों screen sizes के लिए form design करना आसान होता है।
• Bootstrap utilities जैसे mb-3, me-2 और d-flex layout और spacing को आसान बनाते हैं।

Bootstrap Form बनाते समय Important Points

• हर important input के साथ proper <label> रखना अच्छा practice है।
• label के for attribute को संबंधित input के id से match करें।
• Radio buttons के एक group में same name रखने से सामान्यतः एक option select किया जाता है।
• Required fields के लिए HTML का required attribute इस्तेमाल किया जा सकता है।
• Form data को server पर भेजने के लिए action और method attributes का उपयोग किया जाता है।
• Sensitive information जैसे password को secure connection (HTTPS) के माध्यम से भेजना चाहिए।

In Short

• .form-control → Input और textarea fields के लिए
• .form-label → Labels के लिए
• .form-check → Checkbox और radio groups के लिए
• .form-check-input → Checkbox और radio inputs के लिए
• .form-select → Dropdowns के लिए
• .form-floating → Floating labels के लिए
• .d-flex → Form elements को horizontally arrange करने के लिए
• .mb-3 / .me-2 → Spacing के लिए

Conclusion: Bootstrap Forms का उपयोग करके आप login, signup, contact, feedback, search और registration जैसे forms को कम custom CSS के साथ responsive और clean बना सकते हैं। Bootstrap की form classes को समझ लेने के बाद अलग-अलग types के forms बनाना काफी आसान हो जाता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---