एचटीएमएल ट्यूटोरियल

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

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

एचटीएमएल फॉर्म गुण


यह अध्याय HTML <form>तत्व के लिए विभिन्न विशेषताओं का वर्णन करता है।


क्रिया गुण

विशेषता प्रपत्र सबमिट करते समय की actionजाने वाली क्रिया को परिभाषित करती है।

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

नीचे दिए गए उदाहरण में, प्रपत्र डेटा "action_page.php" नामक फ़ाइल को भेजा जाता है। इस फ़ाइल में एक सर्वर-साइड स्क्रिप्ट है जो प्रपत्र डेटा को संभालती है:

उदाहरण

सबमिट करने पर, प्रपत्र डेटा "action_page.php" पर भेजें:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

युक्ति: यदि actionविशेषता को छोड़ दिया जाता है, तो क्रिया वर्तमान पृष्ठ पर सेट हो जाती है।


लक्ष्य विशेषता

विशेषता निर्दिष्ट करती है कि फ़ॉर्म सबमिट करने के बाद प्राप्त होने वाली targetप्रतिक्रिया को कहाँ प्रदर्शित किया जाए।

विशेषता में targetनिम्न में से कोई एक मान हो सकता है:

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

डिफ़ॉल्ट मान वह है _selfजिसका अर्थ है कि प्रतिक्रिया वर्तमान विंडो में खुलेगी।

उदाहरण

यहां, सबमिट किया गया परिणाम एक नए ब्राउज़र टैब में खुलेगा:

<form action="/action_page.php" target="_blank">

विधि विशेषता

विशेषता प्रपत्र डेटा सबमिट करते समय उपयोग की methodजाने वाली HTTP विधि को निर्दिष्ट करती है।

प्रपत्र-डेटा को URL चर (के साथ method="get") या HTTP पोस्ट लेनदेन (के साथ method="post") के रूप में भेजा जा सकता है।

प्रपत्र डेटा सबमिट करते समय डिफ़ॉल्ट HTTP विधि GET है। 

उदाहरण

प्रपत्र डेटा सबमिट करते समय यह उदाहरण GET विधि का उपयोग करता है:

<form action="/action_page.php" method="get">

उदाहरण

प्रपत्र डेटा सबमिट करते समय यह उदाहरण POST विधि का उपयोग करता है:

<form action="/action_page.php" method="post">

GET पर नोट्स:

  • प्रपत्र डेटा को URL में नाम/मान जोड़े में जोड़ता है
  • संवेदनशील डेटा भेजने के लिए कभी भी GET का उपयोग न करें! (प्रस्तुत प्रपत्र डेटा URL में दिखाई दे रहा है!)
  • URL की लंबाई सीमित है (2048 वर्ण)
  • फॉर्म सबमिशन के लिए उपयोगी जहां उपयोगकर्ता परिणाम को बुकमार्क करना चाहता है
  • GET गैर-सुरक्षित डेटा के लिए अच्छा है, जैसे Google में क्वेरी स्ट्रिंग्स

पोस्ट पर नोट्स:

  • HTTP अनुरोध के मुख्य भाग के अंदर प्रपत्र डेटा को जोड़ता है (सबमिट किया गया प्रपत्र डेटा URL में नहीं दिखाया गया है)
  • POST की कोई आकार सीमा नहीं है, और इसका उपयोग बड़ी मात्रा में डेटा भेजने के लिए किया जा सकता है।
  • POST के साथ फॉर्म सबमिशन को बुकमार्क नहीं किया जा सकता है

युक्ति: फ़ॉर्म डेटा में संवेदनशील या व्यक्तिगत जानकारी होने पर हमेशा POST का उपयोग करें!


स्वत: पूर्ण विशेषता

autocompleteविशेषता निर्दिष्ट करती है कि किसी प्रपत्र में स्वत: पूर्ण होना चाहिए या नहीं

जब स्वत: पूर्ण चालू होता है, तो उपयोगकर्ता द्वारा पहले दर्ज किए गए मानों के आधार पर ब्राउज़र स्वचालित रूप से मानों को पूरा करता है।

उदाहरण

स्वत: पूर्ण के साथ एक फॉर्म:

<form action="/action_page.php" autocomplete="on">

नोवालिडेट विशेषता

विशेषता एक novalidateबूलियन विशेषता है।

मौजूद होने पर, यह निर्दिष्ट करता है कि सबमिट किए जाने पर फॉर्म-डेटा (इनपुट) को मान्य नहीं किया जाना चाहिए।

उदाहरण

एक नोवालिडेट विशेषता वाला एक फॉर्म:

<form action="/action_page.php" novalidate>

एचटीएमएल व्यायाम

व्यायाम के साथ खुद को परखें

व्यायाम:

सबमिट बटन जोड़ें, और निर्दिष्ट करें कि फ़ॉर्म "/action_page.php" पर जाना चाहिए।

<फॉर्म="/action_page.php">
नाम: <इनपुट प्रकार = "पाठ" नाम = "नाम">
<>
</फॉर्म>


सभी <form> विशेषताओं की सूची

गुण विवरण
स्वीकार करें-वर्णसेट फ़ॉर्म सबमिशन के लिए उपयोग किए जाने वाले वर्ण एन्कोडिंग को निर्दिष्ट करता है
कार्य निर्दिष्ट करता है कि प्रपत्र सबमिट करते समय प्रपत्र-डेटा कहाँ भेजा जाए
स्वत: पूर्ण निर्दिष्ट करता है कि कोई प्रपत्र स्वत: पूर्ण होना चाहिए या नहीं
एनक्टाइप निर्दिष्ट करता है कि सर्वर पर सबमिट करते समय फॉर्म-डेटा को कैसे एन्कोड किया जाना चाहिए (केवल विधि = "पोस्ट" के लिए)
तरीका प्रपत्र-डेटा भेजते समय उपयोग करने के लिए HTTP विधि निर्दिष्ट करता है
नाम प्रपत्र का नाम निर्दिष्ट करता है
नवजागरण निर्दिष्ट करता है कि सबमिट करते समय फॉर्म को मान्य नहीं किया जाना चाहिए
रेले लिंक किए गए संसाधन और वर्तमान दस्तावेज़ के बीच संबंध निर्दिष्ट करता है
लक्ष्य निर्दिष्ट करता है कि फ़ॉर्म सबमिट करने के बाद प्राप्त होने वाली प्रतिक्रिया को कहाँ प्रदर्शित करना है