🤲🏻 🎧 🚁 वेब डिजाइनरों के लिए एचटीएमएल 5। भाग 4: फार्म 2.0 👩🏽‍🎓 ➿ 💍

वेब डिजाइनरों के लिए एचटीएमएल 5

मार्कअप भाषा का संक्षिप्त इतिहास
HTML5 मॉडल
मल्टीमीडिया
फॉर्म 2.0
अर्थ विज्ञान
एचटीएमएल 5 और वर्तमान स्थितियां

प्रभाव जब आप माउस होवर करें, और वेब प्रपत्रों में सुधार: जब ब्राउज़रों JavaScript का समर्थन करने के लिए शुरू, जल्दी से खुद को दो मुख्य उद्देश्य स्थापित रुझान। फिर वह सीएसएस छद्म वर्ग में प्रकाशित हुई: मंडराना, और पहली योजना की स्थितियों से कई के लिए स्क्रिप्ट के लिए की जरूरत गायब हो गया।

यह कहानी लगातार दोहराई जाती है। एक खास पैटर्न एक बार, या कार्य लोकप्रिय पर्याप्त हो जाता है, वे लगभग निश्चित रूप से अंत में तकनीकी शब्दों में सरल किया है और अधिक सुलभ बना दिया जाएगा। इस तरह से CSS3 ने सरल एनिमेशन बनाने के लिए कई विशेषताओं को पेश किया है जो पहले जावास्क्रिप्ट की आवश्यकता थी।

रूपों की बात हो रही है, तो सीएसएस क्षमताओं काफी सीमित हैं। और अब दृश्य पर फिर से एचटीएमएल 5 आता है। एक ही सिद्धांत के बाद, यह नई सुविधाओं है कि वास्तव में नई नहीं है का परिचय है, लेकिन आसान और अधिक सुविधाजनक बनाया है।

यह अनुमान लगाना कि इससे पहले कि वे वेब प्रपत्र 2.0 नामक एक अलग WHATWG विनिर्देश का हिस्सा थे मुश्किल नहीं है।

डमी पाठ

इस खोज के रूपों के डिजाइन के लिए एक आम टेम्पलेट है:

ठूंठ के लिए पाठ डालने - यदि क्षेत्र को खाली है।
जब क्षेत्र फोकस में है - टोपी हटाने के लिए।
यदि उपयोगकर्ता ने फ़ील्ड को खाली छोड़ दिया और फ़ोकस हटा दिया, तो उसे वापस लौटा दें।

इस प्लग आम तौर पर पाठ इनपुट क्षेत्र है, जो सीएसएस, जावास्क्रिप्ट, या दोनों के संयोजन की मदद से हासिल की है की तुलना में थोड़ा हल्का रंग आवंटित किया जाता है जब।

एचटीएमएल 5 में, यह सब एक साधारण मापदंड प्लेसहोल्डर साथ किया जाता है:

<label for="hobbies">Your hobbies</label> <input id="hobbies" name="hobbies" type="text" placeholder="Owl stretching">

तो यह ब्राउज़र में दिखेगा। उल्लू खींच - एक उदाहरण के रूप में दिया डिफ़ॉल्ट पाठ।

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

यहां एक साधारण फ़ंक्शन का एक उदाहरण है जो एक विशिष्ट पैरामीटर के लिए समर्थन की जांच करता है:

 function elementSupportsAttribute(element,attribute) { var test = document.createElement(element); if (attribute in test) { return true; } else { return false; } }

यह स्मृति में एक "प्रेत" तत्व बनाता है - पृष्ठ पर ही नहीं - और फिर यह देखने के लिए कि क्या इस तत्व के प्रोटोटाइप में आपके द्वारा जांचे जा रहे पैरामीटर के समान गुण है। फ़ंक्शन सही या गलत पर वापस आ जाएगा।

