Html Forms and Input Elements in Hindi

Forms and Input Elements.

Html form.

एचटीएमएल वेब पेज या वेबसाइट में फॉर्म एक मूलभूत डिजिटल यूजर इनफार्मेशन स्टोर्ड फॉर्मेट है. किसी भी एचटीएमएल वेबसाइट में फॉर्म का उपयोग वेब डेवलपमेंट में वेब पेज के साथ वेब विजिटर यूजर इंटरैक्ट करने वाले यूजर से ऑनलाइन डेटा या जानकारी एकत्र करने के लिए किया जाता है। एचटीएमएल फ्रॉम वेब विजिटर यूजर से फॉर्म में माँगा गया डेटा और जानकारी इनपुट करने, फॉर्म एलिमेंट ऑब्जेक्ट चयन करने और ऑनलाइन फॉर्म प्रोसेसिंग के लिए उस यूजर फील डेटा और इनफार्मेशन को डेडिकेटेड वेब सर्वर पर सबमिट करने की एचटीएमएल फॉर्म में अनुमति देते हैं।

सर्च बार, यूजर क्रेडेंशियल लॉगिन, कांटेक्ट अस फॉर्म, सर्वेस फॉर्म, इ-कॉमर्स गुड्स बाय और सेल्ल फॉर्म, स्कूल यूनिवर्सिटीज एडमिशन फॉर्म, और का अन्य प्रकार सहित विभिन्न वेब एप्लीकेशन के रूप में फॉर्म उपयोग किये जाते हैं।

एचटीएमएल वेब पेज में फॉर्म को <form> टैग का उपयोग करके परिभाषित किया जाता है. जो वेब डेवलपर को फॉर्म एलिमेंट जैसे टेक्स्ट फ़ील्ड, रेडियो बटन, चेकबॉक्स, ड्रॉपडाउन लिस्ट और बटन जैसे विभिन्न फॉर्म इनपुट एलिमेंट के लिए एक ऑनलाइन ऑफलाइन डिजिटल कंटेनर के रूप में कार्य करता है। किसी भी एचटीएमएल वेब पेज ये वेबसाइट में फॉर्म एलिमेंट्स में उपयोगकर्ताओं द्वारा दर्ज या चयनित ऑनलाइन डेटा को HTTP रिक्वेट्स का उपयोग करके आगे की प्रक्रिया के लिए डेडिकेटेड वेब सर्वर पर भेजा और प्रोसेस किया जाता है।

Create a form in HTML with <form> tag.

आप एचटीएमएल में <form> टैग का उपयोग करके एचटीएमएल में फॉर्म बनाना वेब पेजों पर ऑनलाइन वेब विजिटर उपयोगकर्ता द्वारा डाटा और जानकारी इनपुट एकत्र करने का एक मौलिक तरीका है। यदि आप एचटीएमएल में नए डेवलपर है, तो आप स्टेप बाय स्टेप इन फॉर्म एलिमेंट को सिख कर एक कमर्शियल फॉर्म बना सकते है।

First start the HTML with <form> tag.

एचटीएमएल में <form> टैग किसी भी नए फॉर्म की स्टार्ट और एन्ड को परिभाषित करता है। यहाँ किसी भी डेवलप्ड एचटीएमएल फॉर्म के दो आवश्यक गुण हैं।

पहला डिज़ाइन फॉर्म एक्शन और दूसरा मेथड दोनों ऑनलाइन एचटीएमएल वेबसाइट में एक फॉर्म की रूपरेखा को निर्धारित करते है।

Form Action – यह फॉर्म वह URL (यूनिफार्म रिसोर्सेज लोकेटर) को निर्दिष्ट करता है. जहां ऑनलाइन फॉर्म के डेटा को प्रोसेसिंग के लिए डेडिकेटेड सर्वर पर भेजा जाएगा। यह आम तौर पर बैकएन्ड एक सर्वर-साइड वेब डेवलपमेंट स्क्रिप्ट है. जो वेब पेज फॉर्म को ऑनलाइन सर्वर साइड में यूजर फील डाटा और इनफार्मेशन को सबमिशन करता है।

