एचटीएमएल 5 - वेब फॉर्म 2.0

वेब फॉर्म 2.0 HTML4 में पाई जाने वाली सुविधाओं के लिए एक एक्सटेंशन है। HTML5 में प्रपत्र तत्व और विशेषताएँ HTML4 की तुलना में सिमेंटिक मार्क-अप की एक बड़ी डिग्री प्रदान करते हैं और हमें HTML4 में आवश्यक थकाऊ स्क्रिप्टिंग और स्टाइलिंग के एक महान सौदे से मुक्त करते हैं।

HTML4 में <इनपुट> तत्व

एचटीएमएल 4 इनपुट तत्व का उपयोग करते हैं type डेटा प्रकार निर्दिष्ट करने की विशेषता। HTML4 निम्नलिखित प्रकार प्रदान करता है -

अनु क्रमांक।	टाइप और विवरण
1	text एक फ्री-फॉर्म टेक्स्ट फ़ील्ड, मुख्य रूप से लाइन ब्रेक से मुक्त।
2	password संवेदनशील जानकारी के लिए एक फ्री-फॉर्म टेक्स्ट फ़ील्ड, नाममात्र मुफ्त में लाइन ब्रेक।
3	checkbox पूर्वनिर्धारित सूची से शून्य या अधिक मूल्यों का एक सेट।
4	radio एक गणना मूल्य।
5	submit बटन का एक स्वतंत्र रूप प्रस्तुत करने की शुरुआत करता है।
6	file MIME प्रकार के साथ एक मनमानी फ़ाइल और वैकल्पिक रूप से एक फ़ाइल नाम।
7	image एक विशेष छवि के आकार के सापेक्ष एक समन्वय, अतिरिक्त अर्थ के साथ कि यह अंतिम मूल्य चयनित होना चाहिए और फॉर्म सबमिट करना आरंभ करता है।
8	hidden एक मनमाना स्ट्रिंग जो आम तौर पर उपयोगकर्ता को प्रदर्शित नहीं होती है।
9	select एक एन्यूमरेटेड मूल्य, रेडियो प्रकार की तरह।
10	textarea एक मुक्त रूप पाठ क्षेत्र, मुख्य रूप से बिना किसी लाइन ब्रेक प्रतिबंध के।
1 1	button बटन का एक स्वतंत्र रूप जो बटन से संबंधित किसी भी घटना को आरंभ कर सकता है।

निम्नलिखित लेबल, रेडियो बटन और सबमिट बटन का उपयोग करने का सरल उदाहरण है -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

HTML5 में <इनपुट> तत्व

उपर्युक्त विशेषताओं के अलावा, एचटीएमएल 5 इनपुट तत्वों ने ऊपर के लिए कई नए मूल्य पेश किए typeविशेषता। ये नीचे सूचीबद्ध हैं।

NOTE - के नवीनतम संस्करण का उपयोग कर सभी निम्नलिखित उदाहरण का प्रयास करें Opera ब्राउज़र।

