रूपों के साथ अनुभव में सुधार

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

हालाँकि, पहले मैं ऐसे रूपों के विकास पर अपनी स्थिति बताना चाहूंगा। मेरी राय में, विकासशील इंटरफेस के लिए सही दृष्टिकोण प्रगतिशील सुधार दृष्टिकोण है।

अलेक्जेंडर पर्सिन ने अपने लेख प्रोग्रेसिव एनहांसमेंट में इस दृष्टिकोण के बारे में विस्तार से बात की। यदि आपने अभी भी इसका सामना नहीं किया है, तो मैं आपको इसे पढ़ने की अत्यधिक सलाह देता हूं।

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

रनेट ब्राउज़र आँकड़े

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

इस लेख के सभी ट्रिक्स को 56.8% उपयोगकर्ताओं द्वारा सराहा जाएगा। इन आंकड़ों में ब्राउज़र शामिल हैं: IE 10, फ़ायरफ़ॉक्स 11-17, क्रोम 4-24, सफारी 6, ओपेरा 12।

कुछ रिसेप्शन को 80.1% उपयोगकर्ताओं द्वारा सराहा जाएगा। इसके अतिरिक्त इसमें समर्थन शामिल है: IE 8-9, सफारी 4-5, ओपेरा 10-11।

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

HTML5 में नए रूप की विशेषताएँ

के साथ शुरू करने के लिए, मुझे आपको फॉर्म फ़ील्ड की नई विशेषताओं की याद दिलाएं जो मैं उपयोग करूंगा: required , autofocus , placeholder ।

• required - आवश्यक क्षेत्र;
• autofocus - पृष्ठ लोड होने पर क्षेत्र पर ध्यान केंद्रित करना;
• placeholder - फ़ील्ड विवरण।

इसके साथ ही, कई नए प्रकार के क्षेत्र दिखाई दिए: date , email , number , range और अन्य। हालांकि, उनमें से सबसे हानिरहित ( email ) अभी भी सावधानी के साथ प्रयोग किया जाता है। लेकिन इसके लिए काम करने के लिए, विशेष क्रियाएं आवश्यक नहीं हैं। इस प्रकार के क्षेत्र को न जानने वाले ब्राउज़र इसे पाठ मानेंगे।

इसके अलावा, अतिरिक्त सीएसएस चयनकर्ता दिखाई दिए: E:valid , E:invalid , E:required - जिसके साथ आप विभिन्न स्थितियों में फ़ील्ड की शैली का वर्णन कर सकते हैं।

नए क्षेत्र विशेषताओं और उनके डिजाइन के काम का प्रदर्शन।

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

जैसे ही आप टाइप करते हैं डेटा फॉर्म लिखना

फ़ॉर्म भरने के साथ आम समस्याओं में से एक यह है कि दर्ज किया गया डेटा खो गया है। यह विभिन्न कारणों से हो सकता है: एक साइट त्रुटि, एक लिंक पर क्लिक करने पर, अंत में, इंटरनेट बंद हो सकता है। इस समस्या को विभिन्न तरीकों से हल किया जा सकता है, उदाहरण के लिए, जैसे ही आप टाइप करते हैं, localStorage को डेटा लिखना।

1. अगर ( विंडो। स्थानीयस्टोर ) {
2. var तत्वों = दस्तावेज़। querySelectorAll ( '[नाम]' ) ;
4. के लिए ( var i = 0 , लंबाई = तत्व। लंबाई ; मैं < लंबाई ; i ++ ) {
5. ( फ़ंक्शन ( तत्व ) {
6. var नाम = तत्व। getAttribute ( 'नाम' ) ;
8. तत्व। मान = स्थानीय स्तर। getItem ( नाम ) || '' ;
10. तत्व। onkeyup = function ( ) {
11. localStorage। setItem ( नाम , तत्व। मूल्य ) ;
12. } ;
13. } ) ( तत्व [ i ] ) ;
14. }
15. }

अजाक्स द्वारा प्रपत्र की वैधता और डेटा प्रस्तुत करना

चूंकि हम required विशेषताओं का उपयोग करते हैं, इसलिए हम सत्यापन को एक नए तरीके से कर सकते हैं। प्रपत्र तत्व के लिए HTML5 विनिर्देश में, checkValidity() विधि जोड़ी गई है। यह true या false । फॉर्म की रणनीति बहुत सरल होगी: यदि सत्यापन जांच नकारात्मक परिणाम देती है, तो हम फॉर्म जमा को रोकते हैं, अन्यथा, जमा करने की अनुमति दें।

1. सबमिट करें। विकलांग = ! के रूप में। checkValidity ( ) ;

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