Here’s a basic example.

<form action=”process_form.php” method=”post”>

Form Method – यह एचटीएमएल फॉर्म डेटा भेजने के लिए उपयोग की जाने वाली HTTP रिक्वेस्ट मेथड को परिभाषित करता है। किसी भी एचटीएमएल फॉर्म में दो सबसे सामान्य मेथड्स उपयोग होती हैं, जिनमे “get” और “पोस्ट” मेथड आम है।

GET – वेब पेज फॉर्म में यूजर डेटा को डेडिकेटेड यूआरएल में जोड़ता है. जिससे यह क्लाइंट वेब ब्राउज़र एड्रेस बार में दिखाई देता है।

POST – यह वेब पेज में फॉर्म डेटा को HTTP रिक्वेस्ट के मुख्य भाग में भेजता है. जिससे यह ऑनलाइन कम्युनिकेशन इंटरनेट लेयर में सेंसिटिव डेटा के लिए अधिक सुरक्षित और उपयुक्त हो जाता है।

How to add html from field.

ज्यादातर वेबसाइट में <form> टैग के अंदर, आप वेब विजिटर उपयोगकर्ता द्वारा प्रदान किसी गया इनपुट डाटा और इनफार्मेशन को एकत्र करने के लिए विभिन्न प्रकार के जरूरी फॉर्म फ़ील्ड को जोड़ सकते हैं। ज्यादातर किसी भी वेबसाइट फॉर्म फ़ील्ड प्रकारों में यूजर टेक्स्ट इनपुट, रेडियो बटन, चेकबॉक्स, ड्रॉपडाउन, लिस्ट बॉक्स, बोम्बो बॉक्स, ओर अन्य फॉर्म एलिमेंट शामिल हैं।

So, let us look at an example of a simple text input field in an HTML web page.

<label for=’Enter_name’>Enter_name – </label>

<input type=”text” id=”Enter your name” name=”Enter your name”>

In the example above.

<label> फॉर्म एलिमेंट किसी भी यूजर इनपुट फ़ील्ड के लिए एक टेक्स्ट लेबल जानकारी प्रदर्शित करता है।

<label> एचटीएमएल में लेबल की एट्रिब्यूट इसे इनपुट फ़ील्ड की आईडी से फॉर्म में जोड़ा जाता है।

<input> एक फॉर्म एलिमेंट एक यूजर टेक्स्ट इनपुट फ़ील्ड को “text” पर सेट प्रकार एट्रिब्यूट के साथ परिभाषित करता है, और इसमें एक यूजर द्वारा प्रदान की गई यूनिक आईडी और एक नाम विशेषता स्टोर होती है।

Collect input from a web user in HTML forms and validate it on an online or offline server.

आप किसी भी फॉर्म एक्शन एट्रिब्यूट में निर्दिष्ट सर्वर-साइड स्क्रिप्ट पर फॉर्म फ़ील्ड से वेब विजिटर इनपुट एकत्र कर सकते हैं। वेब पेज में प्रत्येक फॉर्म फ़ील्ड की नाम एट्रिब्यूट का उपयोग सर्वर पर डेटा को पहचानने और पुनर्प्राप्त करने के लिए किया जाता है।

You can apply it in php web development.

$username = $_POST[‘username’];

Include a submit button in the HTML form.

किसी भी वेबसाइट में डिस्प्ले फॉर्म वेब विजिटर से ली गई आवश्यक जानकारी को सर्वर पर फ़ॉर्म के माध्यम से सबमिट करने की अनुमति देने के लिए सबमिट बटन उपयोग करते है।

<input type=”submit” value=”Submit”>

How to close a <form> tag in HTML.

