Gathering User Information with the Input Box in Hindi
Makhanlal Chaturvedi University / BCA / VBA programming
Input Box User Interaction Explained in Hindi
Gathering User Information with the Input Box in Hindi
Introduction
Input Box एक बहुत ही आसान और उपयोगी तरीका है जिससे हम किसी भी user से information प्राप्त कर सकते हैं। जब हमें किसी उपयोगकर्ता से कोई जानकारी लेनी होती है जैसे उसका नाम, उम्र, पसंद आदि, तो हम input box का उपयोग करते हैं। यह तरीका आमतौर पर forms, popup boxes या direct webpage पर input field के माध्यम से किया जाता है। यह interaction user और application के बीच communication को आसान बनाता है।
What is an Input Box?
Input Box एक ऐसा field होता है जहाँ user keyboard की सहायता से data enter करता है। यह input कई प्रकार का हो सकता है जैसे – text, number, email, password, आदि। HTML में input box को <input> टैग के माध्यम से बनाया जाता है।
HTML में Basic Input Box बनाना
सबसे आसान input box बनाने का तरीका नीचे दिया गया है:
<input type="text" placeholder="अपना नाम दर्ज करें">
इस कोड में:
- type="text" का मतलब है कि यह एक text input field है।
- placeholder एक ऐसा text होता है जो field खाली होने पर दिखाई देता है और user को guide करता है।
Using Input Box to Get User Data in Hindi
जब हम किसी website या form में input box का उपयोग करते हैं, तो हम user से data प्राप्त करते हैं। यह data manually या JavaScript के माध्यम से लिया जा सकता है। नीचे JavaScript के माध्यम से input data प्राप्त करने का तरीका बताया गया है।
<input type="text" id="username" placeholder="अपना नाम दर्ज करें">
<button onclick="getData()">Submit</button>
<script>
function getData() {
var name = document.getElementById("username").value;
alert("आपका नाम है: " + name);
}
</script>
इसमें:
- user द्वारा input box में डाला गया data .value के माध्यम से लिया जाता है।
- button click होते ही JavaScript function trigger होता है।
- alert() box में user का नाम दिखाया जाता है।
Validating User Input from Input Box in Hindi
Validation का मतलब होता है कि user जो input दे रहा है वह सही format में है या नहीं। यदि validation नहीं किया गया तो गलत data process हो सकता है जिससे error आ सकता है या security risk भी हो सकता है।
HTML Validation का उपयोग
<form>
नाम: <input type="text" name="name" required><br>
ईमेल: <input type="email" name="email" required><br>
<input type="submit" value="Submit">
</form>
- required attribute user को field भरने के लिए मजबूर करता है।
- type="email" यह सुनिश्चित करता है कि user एक valid email address ही दर्ज करे।
JavaScript Validation का उपयोग
<input type="text" id="userAge">
<button onclick="checkAge()">Check Age</button>
<script>
function checkAge() {
var age = document.getElementById("userAge").value;
if(age < 18) {
alert("आप 18 साल से कम हैं।");
} else {
alert("आपका उम्र मान्य है।");
}
}
</script>
Practical Examples of Input Box Usage in Hindi
Input box का उपयोग लगभग हर interactive वेबसाइट और application में होता है। नीचे कुछ practical examples दिए गए हैं जहाँ input box का उपयोग किया जाता है।
1. Login Form
<form>
यूजरनेम: <input type="text" name="username"><br>
पासवर्ड: <input type="password" name="password"><br>
<input type="submit" value="Login">
</form>
2. Contact Form
<form>
नाम: <input type="text" name="name"><br>
ईमेल: <input type="email" name="email"><br>
मैसेज: <textarea name="message"></textarea><br>
<input type="submit" value="Send">
</form>
3. Feedback Form
<form>
रेटिंग (1 से 5): <input type="number" min="1" max="5"><br>
कमेंट: <textarea></textarea><br>
<input type="submit" value="Submit Feedback">
</form>
4. Table: Input Box Types
| Input Type | Purpose |
|---|---|
| text | साधारण text input के लिए |
| number | संख्यात्मक input के लिए |
| ईमेल address के लिए | |
| password | पासवर्ड input के लिए |
| date | तारीख चयन के लिए |
Input Box उपयोग करने के लाभ
- User से सीधा और real-time interaction करना आसान होता है।
- Data को validate कर के server तक भेजा जा सकता है।
- Forms की सहायता से login, registration, feedback आदि प्राप्त किया जा सकता है।
- JavaScript के द्वारा dynamic response possible होता है।
Input Box से जुड़े कुछ विशेष सुझाव
- हर input box को एक label देना चाहिए ताकि user समझ सके कि उसमें क्या भरना है।
- placeholder और validation user experience को बेहतर बनाते हैं।
- Mobile-friendly forms के लिए input fields को पर्याप्त space और size देना चाहिए।
FAQs
<input> element और JavaScript की सहायता से user द्वारा enter किया गया data access किया जाता है जैसे कि document.getElementById("id").value का उपयोग करके।
required, type="email", pattern का उपयोग किया जाता है। JavaScript से भी custom validation की जा सकती है।
text, number, email, password, date आदि। ये सभी अलग-अलग प्रकार की user input लेने के लिए बनाए गए हैं।