1. के रूप में। ऑन्सुबमिट = फ़ंक्शन ( ईवेंट ) {
2. अगर ( विंडो। फॉर्मडाटा ) {
3. घटना। रोकाडिफॉल्ट ( ) ;
5. var data = new FormData ( फॉर्म ) ;
6. var xhr = new XMLHttpRequest ( ) ;
7. var url = रूप। getAttribute ( 'कार्रवाई' ) + '? समय =' + ( नई तिथि ( ) ) । गेटटाइम ( ) ;
9. XHR। खुला ( 'पोस्ट' , url ) ;
10. XHR। onreadystatechange = function ( ) {
11. अगर ( xhr। readyState == 4 && xhr। स्थिति == 200 ) {
12. // सर्वर प्रतिक्रिया: xhr.responseText
13. }
14. } ;
15. XHR। भेजना ( डेटा ) ;
16. }
17. } ;

अतुल्यकालिक अनुरोधों के साथ काम करते समय, याद रखें कि कुछ ब्राउज़र परिणाम को कैश करते हैं। उदाहरण के लिए, इंटरनेट एक्सप्लोरर, मोबाइल सफारी (आईओएस 6) और अन्य ऐसा करते हैं। इस समस्या से बचने के लिए, आप वर्तमान समय को अनुरोध पते पर जोड़ सकते हैं।

अब हमें टेक्स्ट फॉर्म ( xhr.responseText ) में सर्वर से प्रतिक्रिया xhr.responseText , लेकिन यह समय के साथ बदल जाएगा। उदाहरण के लिए, यदि हम यह सुनिश्चित करने के लिए जानते हैं कि उत्तर JSON है, तो हम तुरंत जावास्क्रिप्ट ऑब्जेक्ट प्राप्त कर सकते हैं।

1. var xhr = new XMLHttpRequest ( ) ;
3. XHR। खुला ( विधि , url ) ;
4. XHR। responseType = 'json' ;
6. XHR। onreadystatechange = function ( ) {
7. अगर ( xhr। readyState == 4 && xhr। स्थिति == 200 ) {
8. // सर्वर प्रतिक्रिया: xhr.response
9. }
10. } ;
12. XHR। भेजना ( ) ;

ध्यान दें कि सर्वर की प्रतिक्रिया xhr.response प्रॉपर्टी में होगी। और xhr.responseType संपत्ति अन्य मान ले सकती है, उदाहरण के लिए: arraybuffer , blob , document ।

प्रपत्र डेटा सहेजने और XMLHttpRequest का उपयोग करके इसे सबमिट करने का प्रदर्शन।

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

अपलोड की गई तस्वीरों का पूर्वावलोकन करें

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

• multiple - आपको कई फ़ाइलों का चयन करने की अनुमति देता है;
• accept - आपको यह निर्दिष्ट करने की अनुमति देता है कि कौन सी फ़ाइलों को चुनना है।

मान लीजिए हम अपने फॉर्म में कई तस्वीरें अपलोड करने की क्षमता जोड़ना चाहते हैं। ऐसा मैदान कुछ इस तरह दिखेगा।

1. < इनपुट प्रकार = "फ़ाइल" नाम = "छवि" स्वीकार = "छवि / *" एकाधिक>

मैं आपको याद दिलाना चाहता हूं: इस तरह की विशेषताओं वाला एक क्षेत्र पुराने ब्राउज़रों में काम करेगा। सीमा होगी:

1. केवल एक फ़ाइल;
2. फ़ाइलों का सत्यापन सर्वर की तरफ किया जाता है।

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

1. दस्तावेज़। querySelector ( '[type = file]' ) । addEventListener ( 'परिवर्तन' ) , फ़ंक्शन ( ) {
2. [ ] । पहले से । कॉल ( यह । फ़ाइलें , फ़ंक्शन ( फ़ाइल ) {
3. अगर ( फ़ाइल प्रकार । मिलान ( /image.*/ ) ) {
4. var रीडर = नया FileReader ( ) ;
6. पाठक। onload = function ( घटना ) {
7. var img = दस्तावेज़। createElement ( 'img' ) ;
8. img। src = घटना। लक्ष्य । परिणाम ;
10. div। appendChild ( img ) ;
12. कतार। धक्का ( { फ़ाइल : फ़ाइल , तत्व : img } ) ;
13. } ;
15. पाठक। readAsDataURL ( फ़ाइल ) ;
16. }
17. } ;
18. } , झूठी ) ;

इस प्रकार, हम तुरंत साइट पर सभी चयनित फ़ोटो प्रदर्शित करते हैं।



और उन्हें एक अजाक्स का उपयोग करके भेजने के लिए, हम उन्हें एक queue सरणी में इकट्ठा करते हैं। इससे पहले लेख में, हमने FormData ऑब्जेक्ट का उपयोग किया था, अब हम इसमें केवल फाइलों की एक सूची जोड़ते हैं।