एचटीएमएल में फॉर्म डेवलपमेंट प्रोसेस में जब आप अपने सभी फॉर्म फ़ील्ड और बटन जोड़ लें, तो <form> टैग को शुरू में स्टार्ट करे और अंत में </form> टैग को क्लोज जरूर करे. अन्यथा आपका फ्रॉम प्रॉपर डिस्प्ले नहीं होगा।

</form>

Let’s how to complete example of a basic HTML form.

<!DOCTYPE html>

<html>

<head>

    <title>Basic Html Form</title>

</head>

<body>

    <h1>Let’s Try Some Form Elements</h1>

    <form action=”process_form.php” method=”post”>

        <label for=”yourname”>Enter your name -</label>

        <input type=”text” id=”yourname” name=”yourname”>

        <label for=”emailid”>Enter E-mail id -</label>

        <input type=”text” id=”emailid” name=”emailid”>

        <label for=”contact”>Enter contact -</label>

        <input type=”text” id=”contact” name=”contact”>

        <label for=”enterpassword”>Enter Password -</label>

        <input type=”password” id=”password” name=”password”>

        <p><input type=”submit” value=”Submit”>

        <input type=”button” value=”cancel”></p>

    </form>

</body>

</html>

Input types: text, password, radio buttons, checkboxes, etc.

एक सामान्य एचटीएमएल फॉर्म वेब विजिटर को डायरेक्ट विभिन्न यूजर इनपुट विकल्प प्रकार प्रदान करता है. इन फॉर्म इनपुट का उपयोग आप एचटीएमएल फॉर्म के भीतर विभिन्न प्रकार के उपयोगकर्ता इनपुट एकत्र करने के लिए कर सकते हैं।

Here are some basic input types of web page in HTML form.

Text Input (<input type=”text”>).

एचटीएमएल वेब पेज में फॉर्म टेक्स्ट इनपुट का उपयोग सिंगल-लाइन यूजर टेक्स्ट इनफार्मेशन को एंटर और एक्सेप्ट करने के लिए किया जाता है।

Example as follows

 <input type=”text” name=”contact_detail” id=”contact_detail”>

Input the password in the HTML form (<input type=’password’>).

ऑनलाइन एचटीएमएल फॉर्म में पासवर्ड इनपुट का उपयोग पासवर्ड जैसी सिक्योर यूजर क्रेडेंशियल जानकारी को दर्ज करने के लिए किया जाता है। याद रखे की पासवर्ड फील्ड में दर्ज किया गया टेक्स्ट इन्फो आमतौर पर हिडन होता है जब यूजर पासवर्ड इन्फोर्मशन इनपुट करता है, तब पासवर्ड फील्ड पासवर्ड को star सिंबल के रूप में दर्ज होता है।

Example of password input.

<input type=”password” name=”password” id=”password”>

Add radio button (<input type=’radio’>) to HTML form.

एचटीएमएल फॉर्म में रेडियो बटन का उपयोग तब किया जाता है, जब आप चाहते हैं कि वेब विजिटर परस्पर अनन्य रेडियो विकल्पों के सेट में से किसी एक रेडियो विकल्प का अवश्य चयन करें।

To group each radio button in any HTML form, you need to give it the same name attribute.

Example of radio button in HTML form.

<input type=”radio” name=”course” value=”java”> Java

<input type=”radio” name=”course” value=”html”> Html

HTML Form Checkbox (<input type=’checkbox’>).

एचटीएमएल फॉर्म में चेकबॉक्स का उपयोग तब किया जाता है. जब वेब विजिटर मौजूदा विकल्पों की लिस्ट में से एक या अधिक चेकबॉक्स विकल्प को मैन्युअल चुन सकते हैं।

Each checkbox in an HTML form has a unique name attribute.

Using checkboxes in HTML forms.

<input type=”checkbox” name=”web development” value=”programming”> Javascript

<input type=”checkbox” name=”database” value=”programming”> Oracle Sql

<input type=”checkbox” name=”software development” value=”programming”> Python

HTML form dropdown list (<select> and <option>).

एचटीएमएल फॉर्म में ड्रॉपडाउन लिस्ट सिलेक्शन एलिमेंट चॉइस है, जिन्हें सिलेक्शन लिस्ट के रूप में भी जाना जाता है. जो वेब विजिटर को मौजूदा एक लिस्ट से एक विकल्प चुनने की अनुमति देती हैं।

एचटीएमएल फॉर्म में <select> टैग एलिमेंट का उपयोग करके बनाए गए हैं, और <option> एलिमेंट से भरे हुए हैं।

Select form example.

<select name=”language”>

    <option value=”java”>Java Programming</option>

    <option value=”python”>Python Programming</option>

    <option value=”ruby”>Ruby Programming</option>

<option value=”matlab”>Matlab Programming</option>

<option value=”kotlin”>Kotlin Programming</option>

</select>

Textarea in HTML form (<textarea>).

एचटीएमएल फॉर्म में टेक्स्टएरिया का उपयोग फॉर्म में यूजर से मल्टी-लाइन टेक्स्ट एक से अधिक टेक्स्ट जानकारी इनपुट करने के लिए किया जाता है. जैसे कोई वेब पेज में डिस्क्रिप्शन, पोस्ट कमैंट्स, या यूजर मैसेज, आदि।

Example of textarea in HTML form.

<textarea name=”postcomments” rows=”5″ cols=”100″></textarea>

File input in HTML form (<input type=’file’>).

एचटीएमएल फॉर्म में फ़ाइल इनपुट वेब यूजर को डेडिकेटेड वेब सर्वर पर डॉक्यूमेंट या फ़ाइलें अपलोड या सेंड करने की अनुमति देता है।

Example of file upload in HTML form.

<input type=”file” name=”file_upload”>

Hidden Input in HTML form (<input type=”hidden”>).

एचटीएमएल फॉर्म में हिडन इनपुट वेब विजिटर को प्रदर्शित नहीं किए जाते हैं. लेकिन इन फॉर्म एलिमेंट्स का उपयोग क्लाइंट-साइड पर डेटा संग्रहीत करने या वेब पेज के बीच मान पास करने के लिए उपयोग किया जा सकता है।

Example of hidden input in HTML form.

 <input type=”hidden” name=”token” value=”acdt45766″>

Date and Time Inputs (<input type=”date”>, <input type=”time”>, <input type=”datetime-local”>):

इस प्रकार के एचटीएमएल फॉर्म इनपुट प्रकारों का उपयोग वेब विजिटर से डेट और टाइम की जानकारी एकत्र करने, कुछ वेब ब्राउज़रों में डेट एंड टाइम फॉर्म सिलेक्शन विकल्प प्रदर्शित करने के लिए किया जाता है।

Textareas and dropdown menus.

एचटीएमएल फॉर्म में टेक्स्टएरिया और ड्रॉपडाउन मेनू सामान्य एचटीएमएल फॉर्म एलिमेंट हैं. जिनका उपयोग किसी भी वेब पेज या वेबसाइट में विभिन्न तरीकों से वेब विजिटर से डायरेक्ट यूजर इनपुट डाटा और इनफार्मेशन को एंटर करने के लिए किया जाता है।

How to use textarea in html form.

Textarea in HTML form (<textarea>).

एचटीएमएल फॉर्म एक <textarea> टैग एलिमेंट वेब यूजर को मल्टी-लाइन टेक्स्ट, इनफार्मेशन को एक्टिव फॉर्म एरिया में इनपुट लेता है. जैसे की, वेबसाइट पोस्ट कमैंट्स, कोइ मैसेज या टेक्स्ट इनफार्मेशन, या सामान्य सी कोई भी टेक्स्ट इनफार्मेशन को टेक्स्टएरिया में इनपुट और स्टोर किया जा सकता है।

Here you are given the use of textarea in HTML form.

<label for=’postcomments’>Post Comments -</label>

<textarea id=” comments” name=” comments” rows=”7” cols=”80”></textarea>