अनु क्रमांक।	टाइप और विवरण
1	दिनांक और समय एक दिनांक और समय (वर्ष, माह, दिन, घंटा, मिनट, दूसरा, एक सेकंड का अंश) आईएसओ 8601 के अनुसार एनटीसी के लिए निर्धारित समय क्षेत्र के साथ एन्कोड किया गया।
2	datetime-स्थानीय एक तारीख और समय (वर्ष, महीना, दिन, घंटा, मिनट, दूसरा, एक सेकंड का अंश) आईएसओ 8601 के अनुसार एन्कोड किया गया, जिसमें कोई समय क्षेत्र की जानकारी नहीं है।
3	दिनांक एक तारीख (वर्ष, माह, दिन) आईएसओ 8601 के अनुसार एन्कोडेड है।
4	महीना आईएसओ 8601 के अनुसार एक वर्ष और एक महीने की एक तारीख को इनकोड किया गया।
5	सप्ताह आईएसओ 8601 के अनुसार एक वर्ष और एक सप्ताह की संख्या वाली तारीख को एनकोड किया गया।
6	समय आईएसओ 8601 के अनुसार एक समय (घंटा, मिनट, सेकंड, आंशिक सेकंड) एन्कोड किया गया।
7	संख्या यह केवल संख्यात्मक मान को स्वीकार करता है। चरण विशेषता सटीक निर्दिष्ट करता है, 1 के लिए डिफ़ॉल्ट।
8	रेंज श्रेणी प्रकार का उपयोग उन इनपुट फ़ील्ड्स के लिए किया जाता है, जिनमें संख्याओं की श्रेणी से मान होना चाहिए।
9	ईमेल यह केवल ईमेल मूल्य को स्वीकार करता है। इस प्रकार का उपयोग उन इनपुट फ़ील्ड के लिए किया जाता है जिनमें ई-मेल पता होना चाहिए। यदि आप एक साधारण पाठ प्रस्तुत करने का प्रयास करते हैं, तो यह केवल [email protected] प्रारूप में ईमेल पता दर्ज करने के लिए बाध्य करता है।
10	यूआरएल यह केवल URL मान को स्वीकार करता है। इस प्रकार का उपयोग उन इनपुट फ़ील्ड के लिए किया जाता है जिनमें URL पता होना चाहिए। यदि आप एक साधारण पाठ प्रस्तुत करने का प्रयास करते हैं, तो यह केवल URL पते को http://www.example.com प्रारूप में या http://example.com प्रारूप में दर्ज करने के लिए बाध्य करता है।

<आउटपुट> तत्व

HTML5 ने एक नया तत्व <आउटपुट> पेश किया, जिसका उपयोग विभिन्न प्रकार के आउटपुट के परिणाम को दर्शाने के लिए किया जाता है, जैसे कि स्क्रिप्ट द्वारा लिखित आउटपुट।

आप उपयोग कर सकते हैं forदस्तावेज़ में आउटपुट तत्व और अन्य तत्वों के बीच संबंध निर्दिष्ट करने की विशेषता जो गणना को प्रभावित करती है (उदाहरण के लिए, इनपुट या पैरामीटर के रूप में)। विशेषता के लिए मान अन्य तत्वों की आईडी की एक अंतरिक्ष-पृथक सूची है।

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

प्लेसहोल्डर विशेषता

एचटीएमएल 5 ने एक नई विशेषता पेश की placeholder। <इनपुट> और <textarea> तत्वों पर यह विशेषता उपयोगकर्ता को एक संकेत प्रदान करती है कि क्षेत्र में क्या दर्ज किया जा सकता है। प्लेसहोल्डर टेक्स्ट में गाड़ी का रिटर्न या लाइन-फीड नहीं होना चाहिए।

यहाँ प्लेसहोल्डर विशेषता के लिए सरल वाक्यविन्यास है -

<input type = "text" name = "search" placeholder = "search the web"/>

यह विशेषता केवल मोज़िला, सफारी और क्रोम ब्राउज़र के नवीनतम संस्करणों द्वारा समर्थित है।

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

ऑटोफोकस विशेषता

यह एक सरल एक-चरण पैटर्न है, आसानी से दस्तावेज़ लोड के समय जावास्क्रिप्ट में प्रोग्राम किया जाता है, स्वचालित रूप से एक विशेष फॉर्म फ़ील्ड पर ध्यान केंद्रित करता है।

एचटीएमएल 5 ने एक नई विशेषता पेश की autofocus जो निम्नानुसार उपयोग किया जाएगा -

<input type = "text" name = "search" autofocus/>

यह विशेषता केवल मोज़िला, सफारी और क्रोम ब्राउज़र के नवीनतम संस्करणों द्वारा समर्थित है।

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

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

अब आपको क्लाइंट-साइड सत्यापन के लिए जावास्क्रिप्ट की आवश्यकता नहीं है जैसे खाली टेक्स्ट बॉक्स कभी जमा नहीं किया जाएगा क्योंकि HTML5 ने एक नई विशेषता पेश की required जिसका उपयोग निम्नानुसार किया जाएगा और एक मूल्य के लिए आग्रह करेगा -

<input type = "text" name = "search" required/>

यह विशेषता केवल मोज़िला, सफारी और क्रोम ब्राउज़र के नवीनतम संस्करणों द्वारा समर्थित है।

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -