टेक्स्ट बॉक्स, या इनपुट फ़ील्ड, मौलिक UI तत्व हैं। जबकि HTML मूल बातें प्रदान करता है, JavaScript गतिशील नियंत्रण और हेरफेर को सशक्त बनाता है। यह लेख HTML और JavaScript दोनों का उपयोग करके टेक्स्ट बॉक्स बनाना और प्रबंधित करना दर्शाता है, जिसमें एकल, बहु और गतिशील रूप से उत्पन्न टेक्स्ट बॉक्स शामिल हैं।
विषयवस्तु की तालिका
- HTML का उपयोग करके टेक्स्ट बॉक्स बनाना
- JavaScript का उपयोग करके टेक्स्ट बॉक्स बनाना
- JavaScript का उपयोग करके एकाधिक टेक्स्ट बॉक्स बनाना
- टेक्स्ट बॉक्स को स्टाइल करना
- निष्कर्ष
HTML का उपयोग करके टेक्स्ट बॉक्स बनाना
सबसे सरल तरीका सीधे आपके HTML के भीतर है। यह स्थिर टेक्स्ट बॉक्स के लिए उपयुक्त है।
<input type="text" id="myTextBox" placeholder="यहाँ पाठ दर्ज करें">
यह “myTextBox” ID और एक प्लेसहोल्डर के साथ एक टेक्स्ट बॉक्स बनाता है। type="text" इसे टेक्स्ट इनपुट के रूप में निर्दिष्ट करता है।
JavaScript का उपयोग करके टेक्स्ट बॉक्स बनाना
JavaScript गतिशील निर्माण प्रदान करता है, जो रनटाइम-निर्धारित संख्या में टेक्स्ट बॉक्स या गतिशील हेरफेर के लिए आदर्श है।
function createTextBox() {
const textBox = document.createElement("input");
textBox.type = "text";
textBox.id = "dynamicTextBox";
textBox.placeholder = "यहाँ गतिशील पाठ दर्ज करें";
document.body.appendChild(textBox);
}
createTextBox();
document.createElement("input") तत्व बनाता है। हम गुण सेट करते हैं और इसे दस्तावेज़ बॉडी में जोड़ते हैं।
JavaScript का उपयोग करके एकाधिक टेक्स्ट बॉक्स बनाना
पिछले उदाहरण का विस्तार करते हुए, हम कई टेक्स्ट बॉक्स बना सकते हैं। यह चर फ़ील्ड या गतिशील UI वाले फ़ॉर्म के लिए उपयोगी है।
function createMultipleTextBoxes(numTextBoxes) {
const container = document.createElement('div'); // बेहतर संगठन के लिए एक कंटेनर बनाएँ
for (let i = 0; i < numTextBoxes; i++) {
const textBox = document.createElement("input");
textBox.type = "text";
textBox.id = `dynamicTextBox${i}`;
textBox.placeholder = `टेक्स्ट बॉक्स ${i + 1}`;
container.appendChild(textBox);
container.appendChild(document.createElement('br'));
}
document.body.appendChild(container);
}
createMultipleTextBoxes(3);
एक for लूप कई टेक्स्ट बॉक्स उत्पन्न करता है। बेहतर संरचना और स्टाइलिंग के लिए एक कंटेनर div का उपयोग किया जाता है।
टेक्स्ट बॉक्स को स्टाइल करना
आप CSS का उपयोग करके टेक्स्ट बॉक्स को स्टाइल कर सकते हैं। यहाँ कुछ उदाहरण दिए गए हैं:
input[type="text"] {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
यह CSS सभी टेक्स्ट बॉक्स में चौड़ाई, पैडिंग, बॉर्डर और गोल कोनों को जोड़ता है।
निष्कर्ष
JavaScript टेक्स्ट बॉक्स पर शक्तिशाली नियंत्रण प्रदान करता है, जिससे गतिशील और उत्तरदायी वेब एप्लिकेशन सक्षम होते हैं। स्टाइलिंग के लिए CSS के साथ इसे मिलाकर उपयोगकर्ता के अनुकूल इंटरफेस बनाएँ। फ़ॉर्म डिज़ाइन करते समय पहुँच योग्यता सर्वोत्तम अभ्यासों को याद रखें।