Explanation of textarea in HTML.

<textarea> एचटीएमएल फॉर्म में एक टेक्स्टएरिया ओपनिंग टैग है. जो एचटीएमएल फॉर्म में टेक्स्टएरिया टैग को परिभाषित करता है।

हर एचटीएमएल फॉर्म टेक्स्टएरिया आईडी का उपयोग टेक्स्टएरिया के साथ लेबल इनफार्मेशन को जोड़ने के लिए किया जाता है।

एचटीएमएल फॉर्म नाम टेक्स्टएरिया का नाम है. जिसका उपयोग फॉर्म सबमिट करते समय फॉर्म डेटा की पहचान करने के लिए किया जाता है।

एचटीएमएल फॉर्म रौ और कॉलम एट्रिब्यूट टेक्स्टएरिया में विज़िबल रौस और कॉलम की संख्या को परिभाषित करती हैं।

Use of dropdown menus (<select> and <option>) in HTML forms.

ड्रॉपडाउन मेनू, जिसे फ्रॉम सलेक्ट लिस्ट के रूप में भी जाना जाता है, इसमें वेब विजिटर को पूर्वनिर्धारित ऑप्शंस की लिस्ट में से एक विकल्प चुनने की अनुमति देता है। आप उन्हें <select> और <option> तत्वों का उपयोग करके बनाते हैं।

Here is an example of a dropdown menu.

<label for=”computer”>Computer:</label>

<select id=”computer” name=”computername”>

    <option value=”dell”>Dell laptop</option>

    <option value=”hp”>Hp Laptop</option>

    <option value=”lenovo”>Lenovo Laptop</option>

<option value=”apple”>Apple Macbook Pro</option>

</select>

Explanation of dropdown menu.

एचटीएमएल फॉर्म में <select> का उपयोग ड्रॉपडाउन मेनू को बनाने या परिभाषित करने के लिए किया जाता है।

ड्रापडाउन मेनू आईडी का उपयोग लेबल को ड्रॉपडाउन के साथ जोड़ने के लिए किया जाता है।

ड्रॉपडाउन फ्रॉम एलिमेंट का नाम है, जिसका उपयोग फॉर्म सबमिट करते समय चयनित विकल्प की पहचान करने के लिए किया जाता है।

<option> टैग ड्रॉपडाउन के भीतर अलग-अलग मेनू विकल्पों को परिभाषित करते हैं।

प्रत्येक ड्रापडाउन मेनू <option> की मान विशेषता उस मान को निर्दिष्ट करती है. जो उस ऑप्शन के चयन होने पर सर्वर को भेजा जाता है। फॉर्म में ओपन और क्लोज होने वाले <option> टैग के बीच का टेक्स्ट उपयोगकर्ता को ड्रॉपडाउन में दिखाई देता है।

Form submission (<input type=”submit”>).

एचटीएमएल फॉर्म में किसी भी यूजर सबमिशन <input type=’submit’> टैग का उपयोग करके पूरा किया जाता है। यह एक बटन प्रदर्शित करता है, जिस पर वेब यूजर द्वारा क्लिक करने पर, प्रोसेसिंग के लिए यूजर द्वारा फॉर्म में भरा डेटा डेडिकेटेड वेब सर्वर पर अपने आप सबमिट या सेव हो जाता है।

Use of input type submission in HTML forms.

<form action=”process_form.php” method=”post”>

    <!– declare desire form field here –>

    <input type=”submit” value=”Submit”>

</form>

In this example above.

एचटीएमएल फॉर्म में <form> टैग फॉर्म एलिमेंट को परिभाषित करता है, और सर्वर-साइड स्क्रिप्ट (एक्शन) को निर्दिष्ट करता है, जिस पर फॉर्म डेटा प्रोसेसिंग के लिए भेजा जाएगा। फॉर्म मेथड एट्रिब्यूट सबमिशन के लिए उपयोग की जाने वाली HTTP मेथड को इंगित करती है, (उदाहरण के लिए, “post”) ।

