Creating basic forms using HTML In Hindi
एचटीएमएल मार्कअप लैंग्वेज में पीएचपी फ़ॉर्म डेवलपमेंट के लिए सभी जरूरी टैग मौजूद होते है, याद रहे ऑनलाइन किसी भी वेबसाइट या वेबपेज में एचटीएमएल फ़ॉर्म इंटरनेट यूजर को डेटा इनपुट करने की परमिशन प्रोवाइड करता है. जिसे क्लाइंट यूजर द्वारा मैन्युअली स्टेप बाय स्टेप ऑनलाइन फील किया जाता है, जरूरत पड़ने पर इस जानकारी को सर्वर द्वारा प्रोसेस और स्टोर किया जाता है। पीएचपी में एचटीएमएल फ़ॉर्म का इस्तेमाल कई तरह के डाटा और इनफार्मेशन को यूजर से टेक्स्ट और इनफार्मेशन को कलेक्ट करने में किया जाता है. जैसे कि, ऑनलाइन यूजर रजिस्ट्रेशन, यूजर लॉगिन, डाटा और इनफार्मेशन सर्च और डेटा सबमिट करना, डाटा अपलोड, और डाटा डाउनलोड और कई अन्य प्रकार के फॉर्म को पीएचपी में एचटीएमएल की सहायता से बनाया और कण्ट्रोल किया जा सकता है।
Main steps in creating a form for php in HTML webpage.
Basic form structure for php form development in HTML webpage.
एचटीएमएल वेबपेज में पीएचपी फ़ॉर्म डेवलपमेंट के लिए बेसिक फॉर्म स्ट्रक्चर में <form> टैग का इस्तेमाल किया जाता है. जो वेबपेज में फ़ॉर्म लेआउट को डिफाइन करता है, और फ़ॉर्म टैग एलिमेंट को ऐड कर डिस्प्ले करता है। सामान्य एचटीएमएल वेबपेज में पीएचपी फ़ॉर्म डेवलपमेंट के लिए फ़ॉर्म में टेक्स्ट बॉक्स, चेकबॉक्स, रेडियो बटन, और फॉर्म डाटा सबमिशन के लिए बटन जैसे इनपुट फ़ील्ड आदि मिलते हैं।
php form development examples in HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Html Form With Php</title>
</head>
<body>
<h1>Contact Form</h1>
<form action=”submit_form.php” method=”POST”>
<label for=”empoyeename”>Employeename – </label>
<input type=”text” id=”employeename” name=”employeename” required>
<br>
<label for=”gender”>Employee Gender – </label>
<label for=”gender_m”>Male</label>
<input type=”radio” id=”gender_m” name=”gender” value=”male”>
<label for=”gender_f”>Female</label>
<input type=”radio” id=”gender_f” name=”gender” value=”female”>
<br>
<label for=”language”>Employee Language – </label>
<label for=”language”>Php </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
<label for=”language”>Java </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
<label for=”language”>Javascript </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
<br>
<label for=”course”>Select Course – </label>
<select id=”course” name=”course”>
<option value=”course”>Html</option>
<option value=”course”>Php</option>
<option value=”course”>Javascript</option>
</select>
<br>
<label for=”bdate”>Enter Dob – </label>
<input type=”date” id=”bdate” name=”bdate” required>
<br>
<label for=”file”> File Upload -</label>
<input type=”file” id=”file” name=”file”>
<br>
<label for=”message”>Message:</label><br>
<textarea id=”message” name=”message” rows=”4″ cols=”50″ required></textarea><br><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
php form explanation in HTML webpage.
<form> tag – फॉर्म टैग वेबपेज में फ़ॉर्म की शुरुआत और फॉर्म के अंत को डिफाइन करता है। फॉर्म टैग की दो महत्वपूर्ण विशेषताएँ हैं. जिसमे,
action – यह फॉर्म में सर्वर-साइड स्क्रिप्ट जैसे, सबमिट_फ़ॉर्म.php को इंडीकेट करता है. जो यूजर द्वारा सबमिट किए जाने पर फ़ॉर्म डेटा को ऑनलाइन लोकेशन में प्रोसेस करेगा।
method – एचटीएमएल वेबपेज में मेथड डिफाइन करता है कि फ़ॉर्म डेटा को कैसे भेजा जाता है। जहा बेसिक फर्म मेथड में GET (URL में डेटा जोड़ता है) और POST ऑनलाइन सर्वर लोकेशन में अनुरोध बॉडी में डेटा को सेंड करता हैं।
<label> tag – एचटीएमएल वेबपेज में प्रत्येक फ़ॉर्म फ़ील्ड के लिए एक टेक्स्ट लेबल डिस्प्ले करता है। यहाँ आप for ऐट्रिब्यूट्स का उपयोग करके <label> को इनपुट के साथ जोड़ना एक बेस्ट प्रैक्टिस है, जो एचटीएमएल फॉर्म वेबपेज में लेबल को आईडी के माध्यम से संबंधित इनपुट फ़ील्ड से कनेक्ट करता है।
<input> tag – यह एचटीएमएल वेबपेज में एक मल्टी-पर्पस एलिमेंट है, जिसका उपयोग फॉर्म में इनपुट फ़ील्ड क्रिएट करने में किया जाता है। यहाँ आपको विभिन्न प्रकार के इनपुट फ़ील्ड प्रकार ऐट्रिब्यूट्स में (जैसे, टेक्स्ट, ईमेल, पासवर्ड, आदि) सलेक्शन विकल्प मिलते हैं।
type=”text” – एचटीएमएल वेबपेज में एक स्टैण्डर्ड टेक्स्ट इनपुट फ़ील्ड प्रोवाइड करता है।
type=”email” – एचटीएमएल वेबपेज में एक इनपुट फ़ील्ड जो ईमेल एड्रेस को इनपुट और वैलिडेट करता है।
required – एचटीएमएल वेबपेज में फॉर्म में यह सुनिश्चित करता है कि फ़ॉर्म सबमिट करने से पहले फ़ील्ड को भरना जरूरी होगा।
<textarea> tag – एचटीएमएल वेबपेज में लॉन्ग मैसेज टेक्स् जैसे, बड़े टेक्स्ट इनपुट के लिए एक मल्टीलाइन टेक्स्ट बॉक्स क्रिएट करता है।
<input type=”submit”> – एचटीएमएल वेबपेज में एक सबमिट फॉर्म बटन क्रिएट करता है, जो आपको फॉर्म डाटा को सर्वर लोकेशन में सबमिट करता है।
Form elements in an HTML webpage.
एचटीएमएल वेबपेज फ़ॉर्म में आपके जरूरत के अनुसार मल्टीप्ल फॉर्म इनपुट टाइप विकल्प में आपको कई तरह के फॉर्म एलिमेंट सलेक्शन चॉइस मिलते हैं।
Let’s understand form elements in an HTML webpage better.
HTML form text input.
<label for=”employeename”>Employeename – </label>
<input type=”text” id=”employeename” name=”employeename” required>
HTML form password input.
<label for=”password”>Password – </label>
<input type=”password” id=”password” name=”password” required>
HTML form radio buttons.
एचटीएमएल वेबपेज फ़ॉर्म में रेडियो बटन फॉर्म यूजर को रेडियो बटन ग्रुप से केवल एक विकल्प चुनने की अनुमति देते हैं।
<label for=”gender_m”>Male</label>
<input type=”radio” id=”gender_m” name=”gender” value=”male”>
<label for=”gender_f”>Female</label>
<input type=”radio” id=”gender_f” name=”gender” value=”female”>
HTML form checkbox.
एचटीएमएल वेबपेज फ़ॉर्म में चेकबॉक्स फॉर्म यूजर को मल्टीप्ल फर्म चेकबॉक्स ऑप्शन चुनने की अनुमति देता है।
<label for=”language”>Php </label>
<input type=”checkbox” id=” language ” name=” language ” value=”yes”>
HTML form select dropdown.
एचटीएमएल वेबपेज फ़ॉर्म में ड्रॉपडाउन (या सलेक्शन) यूजर को लिस्ट से एक विकल्प चुनने की अनुमति देता है।
<label for=”course”>Select Course – </label>
<select id=”course” name=”course”>
<option value=” course “>Html</option>
<option value=” course “>Php</option>
<option value=” course “>Javascript</option>
</select>
HTML form date input.
एचटीएमएल वेबपेज फ़ॉर्म में डेट इनपुट फॉर्म यूजर को डेट इनपुट करने में हेल्प करता है।
<label for=”bdate”>Enter Dob – </label>
<input type=”date” id=”bdate” name=”bdate” required>
HTML form file upload.
एचटीएमएल वेबपेज फ़ॉर्म में फॉर्म फाइल अपलोड फॉर्म यूजर को ऑनलाइन फॉर्म डाटा अपलोड करने में हेल्प करता है।
<label for=”file”> File Upload -</label>
<input type=”file” id=”file” name=”file”>
Grouping form elements with <fieldset> in an HTML webpage form.
एचटीएमएल वेबपेज फ़ॉर्म में रिलेटेड फ़ॉर्म एलिमेंट को विज़ुअली ग्रुप और डिस्प्ले करने के लिए, आप <fieldset> टैग का उपयोग कर सकते हैं. जो आपके मौजूदा एचटीएमएल वेबपेज फ़ॉर्म में रिलेटेड फॉर्म कण्ट्रोल के चारों ओर एक बॉक्स एरिया प्रोवाइड करता है।
<fieldset>
<legend>Employee Detail</legend>
<label for=”name”>Employee Name – </label>
<input type=”text” id=”name” name=”name” required><br><br>
<label for=”email”>Employee Email – </label>
<input type=”email” id=”email” name=”email” required><br><br>
</fieldset>
Here in this example.
यहाँ <legend> टैग का उपयोग ग्रुप फॉर्म कण्ट्रोल फ़ील्ड के लिए टाइल प्रोवाइड करता है।
HTML form submit and reset buttons.
Form submit button – एचटीएमएल वेबपेज फ़ॉर्म में सर्वर लोकेशन पर फ़ॉर्म डेटा को ऑनलाइन सबमिट करता है।
<input type=”submit” value=”Submit”>
Form reset button – एचटीएमएल वेबपेज फ़ॉर्म में सभी फ़ॉर्म फ़ील्ड को उनके डिफ़ॉल्ट वैल्यू पर रीसेट करता है।
<input type=”reset” value=”Reset”>
HTML form form validation.
आप अपने मौजूदा एचटीएमएल वेबपेज फ़ॉर्म में आवश्यक, न्यूनतम लंबाई, अधिकतम लंबाई, पैटर्न, प्रकार आदि जैसी फॉर्म ऐट्रिब्यूट्स का उपयोग करके HTML फ़ॉर्म में बेसिक वेलिडेशन इफ़ेक्ट को ऐड कर सकते हैं। यह मौजूदा फॉर्म में सुनिश्चित करता है कि फॉर्म यूजर सबमिट करने से पहले फ़ॉर्म को सही ढंग से भरना होता है।
HTML form email validation example.
<label for=”email”>Employee Email -</label>
<input type=”email” id=”email” name=”email” required>
यहाँ, आपके मौजूदा एचटीएमएल वेबपेज फ़ॉर्म में ब्राउज़र जाँच करेगा कि फ़ॉर्म सबमिट करने से पहले दर्ज किया गया ईमेल पता सही फ़ॉर्मेट में है, या नहीं।
HTML form sending form data to the server.
जब किसी एचटीएमएल वेबपेज फ़ॉर्म में फॉर्म इनफार्मेशन को सबमिट किया जाता है, तो वेब ब्राउज़र <form> टैग की एक्शन डिफाइन ऐट्रिब्यूट्स में डिफाइन सर्वर लोकेशन पर डेटा भेजता है। यहाँ फॉर्म डेटा को GET या POST फॉर्म मेथड का उपयोग करके ऑनलाइन भेजा जाता है, यह इस बात पर निर्भर करता है कि आप फॉर्म मेथड ऐट्रिब्यूट्स में क्या चुनते हैं।
- GET – एचटीएमएल वेबपेज फ़ॉर्म में फॉर्म URL में फील किया गया डेटा को सेंड करता है, यह मेथड सेंड के लिए (संवेदनशील डेटा के लिए सुरक्षित नहीं) है।
- POST – एचटीएमएल वेबपेज फ़ॉर्म में फॉर्म अनुरोध के मुख्य भाग में डेटा को सेंड करता है, यह मौजूदा फॉर्म में (संवेदनशील डेटा के लिए अधिक सुरक्षित) है।
Form submission example with POST.
<form action=”submit_form.php” method=”POST”>
<label for=”employeename”>employee name – </label>
<input type=”text” id=” employeename ” name=” employeename ” required><br><br>
<input type=”submit” value=”Submit”>
</form>
यहाँ, जब ऑनलाइन फ़ॉर्म को सबमिट किया जाता है, तो मौजूदा वेब ब्राउज़र POST फॉर्म मेथड के माध्यम से डेटा को submit_form.php लोकेशन पर भेजेगा।
HTML form form action and processing.
एचटीएमएल वेबपेज फ़ॉर्म में सर्वर-साइड स्क्रिप्ट (जैसे कि submit_form.php) फ़ॉर्म डेटा प्राप्त करेगी और उसे प्रोसेस करेगी। यहाँ PHP का उपयोग करके फ़ॉर्म डेटा को कैसे प्रोसेस किया जाए, इसका एक उदाहरण निचे मिलता है.
PHP form processing (submit_form.php) example.
<?php
if ($_SERVER[“REQUEST_METHOD”] == “POST”) {
$username = $_POST[“employeename”];
echo “Hi, $ employeename!”;
}
?>
यह PHP स्क्रिप्ट यूजर द्वारा फील फ़ॉर्म डेटा को ऑनलाइन प्रोसेस करती है.
यह जाँचता है कि फ़ॉर्म POST का उपयोग करके सबमिट किया गया था या नहीं।
यह $_POST[“employeename”] का उपयोग करके एम्प्लोयी नाम इनपुट फ़ील्ड का वैल्यू रिसीव करता है।
HTML form conclusion.
एचटीएमएल वेबपेज फ़ॉर्म बनाने में <form> टैग के साथ फ़ॉर्म स्ट्रक्चर लेआउट को डिफाइन करना और टेक्स्ट इनपुट, रेडियो बटन, चेकबॉक्स, और सबमिट बटन, जैसे मल्टीप्ल फॉर्म टैग एलिमेंट को ऐड या डिस्प्ले करना शामिल है। जहा HTML5 वर्जन आपको अधिक फॉर्म वेलिडेशन और इनपुट टाइप्स के लिए अधिक विकल्प मिलते है, जिससे फ़ॉर्म का उपयोग करना आसान और अधिक सुरक्षित हो जाता है। जब फ़ॉर्म सबमिशन डेटा को सर्वर पर भेजता है, जहाँ इसे PHP जैसी सर्वर-साइड स्क्रिप्टिंग लैंग्वेज का उपयोग करके ऑनलाइन प्रोसेस किया जा सकता है।