इसकी मदद से आप केवल उन ब्राउज़रों कि इस सुविधा एचटीएमएल 5 का समर्थन नहीं करते के लिए वैकल्पिक कोड पर्ची कर सकते हैं:

 if (!elementSupportsAttribute('input','placeholder')) { //    JavaScript  . }

ऑटोफोकस

"हाय, मैं ऑटो फोकस समारोह हूँ। मैं गूगल के रूप में ऐसी भूमिकाओं के लिए आप में जाना जाता है: क्या हो रहा है: मैं भाग्यशाली और ट्विटर हूँ? "

इस टेम्पलेट बहुत ही सरल और अपेक्षाकृत आसानी से जावास्क्रिप्ट में लागू है। इसका सार यह है कि जब पृष्ठ लोड होता है, तो आपको स्वचालित रूप से एक विशिष्ट क्षेत्र पर ध्यान केंद्रित करने की आवश्यकता होती है।

एचटीएमएल 5 आप इस बूलियन ऑटोफोकस उपयोग करने के लिए अनुमति देता है:

 <label for="status">What's happening?</label> <input id="status" name="status" type="text" autofocus>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     क्या हो रहा है? </ Label> <label for="status">What's happening?</label> <input id="status" name="status" type="text" autofocus>

समस्या सिर्फ यह समारोह बहुत कष्टप्रद हो सकता है। बहुत बार, इंटरनेट पर पृष्ठों को फ़्लिप करते हुए, मैं सामग्री के माध्यम से जल्दी से स्क्रॉल करने के लिए स्पेस बार का उपयोग करता हूं। ऑटोफोकस के साथ ट्विटर जैसी साइटों पर, मैं अक्सर बजाय स्क्रॉल क्षेत्र की है कि रिक्त स्थान से भरा है।

क्यों इस विकल्प विनिर्देश में शामिल है के तर्क, यह काफी स्पष्ट है, लेकिन यह प्रयोज्य के मामले में आदर्श नहीं है। इसलिए, मैं स्पष्ट लाभ के मामले और असुविधा की न्यूनतम संभावना में ध्यान से और केवल इसका इस्तेमाल करने की सलाह देते हैं।

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

साथ ही एक प्लेसहोल्डर पैरामीटर, यदि आवश्यक हो ब्राउज़र में समर्थन ऑटोफोकस के लिए परीक्षण और, कर सकते हैं जावास्क्रिप्ट के लिए वैकल्पिक कोड जोड़ने के रूप में:

 if (!elementSupportsAttribute('input','autofocus')){ document.getElementById('status').focus(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     , 'ऑटोफोकस')) { if (!elementSupportsAttribute('input','autofocus')){ document.getElementById('status').focus(); }

पैरामीटर ऑटोफोकस लागू किया जा सकता है न केवल इनपुट तत्वों के लिए, लेकिन किसी भी अन्य क्षेत्र प्रकार, जैसे पाठ क्षेत्र के लिए, या का चयन करें। और, ज़ाहिर है, केवल एक बार प्रति पृष्ठ।

अपेक्षित

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

 <label for="pass"> </label> <input id="pass" name="pass" type="password" required>

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

स्वत: पूर्ण

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

HTML5 आपको एकल फ़ील्ड और पूरे फ़ॉर्म दोनों के लिए स्वत: पूर्ण अक्षम करने की अनुमति देता है। स्वतः पूर्ण पैरामीटर बूलियन नहीं है, हालांकि यह केवल दो मान लेता है: चालू और बंद ।

 <form action="/selfdestruct" autocomplete="off">

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

पहले से ही उल्लेख किया है, यह भी नमूना क्षेत्रों के लिए जोड़ा जा सकता है:

 <input type="text" name="onetimetoken" autocomplete="off">

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

यह अजीब लग सकता है कि इसे HTML5 में शामिल किया गया था, यह देखते हुए कि यह बहुत आम नहीं है। लेकिन यह पूरी तरह से उचित है, सुरक्षा को खतरे को ध्यान में रखते हुए जो ऑटोफिल के पीछे छिपा हो सकता है; तो अब है कि यह यदि आवश्यक हो तो बंद किया जा सकता।

Datalist

नई DataList तत्व आप कुछ चुनिंदा तत्व को मानक इनपुट पार करने के लिए अनुमति देता है। एक पैरामीटर सूची जोड़ना, आप तो पूर्व निर्धारित विकल्पों की सूची बना सकते हैं:

 <label for="homeworld">  </label> <input type="text" name="homeworld" id="homeworld" list="planets"> <datalist id="planets"> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> </datalist>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     = "homeworld" id = "homeworld" सूची = "ग्रह"> <label for="homeworld">  </label> <input type="text" name="homeworld" id="homeworld" list="planets"> <datalist id="planets"> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> <option value=""> </datalist>

यह उपयोगकर्ताओं को सूची में से एक विकल्प का चयन करें या अगर यह वहां नहीं है अपने खुद के जोड़ने के लिए अनुमति देता है। यह उन स्थितियों के लिए बहुत सुविधाजनक है जिनमें आमतौर पर एक अतिरिक्त फ़ील्ड "अन्य, नीचे निर्दिष्ट करें" सम्मिलित करना आवश्यक है।

सुविधाजनक संकर।

यदि ब्राउज़र डेंटलिस्ट का समर्थन नहीं करता है, तो ऐसा क्षेत्र सामान्य इनपुट के रूप में कार्य करेगा।

नई जानकारी

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

खोज

टाइप में सर्च वैल्यू वाला इनपुट एलिमेंट ठीक उसी तरह काम करता है जैसे टेक्स्ट वैल्यू वाला।

 <label for="query"></label> <input id="query" name="query" type="search">

फर्क सिर्फ इतना है - यह खोज करने के लिए माना जाता है कि ब्राउज़र क्षेत्र थोड़ा अलग प्रदर्शित करेगा, डिजाइन के सामान्य शैली का पालन ऑपरेटिंग सिस्टम में खोज फ़ील्ड।

तो यह, उदाहरण के लिए, सफारी करता है।

संपर्क विवरण

विभिन्न प्रकार की संपर्क जानकारी के लिए प्रकार पैरामीटर के लिए तीन नए मान हैं: ईमेल पते, साइट और फोन नंबर।

 <label for="email">Email</label> <input id="email" name="email" type="email"> <label for="website">-</label> <input id="website" name="website" type="url"> <label for="phone"></label> <input id="phone" name="phone" type="tel">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ईमेल </ label> <label for="email">Email</label> <input id="email" name="email" type="email"> <label for="website">-</label> <input id="website" name="website" type="url"> <label for="phone"></label> <input id="phone" name="phone" type="tel">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     = "email" type = "ईमेल"> <label for="email">Email</label> <input id="email" name="email" type="email"> <label for="website">-</label> <input id="website" name="website" type="url"> <label for="phone"></label> <input id="phone" name="phone" type="tel">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     = "वेबसाइट" प्रकार = "url"> <label for="email">Email</label> <input id="email" name="email" type="email"> <label for="website">-</label> <input id="website" name="website" type="url"> <label for="phone"></label> <input id="phone" name="phone" type="tel">

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

सफारी क्षेत्रों के इन नए प्रकार के लिए समर्थन व्यक्त किया है, लेकिन पहली नजर में वे प्रकार = «पाठ» के साथ उन लोगों से किसी भी अलग ढंग से इस पर गौर नहीं करते। हालांकि, अगर आप उन्हें मोबाइल सफारी में अनुभव - एप्पल के मोबाइल उपकरणों कि - अंतर ध्यान देने योग्य हो जाएगा। देखें ऑन-स्क्रीन कीबोर्ड विभिन्न क्षेत्रों के लिए अलग अलग हो जाएगा:

मोबाइल सफारी में नए तरह के इंप्यूटेशन।

एक trifle, लेकिन अच्छा।

स्लाइडर्स (जो "स्लाइडर्स" हैं)

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

एक उत्कृष्ट उदाहरण - एक स्लाइडर। अब तक, यह जावास्क्रिप्ट की मदद के बिना बनाने के लिए असंभव था। अब, HTML5 के साथ, यह टाइप = "रेंज" के साथ एक देशी ब्राउज़र इनपुट के रूप में मौजूद है।

 <label for="amount"> ?</label> <input id="amount" name="amount" type="range">

यह सफ़ारी, और ओपेरा में इनपुट रेंज के प्रकार की तरह दिखता है।

डिफ़ॉल्ट रूप से, शून्य से एक सौ के लिए इस क्षेत्र की सीमा। न्यूनतम और अधिकतम मानों मापदंडों न्यूनतम और अधिकतम क्रमशः का उपयोग कर सेट किया जा सकता।

 <label for="rating"> </label> <input id="rating" name="rating" type="range" min="1" max="5">

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

बेशक, पटकथा समाधान डाउनलोड करने के लिए अधिक समय की आवश्यकता होगी, और "देशी» डोम तत्वों के अलावा अन्य तरह से आगे की प्रक्रिया के लिए कम उपलब्ध हो जाएगा। हालांकि, अज्ञात कारणों के लिए, सफारी में एक ही श्रेणी वर्तमान में मित्र कीबोर्ड के साथ नहीं कर सकते हैं ... मुझे आशा है कि जल्द ही मरम्मत की जाएगी।

काउंटर

रेंज प्रकार क्षेत्र उपयोगकर्ता द्वारा चयनित वर्तमान मान प्रदर्शित नहीं करता है, लेकिन केवल नेत्रहीन स्लाइडर पर सापेक्ष संख्या प्रतिनिधित्व करता है। एक विशिष्ट मान दर्ज करने की क्षमता - कुछ मामलों में, यह उचित है, लेकिन अन्य महत्वपूर्ण सटीकता में है। इसके लिए टाइप = "संख्या" है ।

 <label for="amount"> ?</label> <input id="amount" name="amount" type="number" min="5" max="20">

ब्राउज़र इस क्षेत्र बटन "प्लस-माइनस" में जुड़ जाते हैं, यह पाठ प्रकार और सीमा के बीच एक तरह के एक संकर बना रही है।

तारीख और समय

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

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

एचटीएमएल 5 दिनांक और समय के लिए खेतों के विभिन्न प्रकार के उपलब्ध एक पूरी मुट्ठी है:

दिनांक - वर्ष, माह और दिन के लिए।

डेटाइम - वर्ष, महीना, दिन, प्लस घंटे, मिनट, सेकंड और समय क्षेत्र।

datetime-स्थानीय - एक ही बात है, लेकिन समय क्षेत्र निर्दिष्ट किए बिना।

समय - घंटे, मिनट, सेकंड।

महीने - महीने और वर्ष (कोई संख्या)।

: mm: इन सभी प्रकार के आईएसओ YYYY-MM-DDThh में समय की लंबाई रिकॉर्ड करेगा ss.Z, जहां वाई - साल, एम - महीने, डी - संख्या, ज - ज, मीटर - मिनट, एस - सेकंड, और Z - समय क्षेत्र । एक उदाहरण के रूप - तारीख और प्रथम विश्व युद्ध के समय, 11 घंटे और सुबह में 11 मिनट, 11 नवंबर 1918 प्रथम वर्ष:

दिनांक : 1918-11-11

दिनांक: 1918-11-11T11: 11: 00 + 01

datetime-स्थानीय: 1918-11-11T11: 11: 00

समय: 11:11:00

माह: 1918-1911

वहाँ बस साल के प्रकार है, लेकिन एक सप्ताह है - साल साथ संयोजन के रूप में 53 1 से एक नंबर।

यह सब काफी सरल है का उपयोग करें:

 <label for="dtstart">Start date</label> <input id="dtstart" name="dtstart" type="date">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     प्रारंभ दिनांक </ label> <label for="dtstart">Start date</label> <input id="dtstart" name="dtstart" type="date">

ओपेरा इन नए क्षेत्रों में क्षमता के कार्यान्वयन से निपटने, लेकिन वे इसे बहुत ही आकर्षक है कहने के लिए नहीं लग रहे ...

हमेशा की तरह, ब्राउज़र है कि इस प्रौद्योगिकी का समर्थन नहीं करते हैं, तो आप एक साधारण पाठ क्षेत्र देखेंगे। इस मामले में, आप या तो उपयोगकर्ता निर्देशों के निर्दिष्ट कर सकते हैं, किस प्रारूप में वे तारीख दर्ज करें, या कैलेंडर स्क्रिप्ट के विजेट पेस्ट करना होगा। फिर से, पहले की जांच करते रहें इसके अंतर्निर्मित समर्थन:

 if (!inputSupportsType('date')) { //    . }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     )) { if (!inputSupportsType('date')) { //    . }

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

विंदुक

शायद सबसे साहसी विकल्प एचटीएमएल 5 में प्रदान की विजेट्स में से एक, क्षेत्र रंग का एक प्रकार है। सफेद, और इतने पर के लिए # काला के लिए 000000, #FFFFFF: यह हेक्साडेसिमल स्वरूप में रंग कोड के रूप में मान स्वीकार करता है।

 <label for="bgcolor"> </label> <input id="bgcolor" name="bgcolor" type="color">

विचार अंत में, जैसे कि वे लगभग सभी अपने, कीमत पर अन्य अनुप्रयोगों में पाए जाते हैं के रूप में ब्राउज़रों "पिपेट", में निर्मित जोड़ना है। यह अभी तक किसी भी ब्राउज़र द्वारा समर्थित नहीं है, लेकिन अगर यह है कि करने के लिए आता है, यह बहुत शांत कर दिया जाएगा।

तो इस मामले में, आप का उपयोग करना चाहिए जावास्क्रिप्ट समाधान है, लेकिन भूल नहीं है की जाँच करने के जबकि सभी एक ही में निर्मित समर्थन - इतनी के रूप में पल याद नहीं जब समय आया था।

इसे स्वयं करें

इनपुट के इन नए प्रकार के सभी दो उद्देश्यों के लिए कार्य करता है: वे ब्राउज़रों विशेष रूप से डिजाइन करने के लिए किया जा या डेटा के कुछ प्रकार के लिए क्षेत्र के लिए कॉन्फ़िगर है, और इन आंकड़ों की वैधता की जांच करने के लिए कैसे पता करने के लिए अनुमति देते हैं। वर्णित एचटीएमएल 5 नवाचारों लेकिन कुछ बिंदु पर आप अपनी विशेष सिद्धांतों का अनुसरण, validiruemoe इनपुट क्षेत्र verotyano बनाना पड़ सकता है सबसे आम स्थितियों को कवर किया,।

अच्छी खबर यह है कि यह पद्धति विकल्प है, जहां आप डेटा आप अनुरोध के प्रकार निर्दिष्ट कर सकते हैं का उपयोग कर लागू किया जा सकता है। बुरी खबर यह है कि आप रेगुलर एक्सप्रेशन का उपयोग करना है।

 <label for="zip">  </label> <input id="zip" name="zip" pattern="[\d]{5}(-[\d]{4})">

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

भविष्य में देखो

वेब के नए प्रकार की शुरूआत फॉर्म्स एचटीएमएल 5 एक महत्वपूर्ण धक्का आगे प्रदान करता है। वे कंधों पर बोझ का एक महत्वपूर्ण हिस्सा बदलाव, सामान्य रूप से जावास्क्रिप्ट में निहित किया जाएगा, एचटीएमएल 5। फिलहाल, हम अभी भी एक संक्रमणकालीन चरण में हैं - सभी नवाचार ब्राउज़रों द्वारा समर्थित नहीं हैं, और हम अभी तक पूरी तरह से यहां जावास्क्रिप्ट से छुटकारा नहीं पा सकते हैं। लेकिन उज्जवल भविष्य स्पष्ट रूप से ज्यादा दूर नहीं है, तो हम अपनी किरणों के पहले देखते हैं, और उन में सेंक सकते हैं।

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

मुझे यकीन है कि आप में निर्मित ब्राउज़र कैलेंडर और स्लाइडर के सभी लाभों को देखने हूँ, लेकिन मैं अपनी आँखें और तार्किक प्रश्न में देख "यह सीएसएस शैलियों को लागू किया जा सकता है?"

दुर्भाग्य से, इस सवाल का जवाब जल्द ही पल में - "नहीं।" इस सीएसएस कार्य समूह पर कार्य करना।

यह आपको ज्ञान उन सब पर उपयोग करने के लिए परहेज कर सकते हैं। यदि ब्राउज़रों में नई सुविधाओं के विशिष्ट कार्यान्वयन आपको आकर्षक नहीं लगते हैं, तो आप इसके बजाय स्क्रिप्ट विजेट का उपयोग करना जारी रख सकते हैं।

लेकिन मैं तुम्हें अपने आप को सवाल "क्या यह जरूरी है कि उन्हें अपने शैलियाँ लागू करने के लिए?" सब के बाद पूछना चाहता हूँ, हम में से कई की तरह नहीं डेवलपर्स या -dizaynery घुसपैठ बल हमें उनकी आदतों छोड़ देना और इंटरफेस उन्हें द्वारा आविष्कार पता लगाने के लिए, जब भावी, ऐसा जो, अपनी राय, बेहतर मानक (जो हमेशा सच नहीं है)। pooschrat उपयोगकर्ताओं के इस शातिर अभ्यास को गुमराह करने क्यों गए थे?

व्यक्तिगत रूप से, मैं ब्राउज़रों को एचटीएमएल 5 वेब रूपों के लिए सबसे सुविधाजनक और सुंदर समाधानों के लिए प्रतिस्पर्धा करते देखना चाहूंगा। इस तरह के एक युद्ध ब्राउज़र मैं समर्थन करना अच्छा लगेगा।

ठीक है, रूपों के साथ किया। अगले भाग में हम एचटीएमएल 5 का नया स्वादिष्ट अर्थ विज्ञान से निपटने।

वेब डिजाइनरों के लिए एचटीएमएल 5। भाग 4: फार्म 2.0

वेब डिजाइनरों के लिए एचटीएमएल 5