एचटीएमएल फॉर्म के अंदर, आप अपने फ़ॉर्म फ़ील्ड, जैसे टेक्स्ट इनपुट, रेडियो बटन और चेकबॉक्स, फॉर्म एलिमेंट को प्रदर्शित कर सकते हैं।

<input type=”submit”> टैग “submit” बटन प्रदर्शित करता है। जब कोई वेब उपयोगकर्ता इस बटन पर क्लिक करता है, तो फॉर्म डेटा मेथड एट्रिब्यूट में निर्दिष्ट HTTP मेथड का उपयोग करके एक्शन एट्रिब्यूट में निर्दिष्ट यूआरएल लोकेशन पर सबमिट किया जाता है।

You can customize the text displayed on the submit button by setting the value attribute to the label you want.

Example – Other methods of form submission.

<input type=”submit” value=”send data”>

जब वेब यूजर द्वारा फॉर्म सबमिट किया जाता है, तो फॉर्म फ़ील्ड में यूजर द्वारा दर्ज किया गया डेटा, जैसे टेक्स्ट इनपुट, डेडिकेटेड सर्वर पर भेजा जाएगा, और आप इसे एक्शन एट्रीब्यूट में निर्दिष्ट सर्वर-साइड स्क्रिप्ट पर संसाधित कर सकते हैं। आमतौर पर, सर्वर पर फॉर्म डेटा को संभालने के लिए PHP, पायथन या जावास्क्रिप्ट जैसी सर्वर-साइड स्क्रिप्टिंग प्रोग्रामिंग लैंग्वेजेज का उपयोग किया जाता है।

Let’s try a html form that contain all essential form tag.

<!DOCTYPE html>

<html>

  <head>

    <title>Html Form</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

      <h1 class=”title”>Html Form Example </h1>

      <p id=”currentTime”></p>

      <script src=”script.js”></script>

      <label for=”yourname”>Name -</label>

        <input type=”text” id=”yourname” name=”yourname”>

        <br>

        <label for=”youraddress”>Address -</label>

        <input type=”text” id=”yourname” name=”yourname”>

        <br>

        <label for=”yourcontact”>Contact -</label>

        <input type=”text” id=”yourcontact” name=”yourcontact”>

        <br>

        <label for=”course”>Select Course</label><br>

        <input type=”radio” name=”course” value=”java”> Java

<input type=”radio” name=”course” value=”html”> Html

<input type=”radio” name=”course” value=”php”> Php

<input type=”radio” name=”course” value=”css”> Css

<label for=”medium”>Select Course Medium</label><br>

<input type=”checkbox” name=”language” value=”english”> English

<input type=”checkbox” name=”language” value=”hindi”> Hindi

<input type=”checkbox” name=”language” value=”regional”> Regional

<label for=”center”>Select Course Center</label><br>

<select name=”center”>

     <option value=”sirohi”>Sirohi</option>

     <option value=”jodhpur”>Jodhpur</option>

     <option value=”jaipur”>Jaipur</option>

<option value=”ahemdabad”>Ahemdabad</option>

<option value=”delhi”>Delhi</option>

</select><br>

<label for=”query”>Submit Query</label><br>

<textarea name=”postcomments” rows=”5″ cols=”40″></textarea>

<label for=”upload”>Upload Document</label><br>

<input type=”file” name=”file_upload”>

<label for=”computer”>Computer – </label>

<select id=”computer” name=”computername”>

     <option value=”dell”>Dell Laptop</option>

     <option value=”hp”>Hp Laptop</option>

     <option value=”lenovo”>Lenovo Laptop</option>

<option value=”apple”>Apple Macbook Pro</option>

</select>

<label for=”enterpassword”>Password -</label>

        <input type=”password” id=”password” name=”password”>

        <p><input type=”submit” value=”Submit”>

        <input type=”button” value=”cancel”></p>

  </body>

</html>