1. var data = new FormData ( फॉर्म ) ;
3. कतार। forach ( फ़ंक्शन ( तत्व ) {
4. डेटा। परिशिष्ट ( 'छवि' , तत्व। फ़ाइल ) ;
5. } ;

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

फ़ोटो का पूर्वावलोकन करें और उन्हें अजाक्स का उपयोग करके भेजें।

फ़ाइलें खींचें और छोड़ें

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

1. फंक्शन प्रीव्यूइमेज ( फाइलें ) {
2. [ ] । पहले से । कॉल ( फ़ाइलें , फ़ंक्शन ( फ़ाइल ) {
3. अगर ( फ़ाइल प्रकार । मिलान ( /image.*/ ) ) {
4. var रीडर = नया FileReader ( ) ;
6. पाठक। onload = function ( घटना ) {
7. var img = दस्तावेज़। createElement ( 'img' ) ;
8. img। src = घटना। लक्ष्य । परिणाम ;
10. div। appendChild ( img ) ;
12. कतार। धक्का ( { फ़ाइल : फ़ाइल , तत्व : img } ) ;
13. } ;
15. पाठक। readAsDataURL ( फ़ाइल ) ;
16. }
17. } ;
18. }

मान लीजिए कि चलती फ़ाइलों के लिए ज़ोन wrapper वर्ग के साथ एक ब्लॉक है। इसके लिए ईवेंट जोड़ें।

1. var फ़ाइल = दस्तावेज़। querySelector ( '[type = file]' ) ;
2. var dropzone = दस्तावेज़। querySelector ( '.wrapper' ) ;
4. फ़ाइल। addEventListener ( 'परिवर्तन' ) , फ़ंक्शन ( ) {
5. पूर्वावलोकनइमेज ( यह फ़ाइलें ) ;
6. यह । मूल्य = '' ;
7. } , झूठी ) ;
9. dropzone। addEventListener ( 'ड्रैगओवर' , फंक्शन ( ईवेंट ) {
10. घटना। रोकाडिफॉल्ट ( ) ;
11. dropzone। क्लासिस्ट । जोड़ें ( 'सक्रिय' ) ;
12. घटना। dataTransfer । dropEffect = 'copy' ;
13. } , झूठी ) ;
15. dropzone। addEventListener ( 'ड्रॉप' , फंक्शन ( ईवेंट ) {
16. घटना। रोकाडिफॉल्ट ( ) ;
17. dropzone। क्लासिस्ट । निकालें ( 'सक्रिय' ) ;
18. प्रीव्यूमैजेस ( ईवेंट। डेटाट्रेनर्स फ़ाइल्स ) ;
19. } , झूठी ) ;

जैसा कि आप देख सकते हैं, हमने चलती फ़ाइलों की शुरुआत ( dragover ) और अंत ( drop ) की घटनाओं को जोड़ा है। हम फ़ंक्शन previewImages सभी ट्रांसफर की गई फ़ाइलों को ट्रांसफर करते हैं। इस प्रकार, हमारा फ़ॉर्म उसी तरह काम करता है जैसे कि साइट के माध्यम से चुनी गई फ़ाइलों और कंप्यूटर से स्थानांतरित किया गया।

फ़ाइल अपलोड प्रक्रिया (प्रगति बार)

तस्वीरें बहुत बड़ी हो सकती हैं, इसलिए लोडिंग प्रक्रिया को प्रदर्शित करने का प्रयास करें। इस प्रक्रिया की कल्पना करने के लिए, मैं progress तत्व ले जाऊंगा, और आप एक चलती हुई पृष्ठभूमि के साथ एक div ले सकते हैं। प्रक्रिया स्वयं XMLHttpRequest विनिर्देशन से progress इवेंट में होगी।

1. var xhr = new XMLHttpRequest ( ) ;
3. XHR। अपलोड करें । addEventListener ( 'प्रगति' , फंक्शन ( ईवेंट ) {
4. अगर ( घटना। लंबाई प्रतिष्ठित ) {
5. प्रगति। मूल्य = गणित। दौर ( घटना ( लोड * 100 ) / घटना कुल ) ;
6. }
7. } , झूठी ) ;

ड्रैग एंड ड्रॉप और फ़ाइल अपलोड प्रगति का प्रदर्शन।

अंत में

हमारे सरल रूप में UX में कई महत्वपूर्ण सुधार हुए हैं।

1. प्रवेश के समय सत्यापन होता है;
2. भेजे गए डेटा को भेजे जाने तक संग्रहीत किया जाता है;
3. संपर्क विवरण बार-बार काम के लिए सहेजे जाते हैं;
4. फ़ोटो का पूर्वावलोकन करें;
5. फ़ाइलों को डाउनलोड करने की प्रक्रिया।

उसी समय, जब से हमने प्रगतिशील सुधार के अनुसार काम किया, हमारा रूप हर जगह काम करता है:

• IE 6-7 और अन्य पुराने ब्राउज़रों में,
• जावास्क्रिप्ट के साथ अक्षम
• मोबाइल उपकरणों पर।

आईओएस 6 पर काम करें FileReader ।

मुझे यकीन है कि UX रूपों में सुधार करते समय, आप अधिक दिलचस्प समाधान पा सकते हैं। कृपया नीचे दिए गए टिप्पणियों में अपने निर्णय, सुझाव, आलोचना जोड़ें। धन्यवाद!

---

मूल वेब ऊर्जा ब्लॉग लेख।